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 5px, orangered 25px, peru 25px);
  clip-path:polygon(10% .........完整代码请登录后点击上方下载按钮下载查看