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