HTML+css实现动画背景效果

悠闲的咸鱼小白

于 2024-10-09 12:10:17 发布

阅读量920

点赞数 31

文章标签： html css 前端

本文链接：https://blog.csdn.net/2301_76942182/article/details/142782995

版权

一、HTML代码介绍

1.文档类型声明与根元素

<!DOCTYPE html>：这是 HTML5 的文档类型声明，告诉浏览器这个文档是一个 HTML5 文档。

<html lang = "en">：HTML 文档的根元素，lang = "en"属性指定文档的语言为英语。这有助于屏幕阅读器等辅助技术正确处理内容，并且在某些搜索引擎优化场景下也有作用。

2.文档头部（`<head>`）

<meta charset = "UTF - 8">：定义文档的字符编码为 UTF - 8。UTF - 8 是一种通用的字符编码，可以表示几乎所有的字符，确保网页在不同的语言和字符集环境下正确显示。

<title>Document</title>：设置网页的标题。这个标题会显示在浏览器的标题栏或者标签页上，同时也是搜索引擎结果页面中显示的标题的重要来源。

<link rel = "stylesheet" type = "text/css" href = "1.css">：用于将一个外部的 CSS 样式表文件（名为1.css）链接到 HTML 文档。这个样式表将用于定义文档中 HTML 元素的样式，如布局、颜色、字体等。

3.文档主体（`<body>`）

<div class = "cont">：这是一个<div>元素，类名为cont。<div>是一个通用的块级容器元素，常用于组织页面内容。类名可以在 CSS 和 JavaScript 中用于选择和操作这个元素。

<div class = "bub">：这是在cont类的<div>内部的另一个<div>元素，类名为bub。同样作为一个容器元素，用于进一步划分和组织内容。

多个<span style = "--i: [value];">：这里有许多<span>元素，每个<span>元素都有一个内联样式，设置了一个自定义的 CSS 变量--i，其值各不相同（如11、12等）。这些自定义变量可以在相关的 CSS 样式中被引用，用于各种计算或样式设置，例如在动画属性（如animation - duration: calc(125s/var(--i));）或者其他与变量相关的样式规则中。这种方式提供了一种灵活的、可动态调整的样式定义机制。

4.HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="1.css">
</head>
<body>
	<div class="cont">
	<div class="bub">
	<span style="--i:11;"></span>
	<span style="--i:12;"></span>
	<span style="--i:24;"></span>
	<span style="--i:10;"></span>
	<span style="--i:14;"></span>
	<span style="--i:23;"></span>
	<span style="--i:18;"></span>
	<span style="--i:16;"></span>
	<span style="--i:19;"></span>
	<span style="--i:20;"></span>
	<span style="--i:22;"></span>
	<span style="--i:25;"></span>
	<span style="--i:18;"></span>
	<span style="--i:21;"></span>
	<span style="--i:15;"></span>
	<span style="--i:13;"></span>
	<span style="--i:26;"></span>
	<span style="--i:17;"></span>
	<span style="--i:13;"></span>
	<span style="--i:28;"></span>
	<span style="--i:11;"></span>
	<span style="--i:12;"></span>
	<span style="--i:24;"></span>
	<span style="--i:10;"></span>
	<span style="--i:14;"></span>
	<span style="--i:23;"></span>
	<span style="--i:18;"></span>
	<span style="--i:16;"></span>
	<span style="--i:19;"></span>
	<span style="--i:20;"></span>
	<span style="--i:22;"></span>
	<span style="--i:25;"></span>
	<span style="--i:18;"></span>
	<span style="--i:21;"></span>
	<span style="--i:15;"></span>
	<span style="--i:13;"></span>
	<span style="--i:26;"></span>
	<span style="--i:17;"></span>
	<span style="--i:13;"></span>
	<span style="--i:28;"></span>
	
	</div>
	</div>
</body>
</html>

二、css代码介绍

1.通用样式设置（`*`选择器）

*是一个通配符选择器，它会匹配文档中的所有元素。

margin: 0;和padding: 0;：将所有元素的外边距和内边距设置为 0。这是一种常见的初始样式设置，用于消除不同浏览器默认样式之间的差异。

