CSS3旋转风车效果代码
分类:实例代码
CSS3旋转风车效果代码属于前端实例代码,有关更多实例代码大家可以查看。
分享一段代码实例,它利用css3实现了旋转风车效果。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style type="text/css"> * { margin: 0px; padding: 0px; } body { background-color: black; } div { background-color: black; } .bottom { width: 0px; margin: 0 auto; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 500px solid transparent; border-bottom: 350px solid white; position: relative; z-index: 1; } .circle { width: 16px; height: 16px; border-radius: 100%; z-index: 1; background: white; position: absolute; top: 8px; left: -8px; } .flabellumarea { width: 300px; height: 300px; position: absolute; top: -135px; left: -150px; z-index: 0; background-color: transparent; transform-style: preserve-3d; animation: rotate 9s linear infinite; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes name { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .one { width: 50px; height: 100px; background-size: 10px 10px; position: absolute; left: 148px; background-image: linear-gradient(90deg,white 50%,transparent 50%), linear-gradient(white 50%,transparent 50%); } .one .a { width: 5px; height: 50px; background-color: white; position: absolute; top: 100px; left: 0px; } .two { width: 100px; height: 50px; background-size: 10px 10px; position: absolute; left: 0px; top: 103px; background-image: linear-gradient(90deg,white 50%,transparent 50%), linear-gradient(transparent 50%,white 50%); } .two .a { width: 50px; height: 5px; background-color: white; position: absolute; right: -50px; bottom: 0px; } .three { width: 50px; height: 100px; background-size: 10px 10px; position: absolute; left: 103px; bottom: 0px; background-image: linear-gradient(90deg,transparent 50%,white 50%), linear-gradient(transparent 50%,white 50%); } .three .a { width: 5px; height: 60px; background-color: white; position: absolute; left: 45px; bottom: 100px; } .four { width: 100px; height: 50px; background-size: 10px 10px; position: absolute; right: 0px; top: 148px; background-image: linear-gradient(90deg,transparent 50%,white 50%), linear-gradient(white 50%,transparent 50%); } .four .a { width: 50px; height: 5px; background-color: white; position: absolute; left: -50px; top: 0px; } </style> </head> <body> <div class="bottom"> <div class="circle"></div> <div class="flabellumarea"> <div class="flabellum one"><div class="a"></div></div> <div class="flabellum two"><div class="a"></div></div> <div class="flabellum three"><div class="a"></div></div> <div class="flabellum four"><div class="a"></div></div> </div> </div> </body> </html>
CSS3旋转风车效果代码,这样的场景在实际项目中还是用的比较多的,关于CSS3旋转风车效果代码就介绍到这了。