写一个风扇转动的动画

最新推荐文章于 2025-05-27 16:01:35 发布

原创最新推荐文章于 2025-05-27 16:01:35 发布 · 426 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#前端

要在前端开发中创建一个风扇转动的动画，你可以使用HTML、CSS和JavaScript。下面是一个简单的示例，展示了如何使用CSS动画来模拟风扇的转动效果：

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>风扇转动动画</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="fan">
        <div class="blade"></div>
        <div class="blade" style="transform: rotate(120deg);"></div>
        <div class="blade" style="transform: rotate(240deg);"></div>
    </div>
</body>
</html>

CSS (styles.css)

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f4f4f4;
}

.fan {
    position: relative;
    width: 200px;
    height: 200px;
    border: 2px solid #333;
    border-radius: 50%;
    animation: spin 2s linear infinite;
}

.blade {
    position: absolute;
    width: 50%;
    height: 2px;
    background-color: #333;
    top: 50%;
    left: 50%;
    transform-origin: 100% 50%;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

这个示例中，.fan 类代表风扇的外框，而 .blade 类代表风扇的叶片。通过CSS的 @keyframes 和 animation 属性，我们定义了一个名为 spin 的动画，使风扇持续旋转。每个叶片都使用 transform: rotate() 属性相对于其原始位置进行旋转，以创建风扇的效果。你可以根据需要调整动画的速度、风扇和叶片的大小以及颜色等属性。