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

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

代码语言：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__rightLe.........完整代码请登录后点击上方下载按钮下载查看