css+div实现日落西山地平线动画效果代码-html代码-BFW代码库

css+div实现日落西山地平线动画效果代码

代码语言：html

所属分类：动画

代码描述：css+div实现日落西山地平线动画效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
/* Adjusts to any size window <3 */

:root {
  --c1: skyblue;
  --c2hsl: 292, 72%, 21%;
  --c2: hsl(var(--c2hsl));
  --c5: hsl(258, 59%, 49%);
  --c3: hsl(292, 72%, 41%);
  --c4: hsl(198, 95%, 49%);
  --c6: hsl(213, 96%, 11%);
}

@property --outrun {
  syntax: "<number>";
  initial-value: 0;
  inherits: false;
}

@keyframes outrun {
  to { --outrun: 1; }
}

html {
  height: 100vh;
}
html::after {
  content: "";
  position: fixed;
  inset: 0;
  background: var(--mtn) center 60% / min(75vh, 75vw) no-repeat,
              var(--mtn2) center 60% / min(75vh, 75vw) repeat-x;
  filter: hue-rotate(40deg) brightness(1.75);
}
html::before {
  content: "";
  position: fixed;
  bottom: 0px;
  left: 0px;
  right: 0px;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
  filter: brightness(1.125);
  animation: outrun 0.6s linear infinite;
  --lgDepth: url("data:image/svg+xml;utf8,<svg width=\"1808\" height=\"230\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M904 -46 L-3616 230 M904 -46 L-3254.4 230 M904 -46 L-2892.8 230 M904 -46 L-2531.2000000000003 230 M904 -46 L-2169.6000000000004 230 M904 -46 L-1808 230 M904 -46 L-1446.4 230 M904 -46 L-1084.8000000000002 230 M904 -46 L-723.2 230 M904 -46 L-361.6 230 M904 -46 L0 230 M904 -46 L361.6 230 M904 -46 L723.2 230 M904 -46 L1084.8000000000002 230 M904 -46 L1446.4 230 M904 -46 L1808 230 M904 -46 L2169.6000000000004 230 M904 -46 L2531.2000000000003 230 M904 -46 L2892.8 230 M904 -46 L3254.4 230 M904 -46 L3616 230 M904 -46 L3977.6000000000004 230 M904 -46 L4339.200000000001 230 M904 -46 L4700.8 230 M904 -46 L5062.400000000001 230 M904 -46 L5424 230\" stroke=\"cornflowerblue\" stroke-width=\"2\" vector-effect=\"non-scaling-stroke\" /></svg>") left bottom / 100% 40% no-repeat;
  --outrun: 0;
  --pos: var(--outrun, 0);
  --distance: 0.5%;
  --hor: 60%;
  --l0: var(--hor) + 0 * 0 * var(--distance) + (((0 + 1) * (0 + 1) * var(--distance) - 0 * 0 * var(--distance)) * var(--pos));
  --l1: var(--hor) + 1 * 1 * var(--distance) + (((1 + 1) * (1 + 1) * var(--distance) - 1 * 1 * var(--distance)) * var(--pos));
  --l2: var(--hor) + 2 * 2 * var(--distance) + (((2 + 1) * (2 + 1) * var(--distance) - 2 * 2 * var(--distance)) * var(--pos));
  --l3: var(--hor) + 3 * 3 * var(--distance) + (((3 + 1) * (3 + 1) * var(--distance) - 3 * 3 * var(--distance)) * var(--pos));
  --l4: var(--hor) + 4 * 4 * var(--distance) + (((4 + 1) * (4 + 1) * var(--distance) - 4 * 4 * var(--distance)) * var(--pos));
  --l5: var(--hor) + 5 * 5 * var(--distance) + (((5 + 1) * (5 + 1) * var(--distance) - 5 * 5 * var(--distance)) * var(--pos));
  --l6: var(--hor) + 6 * 6 * var(--distance) + (((6 + 1) * (6 + 1) * var(--distance) - 6 * 6 * var(--distance)) * var(--pos));
  --l7: var(--hor) + 7 * 7 * var(--distance) + (((7 + 1) * (7 + 1) * var(--distance) - 7 * 7 * var(--distance)) * var(--pos));
  --l8: var(--hor) + 8 * 8 * var(--distance) + (((8 + 1) * (8 + 1) * var(--distance) - 8 * 8 * var(--distance)) * var(--pos));
  --l9: var(--hor) + 9 * 9 * var(--distance) + (((9 + 1) * (9 + 1) * var(--distance) - 9 * 9 * var(--distance)) * var(--pos));
  --lgh: linear-gradient(transparent.........完整代码请登录后点击上方下载按钮下载查看