<!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>效果图：
纯CSS实现炫酷旋转小风车
原文地址：https://www.cnblogs.com/Best-Chen/p/9739545.html