css 自定义属性和雪花飘落效果

最新推荐文章于 2020-12-08 13:46:02 发布

阿豪boy

最新推荐文章于 2020-12-08 13:46:02 发布

阅读量215

点赞数

文章标签： css html css3 js javascript

本文链接：https://blog.csdn.net/qq_35516360/article/details/122064739

版权

原文链接: css 自定义属性和雪花飘落效果

上一篇: css resize属性将div变成可以拖动修改大小配合object-fit实现图片大小适应的效果

下一篇: css 伪类 transform transition实现一个比较好看的下划线过渡效果

最近看到一个雪花的效果, 里面用到了自定义属性, 学习了

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties

自定义变量可以在父节点定义在子节点使用, 所以一般在根节点定义, 然后在所有节点都能使用了

优先级也遵循最近原则, 下面是用js修改css变量, 一开始是蓝色, 后面会变成绿色

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      :root {
        --main-bg-color: deepskyblue;
      }
      .box {
        width: 100px;
        height: 100px;
        background: var(--main-bg-color);
      }
    </style>
  </head>
  <body>
    <div class="box" id="box"></div>
  </body>
  <script>
    setTimeout(() => {
      const box = document.getElementById("box")
      console.log(box.style.getPropertyValue("--main-bg-color"))
      box.style.setProperty("--main-bg-color", "green")
    }, 1000)
  </script>
</html>

主要思想是准备三张图片, 分别作为前景和后景这样就有了六个div, 每两个前景和背景的div合成一组, 每次下落一个div的高度后重置, 这样就有了无限循环的效果

每个div都有自己的动画执行时间和延时, 混合在一起就造成了下雪的错觉 ~

前景的学下的快, 延时小, 后景的下的慢, 延时大

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      @keyframes falling {
        0% {
          transform: translate3D(-7.5%, -100%, 0);
        }
        to {
          transform: translate3D(7.5%, 100%, 0);
        }
      }
      body {
        background: deepskyblue;
      }
      .app__snow {
        overflow: hidden;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        pointer-events: none;
        z-index: 5000;
      }

      .snow__level {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        animation: falling linear infinite both;
        transform: translate3D(0, -100%, 0);
      }

      .snow__level--near {
        animation-duration: var(--s-near);
        background-image: url(./near.png);
        background-size: contain;
      }

      .snow__level--near + .snow__level--alt {
        animation-delay: calc(var(--s-near) / 2);
      }

      .snow__level--mid {
        animation-duration: var(--s-mid);
        background-image: url(./mid.png);
        background-size: contain;
      }

      .snow__level--mid + .snow__level--alt {
        animation-delay: calc(var(--s-mid) / 2);
      }
      :root {
        --s-near: 10s;
        --s-mid: calc(var(--s-near) * 2);
        --s-far: calc(var(--s-near) * 3);
        --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
      }

      .snow__level--far {
        animation-duration: var(--s-far);
        background-image: url(./far.png);
        background-size: contain;
      }

      .snow__level--far + .snow__level--alt {
        animation-delay: calc(var(--s-far) / 2);
      }
    </style>
  </head>
  <body>
    <div class="app__snow snow">
      <div class="snow__level snow__level--near"></div>
      <div class="snow__level snow__level--near snow__level--alt"></div>
      <div class="snow__level snow__level--mid"></div>
      <div class="snow__level snow__level--mid snow__level--alt"></div>
      <div class="snow__level snow__level--far"></div>
      <div class="snow__level snow__level--far snow__level--alt"></div>
    </div>
  </body>
</html>