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