css+svg实现蜜蜂展翅飞翔动画效果代码-html代码-BFW代码库

css+svg实现蜜蜂展翅飞翔动画效果代码

代码语言：html

所属分类：动画

代码描述：css+svg实现蜜蜂展翅飞翔动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
<style>
    body {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        background: radial-gradient(
                circle,
                rgba(0, 20, 60, 1) 0%,
                rgba(0, 0, 0, 1) 100%
        );
}

svg {
        width: 300px;
}

/*Insect*/
.bodyinsect {
        fill: #f7931e;
}

ellipse {
        fill: #000;
}

.antenna {
        fill: none;
        stroke: #000;
        stroke-width: 10;
        stroke-linecap: round;
        animation: antenna ease-in-out 5s infinite alternate;
}

@keyframes antenna {
        0% {
                transform: translate(0px, 0px);
        }
        100% {
                transform: translate(0px, -20px);
        }
}

.nocturnalinsect {
        transform-origin: center center;
        animation: move ease-in-out 5s infinite alternate;
}

.wing {
        fill: #f7931e;
        stroke: #000000;
        stroke-width: 10;
        opacity: 0.8;
        transform-origin: 50% 50%;
        animation-direction: normal;
        animation: fly 1s infinite;
        animation-timing-function: ease-in-out;
}

@keyframes fly {
        0% {
                transform: translate(0px, 0px) scale(1);
        }

        50% {
                transform: translate(0px, 0px) scaleX(0.5);
        }

        100% {
                transform: translate(0px, 0px) scale(1);
        }
}

@keyframes move {
        0% {
                transform: translate(0px, 0px) rotate(0deg);
        }

        50% {
                transform: translate(-10px, 70px) rotate(10deg);
        }

        100% {
                transform: translate(10px, -70px) rotate(-10deg);
        }
}

/* Background */
.star {
        fill: #fff;
        opacity: 0.3;
}

.meteoroid {
        fill: #fff;
        animation: meteoroid linear 10s infinite;
        animation-direction: normal;
}

@keyframes meteoroid {
        0% {
                transform: translate(0, 0);
                opacity.........完整代码请登录后点击上方下载按钮下载查看