css3圓角:
設置某一個角的圓角,比如設置左上角的圓角:
border-top-left-radius:30px 60px;
同時分別設置四個角: border-radius:30px 60px 120px 150px;
設置四個圓角相同:
border-radius:50%;
CSS3陰影
<style type="text/css">
.box{
width:200px;
height:50px;
background-color:gold;
/* box-shadow:10px 10px 5px 2px pink inset; */
box-shadow:10px 10px 5px 2px pink;
}
</style>
......
<div class="box"></div>
<!-- 給盒子加上了粉紅色的陰影 -->
rgb(新的顏色值表達法)
1、盒子透明度表示法:opacity:0.1;filter:alpha(opacity=10)(兼容IE);
2、rgba(0,0,0,0.1) 前三個數值表示顏色,第四個數值表示顏色的透明度
css transition動畫
linear 勻速
ease 開始和結束慢速
ease-in 開始是慢速
ease-out 結束時慢速
ease-in-out 開始和結束時慢速
cubic-bezier(n,n,n,n)
css3 transform變換
1、translate(x,y) 設置盒子位移
2、scale(x,y) 設置盒子縮放
3、rotate(deg) 設置盒子旋轉
4、skew(x-angle,y-angle) 設置盒子斜切
5、perspective 設置透視距離
6、transform-style flat | preserve-3d 設置盒子是否按3d空間顯示
7、translateX、translateY、translateZ 設置三維移動
8、rotateX、rotateY、rotateZ 設置三維旋轉
9、scaleX、scaleY、scaleZ 設置三維縮放
10、tranform-origin 設置變形的中心點
11、backface-visibility 設置盒子背面是否可見
css3 animation動畫
1、@keyframes 定義關鍵幀動畫
2、animation-name 動畫名稱
3、animation-duration 動畫時間
4、animation-timing-function 動畫曲線
linear 勻速
ease 開始和結束慢速
ease-in 開始是慢速
ease-out 結束時慢速
ease-in-out 開始和結束時慢速
steps 動畫步數
5、animation-delay 動畫延遲
6、animation-iteration-count 動畫播放次數 n|infinite
7、animation-direction
normal 默認動畫結束不返回
Alternate 動畫結束后返回
8、animation-play-state 動畫狀態
paused 停止
running 運動
9、animation-fill-mode 動畫前后的狀態
none 不改變默認行為
forwards 當動畫完成后,保持最后一個屬性值(在最后一個關鍵幀中定義)
backwards 在 animation-delay 所指定的一段時間內,在動畫顯示之前,應用開始屬性值(在第一個關鍵幀中定義)
both 向前和向后填充模式都被應用