js原生项目之下雪了 js逻辑 css逻辑 html逻辑

贵哥的编程之路

发布于 2021-06-08 21:40:25

2K0

发布于 2021-06-08 21:40:25

html逻辑:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.13.1/css/all.css"
      integrity="sha384-xxzQGERXS00kBmZW/6qxqJPyxW3UR0BPsL4c8ILaIWXva5kFi7TxkIIaMiKtqV1Q"
      crossorigin="anonymous"
    />
    <title>❄️ 雪一直下 ❄️</title>
  </head>
  <body>
    <script src="main.js"></script>
  </body>
</html>

css逻辑：

* {
  box-sizing: border-box;
}

body {
  background-color: #323975;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}

.fa-snowflake {
  color: #fff;
  position: absolute;
  top: -20px;
  animation: fall linear forwards;
}

@keyframes fall {
  to {
    transform: translateY(105vh);
  }
}

解释：

第一步：从上边-20px的地方下来.

第二步：到下边105vh的地方去。也就是说整个屏幕的高度*105%就行了. 第三步：动画动画动起来.

动画的意思是线性的永远的执行下去.

js逻辑:

const body = document.body;

function createSnowFlake() {
  const snow_flake = document.createElement('i');
  snow_flake.classList.add('fas');
  snow_flake.classList.add('fa-snowflake');
  // 创建产生的位置
  snow_flake.style.left = Math.random() * window.innerWidth + 'px';
  // 雪花大小
  snow_flake.style.fontSize = Math.random() * 20 + 10 + 'px';
  // 雪花透明度
  snow_flake.style.opacity = Math.random();
  // 动画时间
  snow_flake.style.animationDuration = Math.random() * 3 + 4 + 's';

  document.body.appendChild(snow_flake);

  setTimeout(() => {
    snow_flake.remove();
  }, 6000);
}

setInterval(createSnowFlake, 100);

第一步：获取到整个body

第二步：把两个类名都放到i标签上。

第三步：什么时候开始？

第四步：什么时候结束？

雪花的核心代码: 1.ath.random()产生0-1之间的小数值 2.加10是因为雪花太小了看不见.

 const snow_flake = document.createElement('i');
  snow_flake.classList.add('fas');
  snow_flake.classList.add('fa-snowflake');
  // 创建产生的位置
  snow_flake.style.left = Math.random() * window.innerWidth + 'px';
  // 雪花大小
  snow_flake.style.fontSize = Math.random() * 20 + 10 + 'px';
  // 雪花透明度
  snow_flake.style.opacity = Math.random();
  // 动画时间
  snow_flake.style.animationDuration = Math.random() * 3 + 4 + 's';

  document.body.appendChild(snow_flake);

效果图: