用CSS3实现了一个小风车的效果，转转转，挺简单。
效果
代码
XML/HTML Code复制内容到剪贴板
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>小风车-转啊转</title><styletype="text/css">html{font-size:10px;}html*{-webkit-box-sizing:border-box;box-sizing:border-box;}.windmill{width:25rem;min-height:30rem;height:auto;margin:3remauto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;}.windmill-head{height:20rem;width:20rem;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-justify-content:space-around;-ms-flex-pack:distribute;justify-content:space-around;-webkit-align-content:space-around;-ms-flex-line-pack:distribute;align-content:space-around;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-animation:rotate-windmill1slinearinfinite;animation:rotate-windmill1slinearinfinite;border-radius:50%;border:0.1remsolid#DBE526;-webkit-transition:border-radius2slinear;transition:border-radius2slinear;}.wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;height:135%;width:50%;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;}.wrapper1{-webkit-transform:rotate(-45deg)translate(5rem);transform:rotate(-45deg)translate(5rem);-webkit-transform-origin:rightcenter;transform-origin:rightcenter;}.wrapper2{-webkit-transform:rotate(45deg)translate(-5rem);transform:rotate(45deg)translate(-5rem);-webkit-transform-origin:leftcenter;transform-origin:leftcenter;}.leaf{height:13rem;width:5rem;border-radius:5rem/5rem5rem20rem20rem;-webkit-box-shadow:0.1rem0.1rem1remrgba(64,56,56,.35)inset,0.2rem0.2rem0.05remrgba(0,0,0,.65);box-shadow:0.1rem0.1rem1remrgba(64,56,56,.35)inset,0.2rem0.2rem0.05remrgba(0,0,0,.65);}.leaf1{border:0.05remsolid#D1A23A;-webkit-transform:rotate(0deg)translate(0);transform:rotate(0deg)translate(0);background-color:rgba(230,0,100,5);background:-webkit-gradient(linear,lefttop,leftbottom,from(#D02CE4),to(#f5f5f5));background:-webkit-linear-gradient(top,#D02CE4,#f5f5f5);background:linear-gradient(180deg,#D02CE4,#f5f5f5);-webkit-transition:background2slinear;transition:background2slinear;}.leaf2{border:0.05remsolid#49D13A;background-color:rgba(230,0,150,5);-webkit-transform:rotate(-180deg)translate(0);transform:rotate(-180deg)translate(0);background:-webkit-gradient(linear,lefttop,leftbottom,from(#B91717),to(#f5f5f5));background:-webkit-linear-gradient(top,#B91717,#f5f5f5);background:linear-gradient(180deg,#B91717,#f5f5f5);-webkit-transition:background2slinear2s;transition:background2slinear2s;}.leaf3{border:0.05remsolid#C6079D;background-color:rgba(130,0,100,5);-webkit-transform:rotate(0deg)translate(0);transform:rotate(0deg)translate(0);background:-webkit-gradient(linear,lefttop,leftbottom,from(#1CBA9F),to(#f5f5f5));background:-webkit-linear-gradient(top,#1CBA9F,#f5f5f5);background:linear-gradient(180deg,#1CBA9F,#f5f5f5);-webkit-transition:background2slinear;transition:background2slinear;-webkit-transition:background2slinear4s;transition:background2slinear4s;}.leaf4{border:0.05remsolid#3A5FD1;background-color:rgba(230,100,100,5);-webkit-transform:rotate(-180deg)translate(0);transform:rotate(-180deg)translate(0);background:-webkit-gradient(linear,lefttop,leftbottom,from(#335642),to(#f5f5f5));background:-webkit-linear-gradient(top,#335642,#f5f5f5);background:linear-gradient(180deg,#335642,#f5f5f5);-webkit-transition:background2slinear6s;transition:background2slinear6s;}.windmill-pillar{-webkit-transform:translateZ(0);transform:translateZ(0);width:3rem;height:20rem;background:#FFF;-webkit-transform:translateY(-52%);transform:translateY(-52%);position:relative;z-index:-2;border-radius:50%50%00;-webkit-animation:cd2slinearinfinite;animation:cd2slinearinfinite;}@-webkit-keyframesrotate-windmill{0%{-webkit-transform:rotate(0);transform:rotate(0);}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}}@keyframesrotate-windmill{0%{-webkit-transform:rotate(0);transform:rotate(0);}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}}@-webkit-keyframescd{0%{background:#F5F5F5;}50%{background:#E1CB82;}75%{background:#F1F358;}100%{background:#FFFC00;}}@keyframescd{0%{background:#F5F5F5;}50%{background:#E1CB82;}75%{background:#F1F358;}100%{background:#FFFC00;}}</style></head><body><divclass="windmill"><divclass="windmill-head"><divclass="wrapperwrapper1"><divclass="leafleaf1"></div><divclass="leafleaf2"></div></div><divclass="wrapperwrapper2"><divclass="leafleaf3"></div><divclass="leafleaf4"></div></div></div><divclass="windmill-pillar"></div></div></body></html>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
