css实现海面火山口喷发动画效果代码-html代码-BFW代码库

css实现海面火山口喷发动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现海面火山口喷发动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        :root {
          --timing:5s;
        }
        
        body {
          display:grid;
          justify-content:center;
          min-height:100vh;
          background:linear-gradient(to bottom, dodgerblue, lightblue 500px);
          margin:0;
          overflow:hidden;
        }
        body:after {
          content:'';
          width:100%;
          height:50%;
          background:navy;
          position:absolute;
          left:0;
          top:500px;
          mix-blend-mode:multiply;
          opacity:.8;
          animation:bob 5s linear infinite;
        }
        @keyframes bob {
          50% { top:495px; }
          
        }
        
        #hold_my_rock {
          width:300px;
          height:500px;
          position:relative;
        }
        .volcano {
          width:300px;
          height:200px;
          background:linear-gradient(to top, saddlebrown 50%, peru);
          clip-path:polygon(45% 0%, 55% 0%, 75% 33%, 100% 100%, 0% 100%, 25% 66%);
          position:absolute;
          bottom:0;
          left:0;
        }
        .volcano:after {
          width:200px;
          height:200px;
          position:absolute;
          left:50px;
          background:linear-gradient(to bottom, orangered, gold 175px, transparent);
          content:'';
          clip-path:polygon(45% 0%, 55% 0%, 75% 33%, 85% 75%, 100% 100%, 90% 100%, 80% 75%, 70% 33%, 65% 25%, 60% 33%, 55% 66%, 65% 85%, 65% 100%, 50% 100%, 55% 85%, 50% 50%, 40% 40%, 35% 66%, 20% 100%, 0% 100%, 25% 66%);
        }
        
        .lava {
          width:30px;
          height:200px;
          background:linear-gradient(to bottom, orangered, gold);
          position:absolute;
          bottom:0;
          left:135px;
          clip-path:polygon(0% 0%, 100% 0%, 80% 10%, 90% 100%, 10% 100%, 20% 10%);
          animation:lava var(--timing) linear infinite;
        }
        @keyframes lava {
          0% { z-index:0; }
          10% { bottom:200px; }
          15% { bottom:0; }
        }
        
        .rock {
          width:30px;
          height:15px;
          background:linear-gradient(to right, peru 5px, orangered 5.........完整代码请登录后点击上方下载按钮下载查看