下一代CSS3之動畫
阿新 • • 發佈:2018-12-19
效果:
程式碼:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>逆水行舟不進則退</title> <style> div{ width: 10px; height: 10px; border-radius: 50%; background-color: red; position: relative; animation: mine 5s; animation-iteration-count: infinite; animation-direction: alternate; } @keyframes mine { 0%{background-color: red;left: 0;top: 0} 100%{background-color: blue;left: 400px;top: 0} } </style> </head> <body> <div></div> <div style="animation-delay: 0.5s"></div> <div style="animation-delay: 1s"></div> <div style="animation-delay: 1.5s"></div> <div style="animation-delay: 2s"></div> <div style="animation-delay: 2.5s"></div> <div style="animation-delay: 3s"></div> <div style="animation-delay: 3.5s"></div> <div style="animation-delay: 4s"></div> <div style="animation-delay: 4.5s"></div> <div style="animation-delay: 5s"></div> <div style="animation-delay: 5.5s"></div> <div style="animation-delay: 6s"></div> <div style="animation-delay: 6.5s"></div> <div style="animation-delay: 7s"></div> <div style="animation-delay: 7.5s"></div> <div style="animation-delay: 8s"></div> <div style="animation-delay: 8.5s"></div> <div style="animation-delay: 9s"></div> <div style="animation-delay: 9.5s"></div> <div style="animation-delay: 10s"></div> <div style="animation-delay: 10.5s"></div> <div style="animation-delay: 11s"></div> <div style="animation-delay: 11.5s"></div> <div style="animation-delay: 12s"></div> <div style="animation-delay: 12.5s"></div> <div style="animation-delay: 13s"></div> <div style="animation-delay: 13.5s"></div> <div style="animation-delay: 14s"></div> <div style="animation-delay: 14.5s"></div> <div style="animation-delay: 15s"></div> <div style="animation-delay: 15.5s"></div> <div style="animation-delay: 16s"></div> <div style="animation-delay: 16.5s"></div> <div style="animation-delay: 17s"></div> <div style="animation-delay: 17.5s"></div> <div style="animation-delay: 18s"></div> <div style="animation-delay: 18.5s"></div> <div style="animation-delay: 19s"></div> <div style="animation-delay: 19.5s"></div> <div style="animation-delay: 20s"></div> <div style="animation-delay: 20.5s"></div> <div style="animation-delay: 21s"></div> <div style="animation-delay: 21.5s"></div> <div style="animation-delay: 22s"></div> <div style="animation-delay: 22.5s"></div> <div style="animation-delay: 23s"></div> <div style="animation-delay: 23.5s"></div> <div style="animation-delay: 24s"></div> <div style="animation-delay: 24.5s"></div> <div style="animation-delay: 25s"></div> <div style="animation-delay: 25.5s"></div> <div style="animation-delay: 26s"></div> <div style="animation-delay: 26.5s"></div> <div style="animation-delay: 27s"></div> <div style="animation-delay: 27.5s"></div> <div style="animation-delay: 28s"></div> <div style="animation-delay: 28.5s"></div> <div style="animation-delay: 29s"></div> <div style="animation-delay: 29.5s"></div> <div style="animation-delay: 30s"></div> <div style="animation-delay: 30.5s"></div> <div style="animation-delay: 31s"></div> <div style="animation-delay: 31.5s"></div> <div style="animation-delay: 32s"></div> <div style="animation-delay: 32.5s"></div> <div style="animation-delay: 33s"></div> <div style="animation-delay: 33.5s"></div> <div style="animation-delay: 34s"></div> <div style="animation-delay: 34.5s"></div> <div style="animation-delay: 35s"></div> <div style="animation-delay: 35.5s"></div> <div style="animation-delay: 36s"></div> </body> </html>