单个div+css实现火山喷发动画效果代码-html代码-BFW代码库

单个div+css实现火山喷发动画效果代码

代码语言：html

所属分类：动画

代码描述：单个div+css实现火山喷发动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        * {
          margin: 0px;
          padding: 0px;
          box-sizing: border-box;
          transform-style: preserve-3d;
          backface-visibility: hidden;
          outline: 1px solid rgba(255,255,255,0);
          -webkit-tap-highlight-color: rgba(255,255,255,0);
        }
        
        *:before,
        *:after{
         content: '';
         display: block;
         position: absolute;
        }
        
        html, body {
          width: 100vw;
          height: 100vh;
          background: rgba(27,24,32,1);
        }
        
        body{
          width: 600px;
          height: 480px;
          margin: calc(50vh - 240px) auto 0 auto;
          display: flex;
          align-items: center;
          justify-content: center;
          transform-origin: bottom;
          border-radius: 50%;
          animation: shake 1s cubic-bezier(0.600, -0.280, 0.735, 0.045) infinite;
          overflow: hidden;
        }
        
        @keyframes shake{
          0%{
            transform: translateY(-1%);
          opacity: 1;
          }
          50%{
            transform: translateY(0%) scaleY(1.08) scaleX(.98) rotateX(-10deg);
            opacity: .89;
          }
          100%{
            transform: translateY(-1%);
              opacity: 1;
          }
        }
        
        body:before,
        body:after{
          z-index: 2;
          width: 13px;
          height: 34px;
          background: #e79926;
          transform: translateY(-100%);
          border-radius: 50%;
          will-change: border-radius;
          opacity: 0;
        }
        
        body:before{
          animation: flameLeft 1s cubic-bezier(0.600, -0.280, 0.735, 0.045) infinite;
          width: 21px;
          animation-delay: 0s;
          box-shadow: 0px -5px 0px 0 rgba(255,255,255,.13);
        }
        
        body:after{
          animation: flameRight 1s cubic-bezier(0.600, -0.280, 0.735, 0.045) infinite;
          animation-delay: .28s;
          box-shadow: 0px -5px 0px 0 rgba(255,255,255,.13);
        }
        
        @keyframes flameLeft{
          0%{
            transform: translateY(-100%) scaleX(.55) scaleY(.34) rotateZ(13deg);
            opacity: 0;
            border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
          }
          21%{
            opacity: 1;
            border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
          }
          67%,100%{
            transform: translateX(-150%) translateY(-200%) rotateZ(-34deg);
            opacity: 0;
            border-radius: 70% 30% 46% 54% / 30% 29% 71% 70%;
          }
        }
        
        @keyframes flameRight{
          0%{
            transform: translateY(-100%) scaleX(2) scaleY(.34) rotateZ(-13deg);
            opacity: 0;
            border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
          }
      .........完整代码请登录后点击上方下载按钮下载查看