CSS3写一个风车

it2024-07-10  8

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> @keyframes animate1 { from { transform: rotate(-360deg); } } #div0{ width: 200px; height: 500px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } #container { width: 200px; height: 200px; animation: animate1 2s infinite linear; } #container:hover { /*animation-play-state:paused;*/ animation: animate1 .1s infinite linear; } #container div { width: 0; height: 0; float: left; } #div1 { border: 50px solid lightblue; border-color: #FFB02D #FFB02D #3AA37A transparent; } #div2 { border: 50px solid lightcoral; border-color: transparent #A0BD77 #A0BD77 #5687E7; } #div3 { border: 50px solid lightgreen; border-color: #5697FE #C1533F transparent #5697FE; } #div4 { border: 50px solid lightseagreen; border-color: #EE7A65 transparent #FFCD35 #FFCD35; } #stick{ width: 10px; height: 250px; background: #666666; margin-top: -50px; margin-left: 95px; } </style> </head> <body> <div id="div0"> <div id="container"> <div id="div1"></div> <div id="div2"></div> <div id="div3"></div> <div id="div4"></div> </div> <div id="stick"></div> </div> </body> </html>

  效果图:

 

转载于:https://www.cnblogs.com/combat/p/9539708.html

相关资源:数据结构—成绩单生成器
最新回复(0)