真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

css動畫屬性怎么用

這篇文章給大家分享的是有關css動畫屬性怎么用的內(nèi)容。小編覺得挺實用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。

創(chuàng)新互聯(lián)的客戶來自各行各業(yè),為了共同目標,我們在工作上密切配合,從創(chuàng)業(yè)型小企業(yè)到企事業(yè)單位,感謝他們對我們的要求,感謝他們從不同領域給我們帶來的挑戰(zhàn),讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。專業(yè)領域包括網(wǎng)站設計、做網(wǎng)站、電商網(wǎng)站開發(fā)、微信營銷、系統(tǒng)平臺開發(fā)。

1 transition(過渡)

使用語法:

transition: property duration timing-function delay;

參數(shù):

(1) property(設置過渡效果的css屬性名稱):none | all | property。none表示沒有屬性獲得過渡效果;all表示所有屬性都將獲得過渡效果;property表示css屬性列表,多個屬性用逗號( , )隔開。

(2) duration(設置完成過渡效果的時間):秒或毫秒(s/ms)。

(3) timing-function(設置效果速度的速度曲線):linear,規(guī)定以相同速度開始到結束,等價于cubic-bezier(0,0,1,1);ease,慢速開始,然后慢速結束,等價于cubic-bezier(0.25,0.1,0.25,1);ease-in,以慢速開始,等價于cubic-bezier(0.42,0,1,1);ease-out,以慢速結束,等價于cubic-bezier(0,0,0.58,1);ease-in-out,以慢速開始和結束,等價于cubic-bezier(0.42,0,0.58,1);cubic-bezier(n,n,n,n),在該函數(shù)定義自己的值,數(shù)值為0-1之間。

(4) delay(過渡效果何時開始):值多少秒后執(zhí)行過渡效果,如 2s ,表示2s后執(zhí)行。

2 transform

transform屬性應用于2D 或 3D轉換。該屬性允許我們能夠?qū)υ剡M行旋轉、縮放、傾斜、移動這四類操作。

使用語法:

transform: none|transform-functions;

參數(shù):

(1) none:定義不進行任何轉換,一般用于注冊掉該轉換。

(2) transform-functions:定義要進行轉換的類型函數(shù)。主要有:

旋轉(rotate):主要分為2D旋轉和3D旋轉。rotate(angle),2D 旋轉,參數(shù)為角度,如45deg;rotate(x,y,z,angle),3D旋轉,圍繞原地到(x,y,z)的直線進行3D旋轉;rotateX(angle),沿著X軸進行3D旋轉;rotateY(angle);rotateZ(angle);

縮放(scale):一般用于元素的大小收縮設定。主要類型同上,有scale(x, y)、scale3d(x, y, z)、scaleX(x)、scaleY(y)、scaleZ(z),其中x、y、z為收縮比例。

傾斜(skew):主要用于對元素的樣式傾斜。skew(x-angle, y-angle),沿著x和y軸的2D傾斜轉換;skewX(angle),沿著x軸的2D傾斜轉換;skew(angle),沿著y軸的2D傾斜轉換。

移動(translate):主要用于將元素移動。translate(x, y),定義向x和y軸移動的像素點;translate(x, y, z),定義像x、y、z軸移動的像素點;translateX(x);translateY(y);translateZ(z)。

3 animation

該屬性主要用于設置動畫屬性。

使用語法:

animation: name duration timing-function delay iteration-count direction;

參數(shù):

(1) name:需要綁定到選擇器的keyframe名稱。

(2) duration:完成該動畫需要花費的時間,秒或毫秒。

(3) timing-function:動畫的運動速度曲線。linear,規(guī)定以相同速度開始到結束,等價于cubic-bezier(0,0,1,1);ease,慢速開始,然后慢速結束,等價于cubic-bezier(0.25,0.1,0.25,1);ease-in,以慢速開始,等價于cubic-bezier(0.42,0,1,1);ease-out,以慢速結束,等價于cubic-bezier(0,0,0.58,1);ease-in-out,以慢速開始和結束,等價于cubic-bezier(0.42,0,0.58,1);cubic-bezier(n,n,n,n),在該函數(shù)定義自己的值,數(shù)值為0-1之間。

(4) delay:設置動畫在開始之前的延遲。

(5) iteration-count:設置動畫執(zhí)行的次數(shù)。

(6) direction:是否輪詢反向播放動畫。normal,默認值,動畫應該正常播放;alternate,動畫應該輪流反向播放。

