本文演示了css3大风车不停的旋转和静止的太阳。
淘建站为您提供更多_css3_transform_旋转_rotate，在此特别感谢您对我们的支持与厚爱！
查看演示
演示不了，点击反馈
加入收藏
下载 440 次
打赏作者
觉得不错，可打赏下作者
下载资源
免费共享
特别说明：本站资源来自网友发布分享，仅供学习与参考，请勿用于商业用途，若有侵权请联系删除(272966172@qq.com)。
太阳样式
<div class="sun"></div>.sun {
width:40px;
height:40px;
border-radius:360px;
background:white;
right:40px;
top:-120px;
position:absolute;
animation-name: sunrise;
animation-duration: 1s;
animation-timing-function: ease;
animation-iteration-count: 1;
animation-direction: normal;
animation-delay: .1;
animation-play-state: running;
animation-fill-mode: forwards;
}大风车html代码
<div class="wmd1">
<div class="blades">
<div class="blade2"></div>
<div class="blade1"></div>
<div class="vane1"></div>
<div class="blade3"></div>
<div class="blade4"></div>
<div class="vane2"></div>
</div>
<div class="base">
<div class="bottom_base">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>.wmd1 {
-webkit-transform: scale(.6);
position:absolute;
top:120px;
left:200px;
perspective: 1000px;
}
.base {
}
.blades {
width: 350px;
height: 350px;
left: 10%;
top: 10%;
z-index:2;
border-radius: 50%;
position: absolute;
margin-top: -30px;
margin-left: 50px;
animation: spin 6s linear infinite;
}
.blade1 {
background: white;
position:absolute;
width:41px;
height:139px;
top:-10px;
left:150.5px;
transform:rotate(0deg);
display:inline-block;
background:
linear-gradient(135deg, transparent 20px, white 0), linear-gradient(225deg, transparent 20px, white 0), linear-gradient(315deg, transparent 20px, white 0), linear-gradient(45deg, transparent 20px, white 0);
background-position: top left, top right, bottom right, bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
}
.blade2 {
background:white;
position:absolute;
width:41px;
height:139px;
top:105.5px;
left:41px;
transform:rotate(-90deg);
display:inline-block;
background:
linear-gradient(135deg, transparent 20px, white 0), linear-gradient(225deg, transparent 20px, white 0), linear-gradient(315deg, transparent 20px, white 0), linear-gradient(45deg, transparent 20px, white 0);
background-position: top left, top right, bottom right, bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
}
.blade3 {
background:white;
position:absolute;
width:41px;
height:139px;
top:105.5px;
right:41px;
transform:rotate(-270deg);
display:inline-block;
background:
linear-gradient(135deg, transparent 20px, white 0), linear-gradient(225deg, transparent 20px, white 0), linear-gradient(315deg, transparent 20px, white 0), linear-gradient(45deg, transparent 20px, white 0);
background-position: top left, top right, bottom right, bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
}
.blade4 {
background:white;
position:absolute;
width:41px;
height:139px;
bottom:-10px;
left:150.5px;
transform:rotate(180deg);
display:inline-block;
background:
linear-gradient(135deg, transparent 20px, white 0), linear-gradient(225deg, transparent 20px, white 0), linear-gradient(315deg, transparent 20px, white 0), linear-gradient(45deg, transparent 20px, white 0);
background-position: top left, top right, bottom right, bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
}
.vane1 {
width:1px;
height:350px;
left:175px;
background:white;
position:absolute;
transform:rotate(90deg);
}
.vane2 {
width:1px;
height:350px;
left:171.5px;
background:white;
position:absolute;
transform:rotate(180deg);
}
.base .bottom_base {
position:absolute;
width:90px;
height:100px;
left:162px;
border-right: 16px solid transparent;
border-left: 16px solid transparent;
border-bottom: 380px solid white;
opacity:.8;
z-index:-1;
top:42.5px;
}
ul {
position:absolute;
top:180px;
left:-30px;
}
li {
width:10px;
height:10px;
background:white;
padding:2px;
display:block;
margin: 30px;
box-shadow: inset 0px -2px 0px lightgray;
}
li:nth-child(2) {
position:absolute;
top:-45px;
left:20px;
}
li:nth-child(1) {
position:absolute;
top:35px;
left:50px;
}
li:nth-child(3) {
position:absolute;
top:75px;
left:50px;
}
@keyframes spin {
0% {
transform:rotate(0deg);
}
100% {
transform:rotate(-360deg);
}
}
