js原生项目之下雪了吗？ js逻辑 css逻辑 html逻辑-阿里云开发者社区

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

2022-06-21 156

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： js原生项目之下雪了吗？ js逻辑 css逻辑 html逻辑

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);

效果图:
在这里插入图片描述