全網最火 - 跳舞的鴨子動態原始碼 - 超簡單
阿新 • • 發佈：2018-12-16
全網最火 - 跳舞的鴨子動態原始碼 - 超簡單
效果圖:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> @keyframes xuanzhuan { 0%{transform: rotateX(-20deg) rotateY(0deg)} 100%{transform: rotateX(-20deg) rotateY(360deg)} } body{ background-color: #313131; } .box{ /*border: 1px solid red;*/ width: 140px; height: 172px; /*margin: 0 auto;*/ margin-left: auto; margin-right: auto; position: relative; transform-style: preserve-3d; transform: rotateX(-20deg); margin-top: 150px; animation: xuanzhuan 10s; animation-iteration-count: infinite; animation-timing-function: linear; } .box:hover{ animation-play-state: paused; } img{ position: absolute;/*left: 0px;*/ /*top: 0px;*/ } </style> </head> <body> <audio src="media/小黃鴨音訊.mp3" autoplay="autoplay" loop="loop"></audio> <div class="box"> <img src="img/001.gif" alt="" style="transform: rotateY(0deg) translateZ(300px)"> <img src="img/002.gif" alt="" style="transform: rotateY(40deg) translateZ(300px)"> <img src="img/003.gif" alt="" style="transform: rotateY(80deg) translateZ(300px)"> <img src="img/004.gif" alt="" style="transform: rotateY(120deg) translateZ(300px)"> <img src="img/005.gif" alt="" style="transform: rotateY(160deg) translateZ(300px)"> <img src="img/006.gif" alt="" style="transform: rotateY(200deg) translateZ(300px)"> <img src="img/007.gif" alt="" style="transform: rotateY(240deg) translateZ(300px)"> <img src="img/008.gif" alt="" style="transform: rotateY(280deg) translateZ(300px)"> <img src="img/009.gif" alt="" style="transform: rotateY(320deg) translateZ(300px)"> </div> </body> </html>
需要圖片和音樂的小夥伴,評論區,寫下郵箱>>