欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

如何在CSS3中使用Transition動(dòng)畫屬性

這篇文章給大家介紹如何在CSS3中使用Transition動(dòng)畫屬性，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

專注于為中小企業(yè)提供網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)特克斯免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了上千家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

transition屬性的值包括以下四個(gè)：

 •transition-property： 指定對(duì)HTML元素的哪個(gè)css屬性進(jìn)行過(guò)渡漸變處理，這個(gè)屬性可以是color、width、height等各種標(biāo)準(zhǔn)的css屬性。
 •transition-duration：指定屬性過(guò)渡的持續(xù)時(shí)間
 •transition-timing-function：指定漸變的速度：
1、ease：（逐漸變慢）默認(rèn)值，ease函數(shù)等同于貝塞爾曲線(0.25, 0.1, 0.25, 1.0)；
2、linear：（勻速），linear 函數(shù)等同于貝塞爾曲線(0.0, 0.0, 1.0, 1.0)；
3、ease-in：(加速)，ease-in 函數(shù)等同于貝塞爾曲線(0.42, 0, 1.0, 1.0)；
4、ease-out：（減速），ease-out 函數(shù)等同于貝塞爾曲線(0, 0, 0.58, 1.0)；
5、ease-in-out：（加速然后減速），ease-in-out 函數(shù)等同于貝塞爾曲線(0.42, 0, 0.58, 1.0)；
6、cubic-bezier：（該值允許你去自定義一個(gè)時(shí)間曲線）， 特定的cubic-bezier曲線。 (x1, y1, x2, y2)四個(gè)值特定于曲線上點(diǎn)P1和點(diǎn)P2。所有值需在[0, 1]區(qū)域內(nèi)，否則無(wú)效。
 •transition-delay：指定延遲時(shí)間，也就是經(jīng)過(guò)多長(zhǎng)時(shí)間才開始執(zhí)行過(guò)渡過(guò)程。
 
瀏覽器兼容性

Internet Explorer 9 以及更早的版本，不支持 transition 屬性。

Internet Explorer 10, Firefox, Opera 和 Chrome支持transition 屬性。Chrome 25 以及更早的版本以及Safari 需要前綴 -webkit-。

下面還是以實(shí)例來(lái)說(shuō)明transition的用法

XML/HTML Code復(fù)制內(nèi)容到剪貼板

  2. <!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>transition演示1</title>  
    <style type="text/css">  
        .animated_div {   
            margin: 100px auto;   
            width:100px;   
            height:60px;   
            background:#92B901;   
            /*簡(jiǎn)寫屬性*/   
            -webkit-transition:-webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s; /* Safari */   
            /*每個(gè)屬性分開寫*/   
            transition-property:width,height,transform,background,opacity;   
            transition-duration:1s,1s,1s,1s,1s,1s;   
            -webkit-border-radius:5px;   
            border-radius:5px;   
            opacity:0.4;   
        }   
        .animated_div:hover {   
            -moz-transform: rotate(360deg);   
            -webkit-transform: rotate(360deg);   
            -o-transform: rotate(360deg);   
            transform: rotate(360deg);   
            opacity:1;   
            background:#1ec7e6;   
            width:200px;   
            height:120px;   
        }   
    </style>  
</head>  
<body>  
<div class="animated_div"></div>  
</body>  
</html>

上述代碼當(dāng)鼠標(biāo)移到div上時(shí)，CSS屬性：width,height,transform,background,opacity都發(fā)生漸變過(guò)渡效果。最終css樣式變成.animated_div里定義的樣式，過(guò)渡過(guò)程大致如下：

如何在CSS3中使用Transition動(dòng)畫屬性

再給一個(gè)網(wǎng)上的嫦娥奔月的示例，要求：當(dāng)鼠標(biāo)移到圖片上時(shí)，嫦娥出現(xiàn)，移開時(shí)嫦娥消失

XML/HTML Code復(fù)制內(nèi)容到剪貼板

  2. <!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <title>transition演示2</title>  
    <style type="text/css">  
        body{   
          color: #fff;   
          background:#000;   
        }   
        .change{   
          display:block;   
          width:400px;   
          height:400px;   
          background:url(http://p3.qhimg.com/t0134c65e59012a1257.png) no-repeat center;   
          background-size:cover;   
          border:1em solid rgba(255,255,255,.8);   
          margin:50px auto;   
        }   
        .change img{   
          display:block;   
          width:300px;   
          height:284px;   
          opacity:0;   
          -webkit-transform:translate(-100px,-100px);   
          transform:translate(-100px,-100px);   
          -webkit-transition:opacity 1s ease-in-out 0.5s,-webkit-transform 1s ease-in-out;   
          transition: opacity 1s ease-in-out 0.5s,transform 1s ease-in-out;   
        }   
        .change:hover img{   
          -webkit-transform:translate(0px,0px);   
          transform:translate(0px,0px);   
          opacity:1;   
        }   
    </style>  
</head>  
<body>  
    <a href="http://image.haosou.com/i?q=%E5%AB%A6%E5%A8%A5png&src=tab_www" class="change " target="_blank">  
        <img src="http://p4.qhimg.com/t0160e6a92121691e22.png" alt="" />  
    </a>  
</body>  
</html>

為了使嫦娥有飄入飄出的效果，設(shè)置了transform屬性，配合opacity屬性，加入過(guò)渡效果就能達(dá)到效果：

如何在CSS3中使用Transition動(dòng)畫屬性

關(guān)于如何在CSS3中使用Transition動(dòng)畫屬性就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

文章題目：如何在CSS3中使用Transition動(dòng)畫屬性
網(wǎng)站鏈接：http://chinadenli.net/article32/goipsc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營(yíng)銷、微信小程序、網(wǎng)站設(shè)計(jì)、品牌網(wǎng)站制作、網(wǎng)站建設(shè)、營(yíng)銷型網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

網(wǎng)站托管運(yùn)營(yíng)