小方块上升组成背景特效 html+css+js
Posted 北极光之夜。
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了小方块上升组成背景特效 html+css+js相关的知识，希望对你有一定的参考价值。
一.先看效果：
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++) {
// 创建小方块div
container.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>
四.总结：
下次见啦~
我的哔哩哔哩空间
Gitee仓库地址：全部特效源码
Q群聊（欢迎）：629596039
其它文章：
~关注我看更多简单创意特效：
文字烟雾效果 html+css+js
环绕倒影加载特效 html+css
气泡浮动背景特效 html+css
简约时钟特效 html+css+js
赛博朋克风格按钮 html+css
仿网易云官网轮播图 html+css+js
水波加载动画 html+css
导航栏滚动渐变效果 html+css+js
书本翻页 html+css
3D立体相册 html+css
霓虹灯绘画板效果 html+css+js
记一些css属性总结（一）
Sass总结笔记
…等等
进我主页看更多~
以上是关于小方块上升组成背景特效 html+css+js的主要内容，如果未能解决你的问题，请参考以下文章