单个div+css实现万圣节小鬼桥头效果代码-html代码-BFW代码库

单个div+css实现万圣节小鬼桥头效果代码

代码语言：html

代码描述：单个div+css实现万圣节小鬼桥头效果代码

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


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

<meta name="viewport" content="width=device-width, initial-scale=1">
  
  
  
<style>
.monster {
  --railing-color1: #eb3647;
  --railing-color2: #ff7884;
  --railing-color3: #e85869;
  --railing-color4: #ff6874;
  
  --railing-color1: #db4657;
  --railing-color2: #ef8894;
  --railing-color3: #d86879;
  --railing-color4: #ef7884;
  
  --pos: 18em;
  --floor1: repeating-linear-gradient(80deg, #0000 0 7em, #ba8867cc  7.1em) 50% 100% / 100vmax 15em,
    repeating-linear-gradient(80deg, #0000 0 10em, #9e764edd 0 10.1em, #fec68e 10.3em) 50% 100% / 100vmax 15em,
    repeating-linear-gradient(80deg, #0000 0 13em, #d49d7b 13.2em) 50% 100% / 100vmax 15em,
    repeating-linear-gradient(80deg, #0000 0 17em, #d49d7bcc 17.2em) 50% 100% / 100vmax 10em,
    repeating-linear-gradient(80deg, #0000 4em, #d49d7b66 0 4.2em, #0000 0 11em) 50% 95% / 100vmax 10em,
    linear-gradient(#0000 85em, #ca9573  0) 50% 100% / 100vmax 100em;
  --floor2: 
    radial-gradient(200% 56% at 45% 130%, #0000 80%, var(--railing-color1) 80.1% 85%, var(--railing-color2) 85.1%, #f06070 85.5%, var(--railing-color4) 88.5%, #0000 88.6%) 50% 100% / 100vmax 100em no-repeat,
    radial-gradient(200% 56% at 45% 130%, #0000 50%, #0002 82%, #0000 0) 50% 100% / 100vmax 100em no-repeat,
    repeating-linear-gradient(80deg, #0000 0 7em, #ba8867cc  7.1em) 50% 100% / 100vmax 15em no-repeat,
    repeating-linear-gradient(80deg, #0000 0 10em, #9e764edd 0 10.1em, #fec68e 10.3em) 50% .........完整代码请登录后点击上方下载按钮下载查看