css3使用animation屬性實(shí)現(xiàn)炫酷效果(推薦)
我要評論animation-name 動(dòng)畫名稱，可以有多個(gè)值，用逗號隔開，表示綁定了多個(gè)動(dòng)畫
animation-name屬性為動(dòng)畫指定一個(gè)名稱
animation-name兼容主流的瀏覽器，不過還是需要加前綴去兼容
animation-name有兩個(gè)屬性值，分別是keyframename和none
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
margin:0 auto;
background:#abcdef;
}
div{
width:800px;
height:800px;
margin:0 auto;
}
.container{
position: relative;
}
.inner, .middle, .outer, .pic{
position: absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
}
.inner{
background:url(source/circle_inner.jpg) center no-repeat;
animation-name:circle_inner;
}
.middle{
background:url(source/circle_middle.jpg) center no-repeat;
animation-name:circle_middle;
}
.outer{
background:url(source/circle_outer.jpg) center no-repeat;
animation-name:circle_outer;
}
.pic{
background:url(source/pic.jpg) center no-repeat;
}
</style>
</head>
<body>
<div class="container">
<div class="inner"></div>
<div class="middle"></div>
<div class="outer"></div>
<div class="pic"></div>
</div>
</body>
</html>
animation-duration 動(dòng)畫持續(xù)時(shí)間 默認(rèn)是0
animation-timing-function 動(dòng)畫時(shí)間函數(shù)
animation-delay 動(dòng)畫延遲時(shí)間
animation-delay 屬性定義動(dòng)畫什么時(shí)候開始，單位可以是秒（s）或毫秒（ms），允許負(fù)值，-2s使動(dòng)畫馬上開始，但會(huì)跳過2s進(jìn)入動(dòng)畫
animation-iteration-count 動(dòng)畫循環(huán)次數(shù)
animation-iteration-count: number | infinite 默認(rèn)為1
animation-direction: normal | reverse | alternate | alternate-reverse 正常； 反向； 正反交替； 反正交替
alternate 和 alternate-reverse ，如果animation-itreation-count 不是設(shè)置成 infinite ，則只會(huì)執(zhí)行一次就停止
animation-fill-mode 動(dòng)畫延遲未執(zhí)行時(shí)，或者動(dòng)畫執(zhí)行完畢后的停留狀態(tài)（動(dòng)畫不能設(shè)置為循環(huán)，否則無法停止）
animation-fill-mode: none | forwards | backwards | both 無 結(jié)束狀態(tài) 開始狀態(tài) 看情況
animation-play-state: running | paused 動(dòng)畫運(yùn)行狀態(tài)：運(yùn)行 | 暫停
animation 簡寫
animation: name duration timing-function delay iteration-count direction fill-mode play-state
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
margin:0 auto;
background:#abcdef;
}
div{
width:800px;
height:800px;
margin:0 auto;
}
.container{
position: relative;
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
-ms-transform-style:preserve-3d;
-o-transform-style:preserve-3d;
transform-style:preserve-3d;
}
.inner, .middle, .outer, .pic{
position: absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
}
.container:hover div{
-webkit-animation-play-state:paused;
-moz-animation-play-state:paused;
-ms-animation-play-state:paused;
-o-animation-play-state:paused;
animation-play-state:paused;
}
.inner{
background:url(source/circle_inner.jpg) center no-repeat;
/*循環(huán)*/
-webkit-animation:circle_inner 10s ease-in-out 1s infinite alternate running;
-moz-animation:circle_inner 10s ease-in-out 1s infinite alternate running;
-ms-animation:circle_inner 10s ease-in-out 1s infinite alternate running;
-o-animation:circle_inner 10s ease-in-out 1s infinite alternate running;
animation:circle_inner 10s ease-in-out 1s infinite alternate running;
/*不循環(huán)，填充效果*/
/*-webkit-animation:circle_inner 10s ease-in-out 1s forwards running;
-moz-animation:circle_inner 10s ease-in-out 1s forwards running;
-ms-animation:circle_inner 10s ease-in-out 1s forwards running;
-o-animation:circle_inner 10s ease-in-out 1s forwards running;
animation:circle_inner 10s ease-in-out 1s forwards running;*/
}
.middle{
background:url(source/circle_middle.jpg) center no-repeat;
-webkit-animation:circle_middle 10s ease-in-out 1s infinite alternate running;
-moz-animation:circle_middle 10s ease-in-out 1s infinite alternate running;
-ms-animation:circle_middle 10s ease-in-out 1s infinite alternate running;
-o-animation:circle_middle 10s ease-in-out 1s infinite alternate running;
animation:circle_middle 10s ease-in-out 1s infinite alternate running;
}
.outer{
background:url(source/circle_outer.jpg) center no-repeat;
-webkit-animation:circle_outer 10s ease-in-out 1s infinite alternate running;
-moz-animation:circle_outer 10s ease-in-out 1s infinite alternate running;
-ms-animation:circle_outer 10s ease-in-out 1s infinite alternate running;
-o-animation:circle_outer 10s ease-in-out 1s infinite alternate running;
animation:circle_outer 10s ease-in-out 1s infinite alternate running;
}
.pic{
background:url(source/pic.jpg) center no-repeat;
}
@keyframes circle_inner{
0%{ transform:rotateX(0deg); }
50%{ transform:rotateX(90deg); }
100%{ transform:rotateX(360deg); }
}
@keyframes circle_middle{
0%{ transform:rotateY(0deg); }
50%{ transform:rotateY(90deg); }
100%{ transform:rotateY(360deg); }
}
@keyframes circle_outer{
0%{ transform:rotateZ(0deg); }
50%{ transform:rotateZ(90deg); }
100%{ transform:rotateZ(360deg); }
}
</style>
</head>
<body>
<div class="container">
<div class="inner"></div>
<div class="middle"></div>
<div class="outer"></div>
<div class="pic"></div>
</div>
</body>
</html>
動(dòng)畫性能優(yōu)化：
用position-fixed代替background-attachment
帶圖片的元素放在偽元素中
will-change
兼容性IE13+ 感覺可以放棄了……
向下提示箭頭效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
margin:0 auto;
background:#abcdef;
}
div{
width:30px;
height:30px;
position: fixed;
left:0;
right:0;
bottom:100px;
margin:0 auto;
cursor:pointer;
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-ms-transform:rotate(90deg);
-o-transform:rotate(90deg);
transform:rotate(90deg);
-webkit-animation:upDown 2s ease-in-out infinite;
-moz-animation:upDown 2s ease-in-out infinite;
-ms-animation:upDown 2s ease-in-out infinite;
-o-animation:upDown 2s ease-in-out infinite;
animation:upDown 2s ease-in-out infinite;
}
@-webkit-keyframes upDown{
0%{ bottom:100px; }
50%{ bottom:80px; }
100%{ bottom:100px; }
}
@-moz-keyframes upDown{
0%{ bottom:100px; }
50%{ bottom:80px; }
100%{ bottom:100px; }
}
@-ms-keyframes upDown{
0%{ bottom:100px; }
50%{ bottom:80px; }
100%{ bottom:100px; }
}
@-o-keyframes upDown{
0%{ bottom:100px; }
50%{ bottom:80px; }
100%{ bottom:100px; }
}
@keyframes upDown{
0%{ bottom:100px; }
50%{ bottom:80px; }
100%{ bottom:100px; }
}
</style>
</head>
<body>
<div>></div>
</body>
</html>
總結(jié)
以上所述是小編給大家介紹的css3使用animation屬性實(shí)現(xiàn)炫酷效果，希望對大家有所幫助！
相關(guān)文章
CSS3動(dòng)畫之利用requestAnimationFrame觸發(fā)重新播放功能
這篇文章主要介紹了利用requestAnimationFrame重新播放(觸發(fā))CSS3動(dòng)畫,代碼簡單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-09-11
CSS3 animation – steps 函數(shù)詳解
本文通過實(shí)例代碼給大家介紹了CSS3 animation – steps 函數(shù)，代碼簡單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2019-08-30
css3+animation屬性制作拆分loading文字加載動(dòng)畫特效
css3 animation屬性制作loading文字拆分上下滾動(dòng)加載動(dòng)畫特效。非常不錯(cuò)，感興趣的朋友前來下載使用2019-07-03
css3中用animation的steps屬性制作幀動(dòng)畫
這篇文章主要介紹了css中用animation的steps屬性制作幀動(dòng)畫，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-04-25
本篇介紹的animation屬性和傳統(tǒng)的動(dòng)畫制作一樣，能控制幀的每一步，制作出更強(qiáng)大的動(dòng)畫效果。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看2018-12-25
基于css3 animation實(shí)現(xiàn)的方塊左右翻轉(zhuǎn)loading頁面加載動(dòng)畫特效
是一段純CSS3+animation屬性制作的loader方塊來回翻轉(zhuǎn)頁面加載動(dòng)畫特效代碼，由十二個(gè)方塊組成，非常不錯(cuò)，歡迎有需要的朋友前來下載使用2018-09-19基于CSS3的animation屬性實(shí)現(xiàn)微信拍一拍動(dòng)畫效果
這篇文章主要介紹了基于CSS3的animation屬性實(shí)現(xiàn)微信拍一拍動(dòng)畫效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參2020-06-22
