css動畫

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 向前和向后填充模式都被應用
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 看了很多視頻、文章,最后卻通通忘記了,別人的知識依舊是別人的,自己卻什么都沒獲得。此系列文章旨在加深自己的印象,因...
    DCbryant閱讀 1,891評論 0 4
  • css3過度動畫css3都有哪些新增的東西 : 過度,動畫,陰影,圓角;transition : width (寬...
    歲月悄然飛逝徒留回憶_54a5閱讀 1,049評論 0 1
  • css3過度動畫css3都有哪些新增的東西 : 過度,動畫,陰影,圓角;transition : width (寬...
    承諾過往雲煙閱讀 223評論 0 0
  • css3圓角 設置某一個角的圓角,比如設置左上角的圓角:border-top-left-radius:30px 6...
    f6d8ee519880閱讀 922評論 0 0
  • css3圓角 設置某一個角的圓角,比如設置左上角的圓角:border-top-left-radius:30px 6...
    f6d8ee519880閱讀 153評論 0 0