在css中使用animation配合关键帧实现物体的简单旋转
-
想物体旋转得有物体,所以先弄一个盒子,并给与样式
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <style> .one{ margin: 200px auto; width: 200px; height: 200px; background: #aaa; animation:xuanzhuan 1.2s linear infinite } </style> <body> <div class="one"> </div> </body> </html>
-
使用animation和关键帧,并调用
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <style> .one{ margin: 200px auto; width: 200px; height: 200px; background: #aaa; animation:xuanzhuan 1.2s linear infinite } @keyframes xuanzhuan{ from{transform:rotate(0)} to{transform:rotate(360deg)} } </style> <body> <div class="one"> </div> </body> </html>
-
这样简单的旋转就完成了,当然是动态的