<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding:0; } .box{ width: 300px; height: 300px; margin: 100px auto; background: url("img/big.png"); animation: big 0.1s infinite linear; position: relative; } .box1{ width: 166px; height: 166px; margin: 150px auto; background: url("img/sm.png"); animation: sm 0.1s infinite linear; position: absolute; left: 600px; top: 20px; } @keyframes big { 0%{ transform: rotate(0deg); } 100%{ transform: rotate(360deg); } } @keyframes sm { 0%{ transform: rotate(0deg); } 100%{ transform: rotate(-360deg); } } </style> </head> <body> <div class="box"></div> <div class="box1"></div> </body> </html>
html5/Css3 眩晕转圈
最新推荐文章于 2024-08-18 16:45:00 发布