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

代码语言：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% 100% / 100vmax 15em no-repeat,
    repeating-linear-gradient(80deg, #0000 0 13em, #d49d7b 13.2em) 50% 100% / 100vmax 15em no-repeat,
    repeating-linear-gradient(80deg, #0000 0 17em, #d49d7bcc 17.2em) 50% 100% / 100vmax 10em no-repeat,
    repeating-linear-gradient(80deg, #0000 4em, #d49d7b66 0 4.2em, #0000 0 11em) 50% 95% / 100vmax 10em no-repeat,
    radial-gradient(200% 56% at 45% 130%, #ca9573 82%, #0000 0) 50% 100% / 100vmax 100em no-repeat;
  --railing1: repeating-linear-gradient(90deg, #0000 0 30em, var(--railing-color1) 0 34em) 0% calc(100% - 17em) / 100% 24em repeat-x,
    repeating-linear-gradient(90deg, #0000 0 13em, var(--railing-color1) 0 17em) 0% calc(100% - 17em) / 100% 12em repeat-x,
    linear-gradient(#0000 56em, var(--railing-color4) 0 57.5em, var(--railing-color1) 0 61em, #0000 0),
    linear-gradient(#0000 68em, var(--railing-color4) 0 69.5em, var(--railing-color1) 0 73em, #0000 0),
    linear-gradient(#0000 80em, var(--railing-color4) 0 81.5em, var(--railing-color1) 0 85em, #0000 0);
  --railing2:
    conic-gradient(at 5% 0.25%, #0000 270deg, #0001 0) 0% calc(100% - 16em) / 34em 25em repeat-x,
    conic-gradient(at 11% 0.25%, #0000 270deg, #edd3 0) 10% calc(100% - 17em) / 34em 25em repeat-x,
    conic-gradient(at 7% 0.25%, #0000 260deg, #9002 270deg) 13% calc(100% - 17em) / 24em 25em repeat-x,
    
    conic-gradient(at 9% 0.25%, #0000 270deg, #0001 0) 5% calc(100% - 5em) / 34em 25em repeat-x,
    conic-gradient(at 11% 0.25%, #0000 270deg, #edd3 0) 9% calc(100% - 6em) / 34em 25em repeat-x,
    conic-gradient(at 7% 0.25%, #0000 260deg, #9001 270deg) 7% calc(100% - 4em) / 24em 25em repeat-x,
    
    radial-gradient(0.5% 50% at 31.5em 50%, #9001 50%, #0000) 0% calc(100% - 16em) / 34em 25em repeat-x,
    radial-gradient(0.35% 50% at 32.5em 50%, #edd1 50%, #0000) 0% calc(100% - 22em) / 34em 20em repeat-x,
    radial-gradient(0.35% 40% at 32.5em 40%, #8002 50%, #0000) 0% calc(100% - 23em) / 34em 20em repeat-x,
    radial-gradient(0.25% 50% at 16.25em 50%, #fff3 40%, #0000) 0% calc(100% - 15em) / 17em 10em repeat-x,
    radial-gradient(0.35% 50% at 16.25em 50%, #9003 50%, #0000) 0% calc(100% - 15em) / 17em 10em repeat-x,
    radial-gradient(0.25% 50% at 14em 50%, #fff1 30%, #0000) 0% calc(100% - 17em) / 34em 12em repeat-x,
    repeating-linear-gradient(90deg, #0000 0 30em, var(--railing-color1) 0 34em) 0% calc(100% - 15em) / 100% 25em repeat-x,
    repeating-linear-gradient(90deg, #0000 0 13em, var(--railing-color1) 0 17em) 0% calc(100% - 15em) / 100% 13em repeat-x,
    radial-gradient(200% 56% at 45% 130%, #0000 80%, var(--railing-color1) 80.1% 85%, var(--railing-color2) 85.1%, var(--railing-color3) 85.5%, var(--railing-color4) 88%, #0000 88.1%) 50% calc(100% - 13em) / 100vmax 100em repeat-x,
    radial-gradient(200% 56% at 45% 130%, #0000 80%, var(--railing-color1) 80.1% 85%, var(--railing-color2) 85.1%, var(--railing-color3) 85.5%, var(--railing-color4) 88%, #0000 88.1%) 50% calc(100% - 25em) / 100vmax 100em repeat-x;
  --clouds: 
    radial-gradient(farthest-side, #fff7 80%, #fff0) 30% 89% / 75% 30% no-repeat,
    radial-gradient(farthest-side, #fff6 80%, #ccc0) 30% 89% / 35% 35% no-repeat,
    radial-gradient(farthest-side, #fff8 80%, #fff0) 140% 77% / 75% 50.........完整代码请登录后点击上方下载按钮下载查看