使用css制作一个龙卷风的动画效果

最新推荐文章于 2025-05-23 08:47:29 发布

王铁柱666

最新推荐文章于 2025-05-23 08:47:29 发布

阅读量172

点赞数 1

文章标签：前端

本文链接：https://blog.csdn.net/2401_87873725/article/details/146168967

版权

要制作一个龙卷风的动画效果，我们可以使用CSS的关键帧动画（@keyframes）和旋转、缩放等变换。以下是一个简单的示例，展示了如何创建一个基本的龙卷风动画：

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="tornado-container">
        <div class="tornado"></div>
    </div>
</body>
</html>

CSS样式 (styles.css)：

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

.tornado-container {
    position: relative;
    width: 200px;
    height: 400px;
    overflow: hidden;
}

.tornado {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, rgba(0,0,0,1) 100%);
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    animation: tornadoAnimation 2s linear infinite;
}

@keyframes tornadoAnimation {
    0% {
        transform: rotate(0deg) scale(1);
        opacity: 0.8;
    }
    50% {
        transform: rotate(180deg) scale(1.2);
        opacity: 0.5;
    }
    100% {
        transform: rotate(360deg) scale(1);
        opacity: 0.8;
    }
}