CSS3实现彩色变形爱心动画【附源码】

news2024/9/9 5:26:56

随着前端技术的发展，CSS3 为我们提供了丰富的动画效果，使得网页设计更加生动和有趣。今天，我们将探讨如何使用 CSS3 实现一个彩色变形爱心加载动画特效。这种动画不仅美观，而且可以应用于各种网页元素，比如加载指示器或者页面装饰。

准备工作

在开始之前，请确保你的浏览器支持 CSS3 动画。现代的浏览器，如 Chrome、Firefox、Safari 和 Edge，都对 CSS3 动画有很好的支持。

HTML 结构

首先，我们需要一个简单的 HTML 结构来承载我们的动画。

<!DOCTYPE html>: 声明文档类型为HTML5。
<html lang="en">: HTML文档的根元素，指定语言为英语。
<head>: 包含了页面的元数据和引用的外部资源。
<meta charset="UTF-8">: 指定字符集为UTF-8，支持各种语言的字符。
<meta name="viewport" content="width=device-width, initial-scale=1.0">: 设置移动设备的视口，确保页面在各种设备上显示正确。
<meta http-equiv="X-UA-Compatible" content="ie=edge">: 设置IE浏览器使用最新的渲染模式。
<title>css3彩色变形爱心加载动画特效</title>: 页面标题。

以下是一个基本的 HTML 代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3 彩色变形爱心加载动画特效</title>
</head>
<body>
    <div id="he">
        <ul>
            <li></li>
            <!-- 重复li元素以创建更多的爱心 -->
        </ul>
    </div>
</body>
</html>

CSS 样式

接下来是 CSS 部分，我们将使用 CSS3 的 @keyframes 规则来定义动画，并使用 animation 属性来应用这些动画。

* {
    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;
}

/* 定义动画 */
@keyframes love1 {
    30%, 50% {
        height: 60px;
        transform: translateY(-30px);
    }
    75%, 100% {
        height: 20px;
        transform: translateY(0);
    }
}

/* 根据需要，可以定义更多的动画，这里以love1为例 */

动画实现

在 CSS 中，我们定义了多个动画，每个动画对应一个爱心的变形过程。通过 animation-delay 属性，我们可以控制每个爱心动画的开始时间，从而实现连续的动画效果。

动画属性说明

animation: 指定动画的名称和持续时间。

animation-delay: 指定动画开始前需要等待的时间。

animation-direction: 指定动画播放后是否反向播放。

transform: 用于实现元素的变形效果，如 translateY 用于垂直移动。

*: 通用选择器，将所有元素的内边距和外边距设置为0，去除列表样式。
#he: 设置ID为"he"的div元素样式。
width: 100%: 宽度占满父元素。
display: flex; justify-content: center; align-items: center;: 使用Flex布局，水平和垂直居中元素。
height: 100vh;: 设置高度为视窗的100%。
background-color: #232e6d;: 设置背景颜色为深蓝色。
ul: 设置ul元素的样式。
height: 200px;: 设置高度为200px。
li: 设置li元素的样式。
float: left;: 左浮动排列。
width: 20px; height: 20px;: 设置宽高为20px。
border-radius: 20px;: 圆角半径为20px，使其呈现圆形。
margin-right: 10px;: 右侧外边距为10px，用于控制元素之间的间距。
li:nth-child(n): 使用伪类选择器，针对每个li元素设置不同的背景颜色和动画。
@keyframes love1 到 love5: 定义了五个不同的关键帧动画，分别命名为love1到love5，用于实现爱心加载动画效果。

解析

在上面的 CSS 样式中，我们首先对整个页面进行了基本的样式重置，确保在不同浏览器中的一致性。然后，我们使用 Flexbox 将 <ul> 元素居中显示在页面中，并设置了背景色为深蓝色。

每个 <li> 元素被赋予不同的背景色，并通过 CSS 动画 @keyframes 定义了每个心形的变换效果。每个动画都是无限循环的，且有不同的延迟时间，以实现一种连贯的加载效果。

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta 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{
	width: 100%; 
	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;
}
       /* 每个列表项的动画效果，通过nth-child进行区分 */

li:nth-child(1){
	background-color: #f62e74;
	animation: love1 4s infinite;
}
li:nth-child(2){
	background-color: #f45330;
	animation: love2 4s infinite;
	animation-delay: 0.15s;
}
li:nth-child(3){
	background-color: #ffc883;
	animation: love3 4s infinite;
	animation-delay: 0.3s;
}
li:nth-child(4){
	background-color: #30d268;
	animation: love4 4s infinite;
	animation-delay: 0.45s;
}
li:nth-child(5){
	background-color: #006cb4;
	animation: love5 4s infinite;
	animation-delay: 0.6s;
}
li:nth-child(6){
	background-color: #784697;
	animation: love4 4s infinite;
	animation-delay: 0.75s;
}
li:nth-child(7){
	background-color: #ffc883;
	animation: love3 4s infinite;
	animation-delay: 0.9s;
}
li:nth-child(8){
	background-color: #f45330;
	animation: love2 4s infinite;
	animation-delay: 1.05s;
}
li:nth-child(9){
	background-color: #f62e74;
	animation: love1 4s infinite;
	animation-delay: 1.2s;
}
@keyframes love1{
  /* 动画的30%和50%时，高度变为60px，向上移动30px */
	30%,50%{height: 60px; transform: translateY(-30px);}
   /* 动画的75%到100%，高度恢复为20px，位置回到原点 */
	75%,100%{height: 20px; transform: translateY(0);}
}

  /* 定义其他动画love2, love3, love4, love5，模式与love1类似，只是高度和移动距离不同 */

@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>