当前位置：首页 > 行业动态 > 正文

如何用HTML和CSS打造自动旋转的图片风车特效？

admin
行业动态
2025-05-05
1

使用HTML结合CSS3动画可实现图片风车效果，通过transform属性的rotate()函数实现叶片旋转，利用@keyframes定义连续旋转动画，用绝对定位控制叶片角度，设置animation-timing-function调节转速曲线，可通过:hover触发交互效果，代码简洁且兼容主流浏览器。

在网页中实现图片风车效果能为页面增添动态趣味性，以下教程将详细说明如何通过纯HTML+CSS技术创建流畅的图片旋转动画,并确保在不同设备上完美呈现。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态图片风车</title>
    <style>
        .windmill-container {
            width: 300px;
            height: 300px;
            margin: 50px auto;
            position: relative;
            animation: rotate 8s linear infinite;
        }  .blade {
        position: absolute;
        width: 40%;
        height: 40%;
        transform-origin: 100% 100%;
    }
    .blade:nth-child(1) { transform: rotate(0deg); }
    .blade:nth-child(2) { transform: rotate(90deg); }
    .blade:nth-child(3) { transform: rotate(180deg); }
    .blade:nth-child(4) { transform: rotate(270deg); }
    @keyframes rotate {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }
    /* 悬停暂停动画 */
    .windmill-container:hover {
        animation-play-state: paused;
    }
    /* 响应式设计 */
    @media (max-width: 768px) {
        .windmill-container {
            width: 200px;
            height: 200px;
        }
    }
&lt;/style&gt;</head>
<body>
<div class="windmill-container">
<img class="blade" src="image1.jpg" alt="风车叶片1">
<img class="blade" src="image2.jpg" alt="风车叶片2">
<img class="blade" src="image3.jpg" alt="风车叶片3">
<img class="blade" src="image4.jpg" alt="风车叶片4">
</div>
</body>
</html>