首页 前端知识 学习CSS3,实现红色心形loading特效

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

2024-05-03 18:05:27 前端知识 前端哥 4 282 我要收藏

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

63748e72dc314943857316f3b1f6a386.gif#pic_center

 

目录

实现思路 

初始化HTML部分 

延迟动画是重点 

设定动画效果 

完整源代码

最后


 

d5d1ee7b9ef7417db4cb1c5ded675986.png

 

实现思路 

  • 每个竖线由一个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;
}

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

2e37356925c94307b827472334fc9da9.png

延迟动画是重点 

由于要做的是一个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);}
}

完整源代码

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

  1. 新建一个txt文档,如 CSS动效.txt 这样的文档
  2. 将 txt 文本后缀改为 html
  3. 使用一个开发工具,例如VSCode,sublime,或者直接txt文本工具打开都行(前端开发最初吸引我的地方就是,无需任何特殊环境,只要在一个文本里就可以书写代码,而且可以直接利用浏览器查看效果,这简直太酷了,其他语言可以吗?当然,汉语也不错,你直接张嘴就说,更不需要环境,哈哈,开个玩笑啦)
  4. 再然后,拿到源代码复制到你的 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>

最后

好啦,代码学习完了,也快要五一节假日啦,给大家提个醒,去哪个景点都注定是东西又贵,又人山人海,所以我一般的选择是周末加请假,这样避开高峰,好出行,能省钱。而五一这样的节假日,当然是应该回家看看许久不见的亲人们啦。

千言万语一句话,工作的时候好好工作,放假了就好好玩好好休息,劳逸结合嘛。

 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/6778.html
标签
css动画
评论
会员中心 联系我 留言建议 回顶部
复制成功!