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