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

简介: 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);

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

相关文章
|
8天前
|
前端开发 JavaScript 开发者
css和js
【4月更文挑战第22天】css和js
19 6
|
1天前
|
缓存 移动开发 JavaScript
WKWebView对网页和js,css,png等资源文件的缓存机制及如何刷新缓存
WKWebView对网页和js,css,png等资源文件的缓存机制及如何刷新缓存
9 1
|
6天前
|
前端开发 JavaScript UED
CSS顶部与JS后写:网页渲染的奥秘
CSS顶部与JS后写:网页渲染的奥秘
|
8天前
|
前端开发 JavaScript 索引
CSS常见用法 以及JS基础语法
CSS常见用法 以及JS基础语法
16 0
|
8天前
|
JavaScript 前端开发
JS中运算符的算术、赋值、+、比较(不同类型之间比较)、逻辑
JS中运算符的算术、赋值、+、比较(不同类型之间比较)、逻辑
10 1
|
8天前
|
JavaScript 前端开发
js和css以及js制作弹窗
js和css以及js制作弹窗
14 1
|
8天前
|
JavaScript 前端开发
JavaScript DOM 文档对象模型(获取、改变html元素)
JavaScript DOM 文档对象模型(获取、改变html元素)
|
8天前
|
前端开发 JavaScript
使用html+css+javaScript 完成计算器
使用html+css+javaScript 完成计算器
|
8天前
|
JavaScript 前端开发 BI
原生html—摆脱ps、excel 在线绘制财务表格加水印(html绘制表格js加水印)
原生html—摆脱ps、excel 在线绘制财务表格加水印(html绘制表格js加水印)
23 1
|
8天前
|
JavaScript 前端开发
在JavaScript中怎样获取或修改HTML元素。
在JavaScript中怎样获取或修改HTML元素。