下面展示了這些元素的測試代碼:




    transition/transform


    #div1 {
        float: left;
        height: 100px;
        width: 100px;
        background-color: red;
    }
    #div2 {
        float: left;
        height: 100px;
        width: 100px;
        background-color: green;
    }
    #div3 {
        float: left;
        height: 100px;
        width: 100px;
        background-color: blue;
    }
    #div4 {
        float: left;
        height: 100px;
        width: 100px;
        background-color: #234F21;
    }
    #div5 {
        float: left;
        height: 100px;
        width: 100px;
        background-color: #af123c;
    }
    #div6 {
        float: left;
        height: 100px;
        width: 100px;
        background-color: #affa3c;
    }
    /* transition 實現(xiàn)多個屬性 */
    #div1:active {
        width:200px;
        height: 200px;
        transition: width 2s ease,height 2s ease;
        -moz-transition: width 2s ease,height 2s ease; /* Firefox 4 */
        -webkit-transition: width 2s ease,height 2s ease; /* Safari 和 Chrome */
        -o-transition: width 2s ease,height 2s ease; /* Opera */
    }
    /* transform 旋轉 rotate */
    #div2:hover {
        transform:rotate(35deg);
        -ms-transform:rotate(35deg);     /* IE 9 */
        -moz-transform:rotate(35deg);     /* Firefox */
        -webkit-transform:rotate(35deg); /* Safari 和 Chrome */
        -o-transform:rotate(35deg);     /* Opera */
    }
    /* transform 縮放 scale */
    #div3:hover {
        transform:scale(0.8, 1.5);
        -ms-transform:scale(0.8, 1.5);     /* IE 9 */
        -moz-transform:scale(0.8, 1.5);     /* Firefox */
        -webkit-transform:scale(0.8, 1.5); /* Safari 和 Chrome */
        -o-transform:scale(0.8, 1.5);     /* Opera */
    }
    /* transform 傾斜 skew */
    #div4:hover {
        transform:skew(35deg);
        -ms-transform:skew(35deg);     /* IE 9 */
        -moz-transform:skew(35deg);     /* Firefox */
        -webkit-transform:skew(35deg); /* Safari 和 Chrome */
        -o-transform:skew(35deg);     /* Opera */
    }
    /* transform 移動 translate */
    #div5:hover {
        transform:translate(45px, 45px);
        -ms-transform:translate(45px, 45px);     /* IE 9 */
        -moz-transform:translate(45px, 45px);     /* Firefox */
        -webkit-transform:translate(45px, 45px); /* Safari 和 Chrome */
        -o-transform:translate(45px, 45px);     /* Opera */
    }
    /* transform 多個效果 */
    #div6:hover {
        transform:rotate(35deg) scale(0.8, 1.5) skew(35deg) translate(45px, 45px);
        -ms-transform:rotate(35deg) scale(0.8, 1.5) skew(35deg) translate(45px, 45px);     /* IE 9 */
        -moz-transform:rotate(35deg) scale(0.8,rotate(35deg) scale(0.8, 1.5) skew(35deg) translate(45px, 45px)translate(45px, 45px); /* Safari 和 Chrome */
        -o-transform:rotate(35deg) scale(0.8, 1.5) skew(35deg) translate(45px, 45px);     /* Opera */
    }


    transition
    transform rotate
    transform scale
    transform skew     transform translate     transform     transition/transform     /* animation */     .div7 {         width:100px;         height:100px;         background:red;         position:relative;         animation:myfirst 5s infinite;         animation-direction:alternate;         /* Safari and Chrome */         -webkit-animation:myfirst 5s infinite;         -webkit-animation-direction:alternate;     }     @keyframes myfirst{         0%   {background:red; left:0px; top:0px;}         25%  {background:yellow; left:200px; top:0px;}         50%  {background:blue; left:200px; top:200px;}         75%  {background:green; left:0px; top:200px;}         100% {background:red; left:0px; top:0px;}     }     @-webkit-keyframes myfirst {/* Safari and Chrome */         0%   {background:red; left:0px; top:0px;}         25%  {background:yellow; left:200px; top:0px;}         50%  {background:blue; left:200px; top:200px;}         75%  {background:green; left:0px; top:200px;}         100% {background:red; left:0px; top:0px;}     }   @-moz-keyframes myfirst {/* Firefox */      0%   {background:red; left:0px; top:0px;}         25%  {background:yellow; left:200px; top:0px;}         50%  {background:blue; left:200px; top:200px;}         75%  {background:green; left:0px; top:200px;}         100% {background:red; left:0px; top:0px;}   }   @-o-keyframes myfirst {/* Opera */      0%   {background:red; left:0px; top:0px;}         25%  {background:yellow; left:200px; top:0px;}         50%  {background:blue; left:200px; top:200px;}         75%  {background:green; left:0px; top:200px;}         100% {background:red; left:0px; top:0px;}   }   animation  

感謝各位的閱讀!關于“css動畫屬性怎么用”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!


標題名稱:css動畫屬性怎么用
瀏覽路徑:http://weahome.cn/article/pjodjg.html

在線咨詢

微信咨詢

電話咨詢

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部