<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>旋转小风车</title> <style type="text/css"> .container{ position: absolute; top:12%; left: 0; right: 0; bottom: 0; margin: auto; } .box_block{ position: relative; width: 300px; height: 300px; margin: 0 auto; animation: Positive_rotation 4s linear infinite; } .box_block:hover{ animation:contrarotation .8s linear infinite;/*linear 动画从头到尾的速度是相同的*/ /*infinite 动画无限次播放*/ } /*反向旋转*/ @keyframes contrarotation{ from{transform: rotate(0deg)} to{transform: rotate(-360deg)} } /*正向旋转*/ @keyframes Positive_rotation{ from{transform: rotate(0deg);} to{transform: rotate(360deg);} } .div1{ width: 0; height: 0; border:75px solid #ffb02d; border-left-color: transparent;/*隐藏*/ border-bottom-color: #3aa37a; float: left; } .div2{ width: 0; height: 0; border: 75px solid #ffcd35; border-top-color: transparent; border-right-color: #ee7a65; float: left; } .div3{ width: 0; height: 0; border:75px solid #a0bd77; border-bottom-color: transparent; border-right-color: #5687e7; float: left; } .div4{ width: 0; height: 0; border:75px solid #5697fe; border-right-color: transparent; border-top-color: #ee7a65; float: left; } .stick{ width: 14px; height: 400px; background: #666666; z-index: -1; left: 0; top:86px; bottom:0; right: 0; margin: auto; position: absolute; } </style> </head> <body> <div class="container"> <div class="box_block"> <div class="div1"></div> <div class="div2"></div> <div class="div3"></div> <div class="div4"></div> <div class="remove_blocks" style="clear: both;"></div> </div> <div class="stick"></div> </div> </body> </html>
效果图：
