如何用纯css实现间隔动画

软件技术NINI

于 2024-10-29 08:30:00 发布

阅读量391

点赞数 5

CC 4.0 BY-SA版权

分类专栏：趣味源码文章标签： css 前端

软件技术NINI

本文链接：https://blog.csdn.net/2301_78133614/article/details/143241104

趣味源码专栏收录该内容

11 篇文章

订阅专栏

纯css实现间隔动画

创建一个简单的风车（Pinwheel）效果的HTML页面，你可以结合HTML、CSS和JavaScript来实现。以下是一个基本的示例，展示了如何创建一个旋转的风车效果。

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="pinwheel">  
        <div class="blade"></div>  
        <div class="blade"></div>  
        <div class="blade"></div>  
        <div class="blade"></div>  
    </div>  
    <script src="script.js"></script>  
</body>  
</html>

CSS部分（styles.css）：

body {  
    display: flex;  
    justify-content: center;  
    align-items: center;  
    height: 100vh;  
    margin: 0;  
    background-color: #f0f8ff;  
}  
  
.pinwheel {  
    position: relative;  
    width: 100px;  
    height: 100px;  
    transform-origin: center center;  
    animation: spin 5s linear infinite;  
}  
  
.blade {  
    position: absolute;  
    width: 50px;  
    height: 100px;  
    background: linear-gradient(to bottom, rgba(232, 61, 147, 0.842), rgb(36, 37, 39));  
    transform-origin: 0% 100%;  
    border-radius: 10px 10px 0 0;  
}  
  
.blade:nth-child(1) {  
    transform: rotate(0deg) translateX(50px);  
}  
  
.blade:nth-child(2) {  
    transform: rotate(90deg) translateX(50px);  
}  
  
.blade:nth-child(3) {  
    transform: rotate(180deg) translateX(50px);  
}  
  
.blade:nth-child(4) {  
    transform: rotate(270deg) translateX(50px);  
}  
  
@keyframes spin {  
    from {  
        transform: rotate(0deg);  
    }  
    to {  
        transform: rotate(360deg);  
    }  
}

css复制代码

JavaScript部分（script.js）：

document.addEventListener('DOMContentLoaded', function() {  
    const pinwheel = document.querySelector('.pinwheel');  
  
    // Example: Pause the pinwheel after 3 seconds  
    setTimeout(() => {  
        pinwheel.style.animationPlayState = 'paused';  
    }, 3000);  
  
    // Example: Resume the pinwheel after another 3 seconds  
    setTimeout(() => {  
        pinwheel.style.animationPlayState = 'running';  
    }, 6000);  
});

在这个简单的示例中，我们其实不需要JavaScript，因为CSS动画已经实现了风车的效果。但如果你想要通过JavaScript来控制风车的旋转，比如暂停或改变旋转速度，可以添加以下代码：

javascript复制代码

在这个示例中，我们使用了CSS动画来创建风车旋转的效果，并通过@keyframes定义了旋转动画。每个风车的叶片通过CSS的transform属性来定位和旋转。

你可以根据需要调整CSS中的颜色、尺寸和动画时间等属性，以达到你想要的视觉效果。