100字范文 > 小方块上升组成背景特效 html+css+js

小方块上升组成背景特效 html+css+js

时间：2022-08-23 07:00:53

一.先看效果：

1024程序员节发篇文章拿个个徽章，嘿嘿 (^▽ ^) 。

二.详细实现（后面有完整代码）：

1.先定义html标签，.container就是底层大盒子，.item就是一个小方块，后面将通过js快速生成：

<div class="container"><div class="item"></div></div>

2.定义全局css样式，.container的css样式：

* {margin: 0;padding: 0;box-sizing: border-box;}.container {position: fixed;width: 100vw;height: 100vh;background-color: rgb(32, 32, 32);display: flex;flex-wrap: wrap;}

vw (viewport width) vh (viewport height) 是视窗的大小，100vw = 100%视窗宽度 100vh = 100%视窗高度；

position：fixed；固定定位；

display: flex; flex布局；

flex-wrap: wrap; 换行；

3.每个小方块.item的css样式，并设置animation动画效果：

.item {width: 5vw;height: 5vh;background-color: white;animation: move 1.5s ease-in-out forwards;opacity: 0;overflow: hidden;}@keyframes move {0% {opacity: 0;transform: scale(0) translateY(1000px);border-radius: 50%;}100% {opacity: 1;transform: scale(1) translateY(0);background-image: url("img/52.jpg");background-attachment: fixed;background-size: cover;border-radius: 0;}}

animation: move 1.5s ease-in-out forwards; 其中的forwards表示保持动画结束的状态效果；

opacity：0；透明度为0；

transform: scale(0) translateY(1000px); scale为缩放，translateY为Y轴方向偏移；

background-attachment：fixed；当页面的其余部分滚动时，背景图像不会移动；

background-size: cover; 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。

4.js快速生成多个小方块：

因为每个小方块大小是5×5，而.container大小为100×100，所以需要400个小方块，标签已有一个，还需399个。

// 获取元素var container = document.querySelector(".container");var items = document.getElementsByClassName("item");for (let i = 1; i < 400; i++) {// 创建小方块divcontainer.innerHTML += "<div class='item'></div>";//设置css样式设置动画延迟 items[i].style.cssText = `animation-delay: ${i * 0.05}s;`;}

注意不能用itemsquerySelectorAll获取全部小方块，因为得到的是一个静态列表，它不会对dom结构进行动态查询，不会再次重新获取。getElementsByClassName是动态查询的过程，会随着dom结构的变化，得到的结点列表也会发生变化。

也可以通过以下方法创建小方块：

var a = document.createElement("div");a.classList.add("item");container.appendChild(a);

三.完整代码：

<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}.container {position: fixed;width: 100vw;height: 100vh;background-color: rgb(32, 32, 32);display: flex;flex-wrap: wrap;}.item {width: 5vw;height: 5vh;background-color: white;animation: move 1.5s ease-in-out forwards;opacity: 0;overflow: hidden;}.container div:nth-of-type(3n) {animation: move 1s ease-in-out forwards;}.container div:nth-of-type(3n + 2) {animation: move 2s ease-in-out forwards;}@keyframes move {0% {opacity: 0;transform: scale(0) translateY(1000px);border-radius: 50%;}100% {opacity: 1;transform: scale(1) translateY(0);background-image: url("img/52.jpg");/* background-position: center; */background-attachment: fixed;background-size: cover;border-radius: 0;}}</style></head><body><div class="container"><div class="item"></div></div><script>var container = document.querySelector(".container");var items = document.getElementsByClassName("item");for (let i = 1; i < 400; i++) {container.innerHTML += "<div class='item'></div>";items[i].style.cssText = `animation-delay: ${i * 0.05}s;`;}</script></body></html>