您好,登錄后才能下訂單哦!
本文以CSS3的動(dòng)畫屬性為例,為大家分析動(dòng)畫屬性animation的使用方法,閱讀完整文相信大家對(duì)CSS3動(dòng)畫屬性animation的使用方法有了一定的認(rèn)識(shí)。
animation動(dòng)畫
(1)@keyframes 定義關(guān)鍵幀動(dòng)畫
(2)animation-name 動(dòng)畫名稱
(3)animation-duration 動(dòng)畫時(shí)間
(4)animation-timing-function 動(dòng)畫曲線linear(勻速)| ease(緩沖)| step(步數(shù))
(5)animation-delay 動(dòng)畫延遲
(6)animation-iteration-count 動(dòng)畫播放次數(shù)n | infinite
(7)animation-direction 動(dòng)畫結(jié)束后是否反向還原 normal | alternate
(8)animation-play-state 動(dòng)畫狀態(tài) paused(停止)| running(運(yùn)動(dòng))
(9)animation-fill-mode 動(dòng)畫前后的狀態(tài) none(缺?。﹟ forward(結(jié)束時(shí)停留在最后一幀) | backwards(開始時(shí)停留在定義的開始幀)| 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)畫</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>
例子二: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>
2.CSS3新增選擇器
E:nth-child(n):匹配元素類型為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;
/*透明完整寫法,整個(gè)盒子透明*/
opacity: 0.3;
filter: alpha(opacity=30);
}
.box01{
width: 300px;
height: 300px;
/*第二種寫法,僅背景透明*/
background-color: rgba(0,0,0,0.5);
margin: 50px auto;
/*透明完整寫法*/
/*opacity: 0.3;
filter: alpha(opacity=30);*/
}
上文描述的就是CSS3動(dòng)畫屬性animation的用法,具體使用情況還需要大家自己動(dòng)手實(shí)驗(yàn)使用過才能領(lǐng)會(huì)。如果想了解更多相關(guān)內(nèi)容,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。