div+css实现可爱卡通蜜蜂展翅动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：div+css实现可爱卡通蜜蜂展翅动画效果代码

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  


  
  
<style>
body {
    width: 100vw; height: 100vh;
    margin: 0;
    background-color: #ffe329;
}

body * {
    position: absolute;
}
body *::before, body *::after {
    position: absolute;
    content: '';
}

.mosquito {
    top: 50%; left: 50%;
    
    --animation: 5s linear infinite;
    animation: mosquitoTranslate var(--animation),
               mosquitoRotate var(--animation);
}
@keyframes mosquitoTranslate {
    /* left */
    0%, 100% { translate: -21vw 4vw; }
    5% { translate: -22vw 5vw; }
    10% { translate: -21vw 4vw; }
    15% { translate: -22vw 3vw; }
    20% { translate: -23vw 4vw; }
    25% { translate: -22vw 3vw; }
    30% { translate: -21vw 4vw; }
    
    /* top center */
    40% { translate: -4vw -12vw; }
    
    /* right */
    50% { translate: 24vw 4vw; }
    55% { translate: 25vw 5vw; }
    60% { translate: 24vw 4vw; }
    65% { translate: 23vw 5vw; }
    70% { translate: 24vw 4vw; }
    75% { translate: 25vw 3vw; }
    80% { translate: 24vw 4vw; }
    
    /* bottom center */
    90% { translate: 9vw 14vw; }
}
@keyframes mosquitoRotate {
    /* left */
    0%, 100% { rotate: 0deg; }
    5% { rotate: -14deg; }
    15% { rotate: 5deg; }
    20% { rotate: -17deg; }
    30% { rotate: 5deg; }
    
    /* top center */
    40% { rotate: -17deg; }
    45% { rotate: 4deg; }

    /* right */
    55% { rotate: -16deg; }
    65% { rotate: 4deg; }
    70% { rotate: -21deg; }
    75% { rotate: 0deg; }
    85% { rotate: -24deg; }

    /* bottom center */
    95% { rotate: 0deg; }
}

/* LEFT LEGS */
.mosquito__leftLeg {
    width: 3vw; height: 15vw;
    box-sizing: border-box;
    border-radius: 0 0 99em;
    border-width: 0 1vw 1vw 0;
    border-style: solid;
    border-color: #0a050d;
    transform-origin: top right;
}
.mosquito__leftLeg::before {
    bottom: -1vw; left: -0.5vw;
    width: 1vw;
    aspect-ratio: 1/1;
    border-radius: 50%;
    background: #0a050d;
}
.mosquito__leftLeg_back {
    top: 3.5vw; left: -7.8vw;
    
    animation: mosquitoBackLeg var(--animation);
}
@keyframes mosquitoBackLeg {
    /* left */
    0%, 100% { rotate: 0deg; }
    5% { rotate: 16deg; }
    15% { rotate: -7deg; }
    20% { rotate: 19deg; }
    30% { rotate: -7deg; }
    
    /* top center */
    40% { rotate: 27deg; }
    45% { rotate: -6deg; }

    /* right */
    55% { rotate: 18deg; }
    65% { rotate: -6deg; }
    70% { rotate: 23deg; }
    75% { rotate: 0deg; }
    85% { rotate: 26deg; }

    /* bottom center */
    90% { rotate: 7deg; }
    95% { rotate: 0deg; }
}
.mosquito__leftLeg_front {
    top: 5vw; left: -5.5vw;

    animation: mosquitoFrontLeg var(--animation);
}
@keyframes mosquitoFrontLeg {
    /* left */
    0%, 100% { rotate: 0deg; }
    5% { rotate: 14deg; }
    15% { rotate: -5deg; }
    20% { rotate: 17deg; }
    30% { rotate: -5deg; }
    
    /* top center */
    40% { rotate: 25deg; }
    45% { rotate: -4deg; }

    /* right */
    55% { rotate: 16deg; }
    65% { rotate: -4deg; }
    70% { rotate: 21deg; }
    75% { rotate: 0deg; }
    85% { rotate: 24deg; }

    /* bottom center */
    90% { rotate: 5deg; }
    95% { rotate: 0deg; }
}