box - sizing: border - box;：改变盒模型的计算方式。在border - box模式下，元素的宽度和高度计算包括了内边距和边框，而不是像默认的content - box模式只计算内容部分。

2.`body`元素样式

- min - height: 100vh;：设置body元素的最小高度为视口高度（100vh表示 100% 的视口高度）。这确保了body元素至少会填满整个浏览器视口的高度。
- background: #0c192c;：将body元素的背景颜色设置为#0c192c，这是一种深蓝色。
.cont类样式
- position: relative;：设置元素的定位方式为相对定位。相对定位的元素相对于其正常位置进行定位，其原本占据的空间仍然保留。
- width: 100%;和height: 100vh;：使元素的宽度为父元素的 100%（通常是body元素），高度为视口高度。
- overflow: hidden;：如果元素内部的内容超出了元素的尺寸，超出部分将被隐藏。
.bub类样式
- position: relative;：相对定位。
- display: flex;：将元素设置为弹性布局（Flexbox）。在弹性布局中，子元素可以根据不同的规则进行排列。
.bub span样式
- position: relative;：相对定位。
- width: 30px;和height: 30px;：设置<span>元素的宽度和高度为 30 像素。
- background: #4fc3dc;：设置背景颜色为#4fc3dc，这是一种浅蓝色。
- margin: 0 4px;：设置左右外边距为 4 像素，上下外边距为 0。
- border - radius: 50%;：将元素的边框半径设置为 50%，使其呈现圆形。
- box - shadow: 0 0 0 10px #4fc3dc44, 0 0 50px #4fc3dc, 0 0 100px #4fc3dc;：为元素添加阴影效果。这里有三个阴影层，第一个是一个透明的、半径为 10 像素的圆形阴影（#4fc3dc44是带有透明度的颜色值），后面两个分别是在 50 像素和 100 像素范围内的浅蓝色阴影。
- animation: animate 15s linear infinite;：应用名为animate的动画，动画持续时间为 15 秒，以线性方式（linear）播放，并且无限循环（infinite）。
- animation - duration: calc(10s/var(--i));：重新计算动画的持续时间，使用calc()函数根据自定义变量--i的值来确定。每个<span>元素可能有不同的--i值，从而导致不同的动画持续时间。
.bub span:nth - child(even)样式（偶数子元素样式）
- background: #ff2d75;：将偶数位置的<span>元素的背景颜色设置为#ff2d75，这是一种粉红色。
- box - shadow: 0 0 0 10px #ff2d7544, 0 0 50px #ff2d75, 0 0 100px #ff2d75;：为偶数位置的<span>元素添加粉红色的阴影效果，原理与前面浅蓝色阴影类似。
@keyframes animate动画关键帧定义
- 在0%关键帧：
  - transform: translateY(100vh) scale(0);：元素在动画开始时（0% 进度），将沿 Y 轴向下移动视口高度（100vh），并且缩放比例为 0（不可见）。
- 在100%关键帧：
  - transform: translateY(-10vh) scale(1);：元素在动画结束时（100% 进度），将沿 Y 轴向上移动 10vh 的距离，并且缩放比例为 1（原始大小）。

3.css代码

*
{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body
{
	min-height: 100vh;
	background: #0c192c;
}
.cont
{
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
}
.bub
{
	position: relative;
	display: flex;
}
.bub span
{
	position: relative;
	width: 30px;
	height: 30px;
	background: #4fc3dc;
	margin: 0 4px;
	border-radius: 50%;
	box-shadow: 0 0 0 10px #4fc3dc44,
	0 0 50px #4fc3dc,
	0 0 100px #4fc3dc;
	animation: animate 15s linear infinite;
	 animation - duration: calc(10s/var(--i));
}
.bub span:nth-child(even)
{
	background: #ff2d75;
	box-shadow: 0 0 0 10px #ff2d7544,
	0 0 50px #ff2d75,
	0 0 100px #ff2d75;
	
}
@keyframes animate
{
	0%
	{
		transform: translateY(100vh) scale(0);
	}
	100%
	{
		transform: translateY(-10vh) scale(1);
	}
}