1.主要畫面格動畫
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .div2{ margin: 100px 200px; width: 200px; height: 200px; background: black; position: relative; animation: move 5s infinite; } .div1{ height: 100px; width: 100px; margin: 200px auto; line-height: 100px; } @keyframes move{ /*from{left: 0px;top: 0px;} to{left: 500px;top: 0px;background: white;}*/ 0%{ left: 0px;top: 0px; } 25%{ left: 500px;top: 0px;background: white; } 50%{ left: 500px;top: 500px;background: white; } 75%{ left: 0px;top: 500px;background: white; } 100%{ left: 0px;top: 0px;background: white; } } /*@keyframes:主要畫面格; move:動畫名稱; {}需要改變的樣式; from/0%:開始值; to/100%:結束值;*/ </style> </head> <body> <div class="div1"><img src="img/mp33341098_1443159964766_1_th.jpeg"/></div> <div class="div2"><img src="img/ATWJ$F_Z)MZE%W[[AD37{FU.jpg"/></div> </body></html>
2.animation
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> @keyframes changcolor{ from{ background: dodgerblue; margin-left: 0px; transform: rotateZ(0deg); } to{ background: blueviolet; margin-left: 700px; transform: rotateZ(360deg); } } div{ text-align: center; font-family: "微軟雅黑"; font-size: 30px; height: 100px; width: 300px; /*animation: changcolor 0.5s infinite;*/ /*動畫名稱*/ animation-name: changcolor; /*動畫期間*/ animation-duration: 1s; /*動畫結束後的狀態 指停留原地還是返回到初始位置*/ animation-fill-mode: forwards; /*動畫的延遲時間*/ animation-delay: 0.5s; /*運動的速度曲線*/ animation-timing-function: ease-in; /*動畫是否執行*/ animation-play-state: paused; /*動畫迴圈執行的次數*/ animation-iteration-count: 3; /*動畫是否反向播放*/ animation-direction: alternate; animation: changcolor 1s 0.5s; } div:hover{ animation-play-state: running; } </style> </head> <body> <div>同城交友加V</div> </body></html>
3.動畫中的屬性
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .big{ width: 600px; border: 1px solid dodgerblue; } #div1,#div2,#div3,#div4,#div5{ text-align: center; line-height: 100px; font-family: "微軟雅黑"; width: 100px; height: 100px; background: cornflowerblue; color: white; position: relative; /*infinite持續播放*/ animation: move 5s infinite; } #div1{ animation-timing-function: linear; } #div2{ animation-timing-function: ease; } #div3{ animation-timing-function: ease-in; } #div4{ animation-timing-function: ease-out; } #div5{ animation-timing-function: ease-in-out; } @keyframes move{ from{left: 0;} to{left: 500px;} } </style> </head> <body> <div class="big"> <div id="div1">linear</div> <div id="div2">ease</div> <div id="div3">ease-in</div> <div id="div4">ease-out</div> <div id="div5">ease-in-out</div> </div> </body></html>
4.應用第三方動畫庫
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 200px; height: 100px; background: dodgerblue; } .div1{ margin: 0 100px; animation-delay: 0.5s; animation-iteration-count: 3; animation-direction: alternate; } </style> <link rel="stylesheet" type="text/css" href="css/animate.min.css"/> </head> <body> <div class="animated hinge div1"> </div> </body></html>
5.圓圈載入
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .loader{ margin: 0 auto; width: 30%; height: 200px; border: 1px solid black; } .loader-1{ position: relative; top: 40%; left: 50%; /*border: 1px solid;*/ } .loader-1 i{ display: block; width: 15px; height: 15px; border-radius: 50%; background: dodgerblue; position: absolute; } .loader-1 i:nth-child(1){ top: 25px; left: 0; animation: loading 1s ease 0s infinite; } .loader-1 i:nth-child(2){ top: 17px; left: 17px; animation: loading 1s ease -0.12s infinite; } .loader-1 i:nth-child(3){ top: 0px; left: 25px; animation: loading 1s ease -0.24s infinite; } .loader-1 i:nth-child(4){ top: -17px; left: 17px; animation: loading 1s ease -0.36s infinite; } .loader-1 i:nth-child(5){ top: -25px; left: 0px; animation: loading 1s ease -0.48s infinite; } .loader-1 i:nth-child(6){ top: -17px; left: -17px; animation: loading 1s ease -0.6s infinite; } .loader-1 i:nth-child(7){ top: 0px; left: -25px; animation: loading 1s ease -0.72s infinite; } .loader-1 i:nth-child(8){ top: 17px; left: -17px; animation: loading 1s ease -0.84s infiniteStart building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
