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