prefixfree大风车转啊转

收藏

本文演示了css3大风车不停的旋转和静止的太阳。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

太阳样式

<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); 
    } 
}