使用变换属性的旋转和动画属性实现大风车效果

Posted 2020-09-29 魔都叛徒

主体部分:

<div id="car">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
        <div class="four"></div>
</div>

最外面的div是这个大风车的框,里面的四个div是4半圆的样式框架,

通过旋转#car到达大风车旋转的效果

 

样式部分:

<style>
    * {
        margin: 0;
        padding: 0;
    }
    
    .one,
    .two,
    .three,
    .four {
        position: absolute;
        width: 300px;
        height: 100px;
        border: 1px solid gray;
        border-radius: 150px 150px 0 0;
    }
    
    .one {
        left: 100px;
        top: 100px;
        background: red;
        transform: rotate(-90deg);
    }
    
    .two {
        left: 0px;
        top: 300px;
        background-color: green;
        transform: rotate(180deg);
    }
    
    .three {
        left: 200px;
        top: 400px;
        background-color: orange;
        transform: rotate(90deg);
    }
    
    .four {
        left: 300px;
        top: 200px;
        background-color: blue;
        transform: rotate(0deg);
    }
    
    #car {
        margin: 200px;
        width: 600px;
        height: 600px;
        position: relative;
        animation: cart 5s linear 0s infinite normal;
    }
    
    @keyframes cart {
        0% {
            transform: rotate(0deg);
        }
        25% {
            transform: rotate(-90deg);
        }
        50% {
            transform: rotate(-180deg);
        }
        75% {
            transform: rotate(-270deg);
        }
        100% {
            transform: rotate(-360deg);
        }
    }
    </style>