CSS3動(dòng)畫(huà)屬性animation的用法

本文以CSS3的動(dòng)畫(huà)屬性為例，為大家分析動(dòng)畫(huà)屬性animation的使用方法，閱讀完整文相信大家對(duì)CSS3動(dòng)畫(huà)屬性animation的使用方法有了一定的認(rèn)識(shí)。

玉林網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)建站,玉林網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為玉林上千提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)網(wǎng)站制作要多少錢(qián)，請(qǐng)找那個(gè)售后服務(wù)好的玉林做網(wǎng)站的公司定做！

animation動(dòng)畫(huà)

（1）@keyframes 定義關(guān)鍵幀動(dòng)畫(huà)
（2）animation-name 動(dòng)畫(huà)名稱(chēng)
（3）animation-duration 動(dòng)畫(huà)時(shí)間
（4）animation-timing-function 動(dòng)畫(huà)曲線(xiàn)linear（勻速）| ease（緩沖）| step（步數(shù)）
（5）animation-delay 動(dòng)畫(huà)延遲
（6）animation-iteration-count 動(dòng)畫(huà)播放次數(shù)n | infinite
（7）animation-direction 動(dòng)畫(huà)結(jié)束后是否反向還原 normal | alternate
（8）animation-play-state 動(dòng)畫(huà)狀態(tài) paused（停止）| running（運(yùn)動(dòng)）
（9）animation-fill-mode 動(dòng)畫(huà)前后的狀態(tài) none（缺省）| forward(結(jié)束時(shí)停留在最后一幀) | backwards（開(kāi)始時(shí)停留在定義的開(kāi)始幀）| both（前后都應(yīng)用）
（10）animation：name duration timing-function delay iteration-count direction；同時(shí)設(shè)置多個(gè)屬性

例子一：

<head>
<meta charset="utf-8">
<title>animation動(dòng)畫(huà)</title>
<style type="text/css">

@keyframes shrink{
from{

        width: 200px;
    }
    to{
        width: 600px;
    }
}
.box{
    width: 200px;
    height: 30px;
    background-color: yellow;
    animation: shrink 1s ease 0.2s infinite normal;

}
.box:hover{
    animation-play-state: paused;
}
</style>

</head>

<body>

<div class="box">

</div>

</body>

CSS3動(dòng)畫(huà)屬性animation的用法

例子二：loading

<head>
<meta charset="utf-8">
<title>loading</title>
<style type="text/css">

@keyframes loading{
    from{
        transform: scale(1,1);
    }
    to{
        transform: scale(1,0.5);
    }
}
.box{
    width: 300px;
    height: 200px;
    border: 1px solid #000;
}
.box div{
    width: 30px;
    height: 100px;
    background-color: gold;
    margin: 15px;
    float: left;
    border-radius: 15px;
    animation: loading 500ms ease infinite alternate;

}
.box div:nth-child(1){                    /*CSS3新增選擇器*/

    background-color: #3DE94C;

}
.box div:nth-child(2){

    background-color: #3DB0AB;
    animation-delay: 100ms;
}
.box div:nth-child(3){

    background-color: #969EF3;
    animation-delay: 200ms;
}
.box div:nth-child(4){

    background-color: #F488ED;
    animation-delay: 300ms;
}
.box div:nth-child(5){

    background-color: #ED4F52;
    animation-delay: 400ms;
}
</style>

</head>

<body>

<div class="box">
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <p>loading.........</p>
</div>

</body>

CSS3動(dòng)畫(huà)屬性animation的用法

2.CSS3新增選擇器

E:nth-child(n)：匹配元素類(lèi)型為E，且是父元素的第n個(gè)。

3.CSS3圓角、rgba

(1)圓角

設(shè)置某一個(gè)角的圓角，比如設(shè)置左上角的圓角：
border-top-left-radius:30px 60px;

同時(shí)設(shè)置四個(gè)角：
border-radius：20px 10px 30px 50px;

設(shè)置四個(gè)圓角相同：
border-radius：50%;

4.rgba(新的顏色值表示法)

（1）盒子透明表示法：

.box{
width: 300px;
height: 300px;
background-color: #000000;
margin: 50px auto;

/*透明完整寫(xiě)法,整個(gè)盒子透明*/
    opacity: 0.3;
    filter: alpha(opacity=30);
}
.box01{
    width: 300px;
    height: 300px;
    /*第二種寫(xiě)法，僅背景透明*/
    background-color: rgba(0,0,0,0.5);
    margin: 50px auto;

    /*透明完整寫(xiě)法*/
    /*opacity: 0.3;
    filter: alpha(opacity=30);*/
}

上文描述的就是CSS3動(dòng)畫(huà)屬性animation的用法，具體使用情況還需要大家自己動(dòng)手實(shí)驗(yàn)使用過(guò)才能領(lǐng)會(huì)。如果想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！ 

文章名稱(chēng)：CSS3動(dòng)畫(huà)屬性animation的用法
網(wǎng)站網(wǎng)址：http://muchs.cn/article34/gecjse.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、App設(shè)計(jì)、網(wǎng)站建設(shè)、域名注冊(cè)、軟件開(kāi)發(fā)、企業(yè)建站

廣告

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

成都定制網(wǎng)站建設(shè)