/* RIGHT LEGS */
.mosquito__rightLeg {
    width: 3vw; height: 15vw;
    box-sizing: border-box;
    border-radius: 0 0 0 99em;
    border-width: 0 0 1vw 1vw;
    border-style: solid;
    border-color: #0a050d;
    transform-origin: top left;
}
.mosquito__rightLeg::before {
    bottom: -1vw; right: -0.5vw;
    width: 1vw;
    aspect-ratio: 1/1;
    border-radius: 50%;
    background: #0a050d;
}
.mosquito__rightLeg_back {
    top: 3.5vw; left: 4.5vw;
    
    animation: mosquitoBackLeg var(--animation);
}
.mosquito__rightLeg_front {
    top: 5vw; left: 2.1vw;
    
    animation: mosquitoFrontLeg var(--animation);
}

/* WINGS */
.mosquito__leftWing {
    top: -21vw; left: -17vw;
    width: 18vw; height: 15vw;
    background: conic-gradient(from 299deg at 100% 100%, #ffffe7 20deg, transparent 0) 1vw 1vw no-repeat, radial-gradient(farthest-side, #ffffe7 100%, transparent) 0 0 / 7vw 7vw no-repeat;
    transform-origin: bottom right;

    animation: mosquitoLeftWing 0.2s linear infinite;
}
@keyframes mosquitoLeftWing {
    0% { rotate: 10deg; }
    50% { rotate: -15deg; }
}
.mosquito__rightWing {
    top: -21vw; left: -1vw;
    width: 18vw; height: 15vw;
    background: conic-gradient(from 41deg at 0% 100%, #ffffe7 20deg, transparent 0) -1vw 1vw no-repeat, radial-gradient(farthest-side, #ffffe7 100%, transparent) 11vw 0 / 7vw 7vw no-repeat;
    transform-origin: bottom left;

    animation: mosquitoRightWing 0.2s linear infinite;
}
@keyframes mosquitoRightWing {
    0% { rotate: -15deg; }
    50% { rotate: 10deg; }
}

/* BODY */
.mosquito__body {
    width: 15vw;
    aspect-ratio: 1/1;
    background: #633252;
    translate: -50% -50%;
    clip-path: polygon(100.00% 50.00%,95.91% 52.89%,99.61% 56.27%,95.19% 58.62%,98.43% 62.43%,93.75% 64.21%,96.49% 68.41%,91.62% 69.59%,93.82% 74.09%,88.84% 74.65%,90.45% 79.39%,85.44% 79.32%,86.45% 84.23%,81.49% 83.53%,81.87% 88.53%,77.04% 87.21%,76.79% 92.22%,72.16% 90.31%,71.29% 95.24%,66.93% 92.77%,65.45% 97.55%,61.44% 94.55%,59.37% 99.11%,55.77% 95.64%,53.14% 99.90%,50.00% 96.00%,46.86% 99.90%,44.23% 95.64%,40.63% 99.11%,38.56% 94.55%,34.55% 97.55%,33.07% 92.77%,28.71% 95.24%,27.84% 90.31%,23.21% 92.22%,22.96% 87.21%,18.13% 88.53%,18.51% 83.53%,13.55% 84.23%,14.56% 79.32%,9.55% 79.39%,11.16% 74.65%,6.18% 74.09%,8.38% 69.59%,3.51% 68.41%,6.25% 64.21%,1.57% 62.43%,4.81% 58.62%,0.39% 56.27%,4.09% 52.89%,0.00% 50.00%,4.09% 47.11%,0.39% 43.73%,4.81% 41.38%,1.57% 37.57%,6.25% 35.79%,3.51% 31.59%,8.38% 30..........完整代码请登录后点击上方下载按钮下载查看