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