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

最新推荐文章于 2025-07-23 16:51:09 发布

转载最新推荐文章于 2025-07-23 16:51:09 发布 · 251 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/caoruichun/p/7210936.html

本文介绍如何使用CSS3的transform和animation属性来创建一个动态旋转的大风车效果。通过设置不同颜色的半圆并应用旋转动画，实现了一个简单而有趣的大风车动画案例。

主体部分:

<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>

转载于:https://www.cnblogs.com/caoruichun/p/7210936.html