css3使用animation屬性實現(xiàn)炫酷效果(推薦)

animation-name 動畫名稱,可以有多個值,用逗號隔開,表示綁定了多個動畫
animation-name屬性為動畫指定一個名稱
animation-name兼容主流的瀏覽器,不過還是需要加前綴去兼容
animation-name有兩個屬性值,分別是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 動畫持續(xù)時間 默認(rèn)是0
animation-timing-function 動畫時間函數(shù)
animation-delay 動畫延遲時間
animation-delay 屬性定義動畫什么時候開始,單位可以是秒(s)或毫秒(ms),允許負(fù)值,-2s使動畫馬上開始,但會跳過2s進入動畫
animation-iteration-count 動畫循環(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 ,則只會執(zhí)行一次就停止
animation-fill-mode 動畫延遲未執(zhí)行時,或者動畫執(zhí)行完畢后的停留狀態(tài)(動畫不能設(shè)置為循環(huán),否則無法停止)
animation-fill-mode: none | forwards | backwards | both 無 結(jié)束狀態(tài) 開始狀態(tài) 看情況
animation-play-state: running | paused 動畫運行狀態(tài):運行 | 暫停
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>
動畫性能優(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屬性實現(xiàn)炫酷效果,希望對大家有所幫助!
相關(guān)文章
CSS3動畫之利用requestAnimationFrame觸發(fā)重新播放功能
這篇文章主要介紹了利用requestAnimationFrame重新播放(觸發(fā))CSS3動畫,代碼簡單易懂,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-11CSS3 animation – steps 函數(shù)詳解
本文通過實例代碼給大家介紹了CSS3 animation – steps 函數(shù),代碼簡單易懂,非常不錯,具有一定的參考借鑒價值,需要的朋友參考下吧2019-08-30css3+animation屬性制作拆分loading文字加載動畫特效
css3 animation屬性制作loading文字拆分上下滾動加載動畫特效。非常不錯,感興趣的朋友前來下載使用2019-07-03- 這篇文章主要介紹了css中用animation的steps屬性制作幀動畫,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-25
- 本篇介紹的animation屬性和傳統(tǒng)的動畫制作一樣,能控制幀的每一步,制作出更強大的動畫效果。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看2018-12-25
基于css3 animation實現(xiàn)的方塊左右翻轉(zhuǎn)loading頁面加載動畫特效
是一段純CSS3+animation屬性制作的loader方塊來回翻轉(zhuǎn)頁面加載動畫特效代碼,由十二個方塊組成,非常不錯,歡迎有需要的朋友前來下載使用2018-09-19基于CSS3的animation屬性實現(xiàn)微信拍一拍動畫效果
這篇文章主要介紹了基于CSS3的animation屬性實現(xiàn)微信拍一拍動畫效果,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參2020-06-22