CSS3 制作旋转的大风车(充满童年回忆)

2024-07-11 08:49:32

字体：大中小

来源：转载

供稿：网友

发一个很久以前的作品，当开始得知CSS3可以做动画时，就很想玩玩，于是就做了个充满童年回忆的大风车。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>css3 大风车</title><style>*{margin:0; padding:0}.windmill{ padding:10px; width:400px; height:400px;  position:relative;animation-name:moveWindmill;animation-duration:4s;animation-timing-function:linearanimation-delay:0;animation-iteration-count:infinite;animation-play-state:running;/* Firefox: */-moz-animation-name:moveWindmill;-moz-animation-duration:4s;-moz-animation-timing-function:linear;-moz-animation-delay:0;-moz-animation-iteration-count:infinite;-moz-animation-play-state:running;-webkit-animation-name:moveWindmill;-webkit-animation-duration:4s;-webkit-animation-timing-function:linear;-webkit-animation-delay:0;-webkit-animation-iteration-count:infinite;-webkit-animation-play-state:running;-ms-animation-name:moveWindmill;-ms-animation-duration:4s;-ms-animation-timing-function:linear;-ms-animation-delay:0;-ms-animation-iteration-count:infinite;-ms-animation-play-state:running;}.windmill div{ position:absolute; width:100px; height:50px;left:50%; top:50%; border-radius:0 0 50px 50px ; -moz-transform-origin:0% 0%;-webkit-transform-origin:0% 0%;-ms-transform-origin:0% 0%;}.windmill  .red{  background-color:red;  background: -moz-radial-gradient(right, circle,red , #000);                    background: -webkit-radial-gradient(right, circle,red , #000);}.windmill  .yellow{transform:rotate(90deg); -ms-transform:rotate(90deg); -moz-transform:rotate(90deg); -webkit-transform:rotate(90deg);   background-color:yellow; background: -moz-radial-gradient(right, circle,yellow , #000); background: -webkit-radial-gradient(right, circle,yellow , #000); background: -ms-radial-gradient(right, circle,yellow , #000);}.windmill  .blue{transform:rotate(180deg);-ms-transform:rotate(180deg); -moz-transform:rotate(180deg); -webkit-transform:rotate(180deg);  background-color:blue; background: -moz-radial-gradient(right, circle,blue , #000); background: -webkit-radial-gradient(right, circle,blue , #000);  }.windmill  .green{transform:rotate(270deg); -ms-transform:rotate(270deg);-moz-transform:rotate(270deg);-webkit-transform:rotate(270deg);  background-color:green; background:radial-gradient(right, circle,green , #000);background: -moz-radial-gradient(right, circle,green , #000); background: -webkit-radial-gradient(right, circle,green , #000); background: -ms-radial-gradient(right, circle,green , #000);  }.windmill  .dot{ width:50px; height:50px; border-radius:50px ; position:absolute; left:50%;top:50%; margin-left:-25px; margin-top:-25px;background:#fff;  background: -moz-radial-gradient(center, circle,#fff , #666); background: -webkit-radial-gradient(center, circle,#fff , #666);}@keyframes moveWindmill /* Firefox */{ 0% { -ms-transform: rotate(0deg)}  25% { -ms-transform: rotate(90deg)}  50% { -ms-transform: rotate(180deg)}  75% { -ms-transform: rotate(270deg)}     100% { -ms-transform: rotate(360deg)}}@-ms-keyframes moveWindmill /* Firefox */{ 0% { -ms-transform: rotate(0deg)}  25% { -ms-transform: rotate(90deg)}  50% { -ms-transform: rotate(180deg)}  75% { -ms-transform: rotate(270deg)}     100% { -ms-transform: rotate(360deg)}}@-webkit-keyframes moveWindmill /* Firefox */{ 0% { -webkit-transform: rotate(0deg)}  25% { -webkit-transform: rotate(90deg)}  50% { -webkit-transform: rotate(180deg)}  75% { -webkit-transform: rotate(270deg)} 100% { -webkit-transform: rotate(360deg)}}@-moz-keyframes moveWindmill /* Firefox */{ 0% { -moz-transform: rotate(0deg)}  25% { -moz-transform: rotate(90deg)}  50% { -moz-transform: rotate(180deg)}  75% { -moz-transform: rotate(270deg)} 100% { -moz-transform: rotate(360deg)}}</style></head><body><div class="windmill"><div class="red"></div><div class="yellow"></div><div class="blue"></div><div class="green"></div><div class="dot"></div></div></body></html>

提示：您可以先修改部分代码再运行

HTML：

复制代码

上一篇：css3简单练习实现遨游浏览器logo的绘制

下一篇：CSS3 制作绽放的莲花采用效果叠加实现