使用CSS3实现一只在飞的蝴蝶-CSDN博客

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

使用CSS3来创建一个在飞的蝴蝶动画是一个有趣且具有挑战性的任务。这通常涉及到使用CSS的关键帧动画（@keyframes）来定义蝴蝶的飞行路径和翅膀的拍动。

以下是一个简单的示例，展示了如何使用CSS3来创建一个基本的飞行蝴蝶动画：

HTML结构：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Flying Butterfly</title>
</head>
<body>
    <div class="butterfly">
        <div class="wing wing-left"></div>
        <div class="wing wing-right"></div>
        <div class="body"></div>
    </div>
</body>
</html>

CSS样式和动画：

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

.butterfly {
    position: relative;
    width: 80px;
    height: 60px;
    animation: fly 3s infinite linear;
}

.wing {
    position: absolute;
    top: 0;
    width: 40px;
    height: 60px;
    background-color: orange;
    border-radius: 30px 100px 30px 60px;
    animation: flap 0.5s infinite alternate;
}

.wing-left {
    left: 0;
    transform-origin: 100% 50%;
}

.wing-right {
    right: 0;
    transform-origin: 0% 50%;
    animation-direction: alternate-reverse;
}

.body {
    position: absolute;
    top: 25px;
    left: 35px;
    width: 10px;
    height: 30px;
    background-color: brown;
}

@keyframes fly {
    0% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
    100% { transform: translateY(0); }
}

@keyframes flap {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(10deg); }
}