学习CSS3，实现红色心形loading特效

经海路大白狗

已于 2024-05-03 16:42:35 修改

阅读量1.5k

点赞数 48

分类专栏： CSS3动画特效文章标签：学习 css3 动画前端

于 2024-04-30 10:30:52 首次发布

本文链接：https://blog.csdn.net/xingyu_qie/article/details/138336279

版权

CSS3动画特效专栏收录该内容

25 篇文章 17 订阅

订阅专栏

试想一下，如果你的网站在加载过程中，loading图由一个老旧的菊花转动图片，变为一个红色的心形loading特效，那该有多炫酷啊。

63748e72dc314943857316f3b1f6a386.gif#pic_center

实现思路

每个竖线由一个li标签来实现，当然，我们需要设定他的起始高度，并且设定色值，设定圆角；
由于是loading图，需要在整体页面的垂直和水平居中，这涉及到CSS3的flex布局学习；
动画特效，就需要使用到animation动画了，需要与@keyframes配合使用；
最重要的是这个loading过程，需要设置一定的动画延迟，而不是使用javascript的setTimeout来实现。

可以说，CSS3的成熟，在很多程度上节约了JS的使用，节省了图片的网络请求与加载，这也是网站性能优化的很大体现。

初始化HTML部分

loading图的初始化，需要准备9个 li 标签，而 li 标签的父元素需要相对于整个页面垂直水平居中，而几乎所有的loading图也都是相对于整体网站居中对齐的，这里需要保持一致。

这一小部分，需要学习到的CSS3知识点有，flex布局、justify-content水平居中、align-items垂直居中、border-radius圆角设置等。代码如下：

<!-- HTML5部分 -->
<div id="he">
	<ul>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</div>

// CSS3部分
*{
	padding: 0;
	margin: 0;
	list-style: none;
}
#he{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	background-color: #232e6d;
}
ul{
	height: 200px;
}
li{
	float: left;
	width: 20px;
	height: 20px;
	border-radius: 20px;
	margin-right: 10px;
	background-color: red;
}

初始化代码后，你可以看到的效果是这样子的，效果如图：

延迟动画是重点

由于要做的是一个CSS3的loading图，所以就需要从左到右的依次动效，而不是突然就变成一个心形了，这样起不到用户等待的效果。

而依次动效，平时一般使用setTimeout，然后获取每个DOM元素，再依次改变起CSS样式，或者直接修改style行内样式，但CSS3的成熟，大大减小了这方面的性能支出。CSS3设定代码如下：

li:nth-child(1){
	animation: love1 4s infinite;
}
li:nth-child(2){
	animation: love2 4s infinite;
	animation-delay: 0.15s;
}
li:nth-child(3){
	animation: love3 4s infinite;
	animation-delay: 0.3s;
}
li:nth-child(4){
	animation: love4 4s infinite;
	animation-delay: 0.45s;
}
li:nth-child(5){
	animation: love5 4s infinite;
	animation-delay: 0.6s;
}
li:nth-child(6){
	animation: love4 4s infinite;
	animation-delay: 0.75s;
}
li:nth-child(7){
	animation: love3 4s infinite;
	animation-delay: 0.9s;
}
li:nth-child(8){
	animation: love2 4s infinite;
	animation-delay: 1.05s;
}
li:nth-child(9){
	animation: love1 4s infinite;
	animation-delay: 1.2s;
}

设定动画效果

然后就可以设定动画效果了，虽然看上去是9个 li 元素，但仔细观察，其实左右对称，也就是写5份动画@keyframes就可以了，因为第一个和最后一个的动效过程是一样的，依次往下看，只有中间部分，心形的尖头部分特立独行，单独为他准备一份CSS设定即可。

但需要注意的是：这个依次的动效过程，就需要设定好每份样式的起始高度和结束高度，再然后这里面有一个translateY的高度延伸

CSS3代码设定如下：

@keyframes love1{
	30%,50%{height: 60px; transform: translateY(-30px);}
	75%,100%{height: 20px; transform: translateY(0);}
}
@keyframes love2{
	30%,50%{height: 125px; transform: translateY(-62.5px);}
	75%,100%{height: 20px; transform: translateY(0);}
}
@keyframes love3{
	30%,50%{height: 160px; transform: translateY(-75px);}
	75%,100%{height: 20px; transform: translateY(0);}
}
@keyframes love4{
	30%,50%{height: 180px; transform: translateY(-60px);}
	75%,100%{height: 20px; transform: translateY(0);}
}
@keyframes love5{
	30%,50%{height: 190px; transform: translateY(-45px);}
	75%,100%{height: 20px; transform: translateY(0);}
}

完整源代码

前面说了这么多，怕你看的不够仔细，所以我这里放一下完整的源代码，你可以通过以下步骤自己拿到源代码

新建一个txt文档，如 CSS动效.txt 这样的文档
将 txt 文本后缀改为 html
使用一个开发工具，例如VSCode，sublime，或者直接txt文本工具打开都行（前端开发最初吸引我的地方就是，无需任何特殊环境，只要在一个文本里就可以书写代码，而且可以直接利用浏览器查看效果，这简直太酷了，其他语言可以吗？当然，汉语也不错，你直接张嘴就说，更不需要环境，哈哈，开个玩笑啦）
再然后，拿到源代码，复制到你的 html 文本里，保存，再用浏览器打开就可以啦，就是如此简单，那句名人名言是啥来着？对了So easy!

完整源代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>CSS3爱心形状加载动画特效</title>

<style>
*{
	padding: 0;
	margin: 0;
	list-style: none;
}
#he{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	background-color: #232e6d;
}
ul{
	height: 200px;
}
li{
	float: left;
	width: 20px;
	height: 20px;
	border-radius: 20px;
	margin-right: 10px;
	background-color: red;
}
li:nth-child(1){
	animation: love1 4s infinite;
}
li:nth-child(2){
	animation: love2 4s infinite;
	animation-delay: 0.15s;
}
li:nth-child(3){
	animation: love3 4s infinite;
	animation-delay: 0.3s;
}
li:nth-child(4){
	animation: love4 4s infinite;
	animation-delay: 0.45s;
}
li:nth-child(5){
	animation: love5 4s infinite;
	animation-delay: 0.6s;
}
li:nth-child(6){
	animation: love4 4s infinite;
	animation-delay: 0.75s;
}
li:nth-child(7){
	animation: love3 4s infinite;
	animation-delay: 0.9s;
}
li:nth-child(8){
	animation: love2 4s infinite;
	animation-delay: 1.05s;
}
li:nth-child(9){
	animation: love1 4s infinite;
	animation-delay: 1.2s;
}
@keyframes love1{
	30%,50%{height: 60px; transform: translateY(-30px);}
	75%,100%{height: 20px; transform: translateY(0);}
}
@keyframes love2{
	30%,50%{height: 125px; transform: translateY(-62.5px);}
	75%,100%{height: 20px; transform: translateY(0);}
}
@keyframes love3{
	30%,50%{height: 160px; transform: translateY(-75px);}
	75%,100%{height: 20px; transform: translateY(0);}
}
@keyframes love4{
	30%,50%{height: 180px; transform: translateY(-60px);}
	75%,100%{height: 20px; transform: translateY(0);}
}
@keyframes love5{
	30%,50%{height: 190px; transform: translateY(-45px);}
	75%,100%{height: 20px; transform: translateY(0);}
}
</style>

</head>
<body>

<div id="he">
	<ul>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</div>

</body>
</html>