CSS3旋转效果代码实例
分类:实例代码
CSS3旋转效果代码实例属于前端实例代码,有关更多实例代码大家可以查看。
分享一段简单的代码实例,它实现了简单的旋转效果。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style> body { background-color: #000; } td { width: 10px; height: 10px; border-radius: 10px; background-color: #ff0000; position: fixed; left: 50%; top: 50%; } @keyframes td { 0% { background-color: #ff0000; } 20% { background-color: #ff5809; } 40% { background-color: #ffff33; } 60% { background-color: #33ff3e; } 80% { background-color: #33f0ff; } 90% { background-color: #3e1cff; } 100% { background-color: #ff33ff; } } td { animation: td 10s ease-in-out 1s infinite alternate; } .q1 { width: 70px; height: 70px; border-radius: 70px; border: 4px solid #ff5809; margin: -34px -34px; border-bottom-color: transparent; border-top-color: transparent; } .q2 { width: 90px; height: 90px; border-radius: 90px; border: 4px solid #ffff33; margin: -88px -44px; border-bottom-color: transparent; border-top-color: transparent; } .q3 { width: 110px; height: 110px; border-radius: 110px; border: 4px solid #33ff3e; margin: -108px -54px; border-bottom-color: transparent; border-top-color: transparent; } .q4 { width: 130px; height: 130px; border-radius: 130px; border: 4px solid #33f0ff; margin: -128px -64px; border-bottom-color: transparent; border-top-color: transparent; } .q5 { width: 150px; height: 150px; border-radius: 150px; border: 4px solid #3e1cff; margin: -148px -74px; border-bottom-color: transparent; border-top-color: transparent; } .q6 { width: 170px; height: 170px; border-radius: 170px; border: 4px solid #ff33ff; margin: -168px -84px; border-bottom-color: transparent; border-top-color: transparent; } @keyframes q1 { 0% { transform: rotate(0deg); } 20% { transform: rotate(1340deg); } 40% { transform: rotate(1400deg); } 60% { transform: rotate(1460deg); } 80% { transform: rotate(1520deg); } 100% { transform: rotate(2300deg); } } td .q1 { animation: q1 16s ease-in-out 0.1s infinite alternate; } @keyframes q2 { 0% { transform: rotate(0deg); } 20% { transform: rotate(1300deg); } 40% { transform: rotate(1360deg); } 60% { transform: rotate(1420deg); } 80% { transform: rotate(1480deg); } 100% { transform: rotate(2340deg); } } td .q2 { animation: q2 16s ease-in-out 0.1s infinite alternate; } @keyframes q3 { 0% { transform: rotate(0deg); } 20% { transform: rotate(1200deg); } 40% { transform: rotate(1260deg); } 60% { transform: rotate(1320deg); } 80% { transform: rotate(1380deg); } 100% { transform: rotate(2400deg); } } td .q3 { animation: q3 16s ease-in-out 0.1s infinite alternate; } @keyframes q4 { 0% { transform: rotate(0deg); } 20% { transform: rotate(1020deg); } 40% { transform: rotate(1380deg); } 60% { transform: rotate(1340deg); } 80% { transform: rotate(1200deg); } 100% { transform: rotate(2460deg); } } td .q4 { animation: q4 16s ease-in-out 0.1s infinite alternate; } @keyframes q5 { 0% { transform: rotate(0deg); } 20% { transform: rotate(920deg); } 40% { transform: rotate(1380deg); } 60% { transform: rotate(1340deg); } 80% { transform: rotate(1100deg); } 100% { transform: rotate(2540deg); } } td .q5 { animation: q5 16s ease-in-out 0.1s infinite alternate; } @keyframes q6 { 0% { transform: rotate(0deg); } 20% { transform: rotate(860deg); } 40% { transform: rotate(1320deg); } 60% { transform: rotate(1380deg); } 80% { transform: rotate(1040deg); } 100% { transform: rotate(2580deg); } } td .q6 { animation: q6 16s ease-in-out 0.1s infinite alternate; } </style> </head> <body> <table> <tr> <td> <div class="q1"></div> <div class="q2"></div> <div class="q3"></div> <div class="q4"></div> <div class="q5"></div> <div class="q6"></div> </td> </tr> </table> </body> </html>
CSS3旋转效果代码实例,这样的场景在实际项目中还是用的比较多的,关于CSS3旋转效果代码实例就介绍到这了。