用CSS从正方形制作彩虹心动画，核心思路是先通过两个正方形的旋转和定位拼接出心形的基础轮廓，再结合渐变背景和关键帧动画实现彩虹色的动态效果，整个过程不需要引入任何外部图片资源。
实现原理拆解
心形的基础结构可以由两个旋转了45度的正方形组合而成，两个正方形的顶部边缘对接，就能形成心形的上半部分两个圆弧和下半部分的尖角。彩虹效果则可以通过线性渐变背景配合动画改变背景位置来实现，让颜色呈现出流动的效果。
基础HTML结构
只需要一个容器元素和两个子元素来作为两个正方形即可：
<div class="heart-container"> <div class="heart-square left"></div> <div class="heart-square right"></div> </div>
CSS样式编写
首先设置容器和正方形的基础样式，这里先给正方形添加渐变背景，为后续的彩虹效果做准备：
/* 容器样式，用于居中显示 */
.heart-container {
position: relative;
width: 200px;
height: 180px;
margin: 50px auto;
}
/* 正方形基础样式 */
.heart-square {
position: absolute;
width: 100px;
height: 100px;
/* 彩虹渐变背景 */
background: linear-gradient(45deg,
#ff0000, #ff9900, #ffff00,
#00ff00, #0099ff, #6600ff
);
background-size: 400% 400%;
border-radius: 10px;
}
/* 左侧正方形，向右旋转45度 */
.heart-square.left {
top: 0;
left: 50px;
transform: rotate(45deg);
transform-origin: 0 100%;
}
/* 右侧正方形，向左旋转45度 */
.heart-square.right {
top: 0;
right: 50px;
transform: rotate(-45deg);
transform-origin: 100% 100%;
}
添加彩虹流动动画
通过@keyframes定义背景位置的变化，让渐变的颜色不断流动，形成彩虹动态效果：
/* 定义彩虹流动动画 */
@keyframes rainbow_flow {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
/* 给两个正方形应用动画 */
.heart-square {
animation: rainbow_flow 3s ease infinite;
}
优化细节
如果希望心形的边缘更圆润，可以给两个正方形添加更大的border-radius，同时调整定位让拼接更自然：
.heart-square {
width: 110px;
height: 110px;
border-radius: 20px;
}
.heart-square.left {
left: 45px;
}
.heart-square.right {
right: 45px;
}
完整运行代码
将以下代码保存为HTML文件，直接在浏览器中打开就能看到彩虹心动画效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS彩虹心动画</title>
<style>
.heart-container {
position: relative;
width: 200px;
height: 180px;
margin: 50px auto;
}
.heart-square {
position: absolute;
width: 110px;
height: 110px;
background: linear-gradient(45deg,
#ff0000, #ff9900, #ffff00,
#00ff00, #0099ff, #6600ff
);
background-size: 400% 400%;
border-radius: 20px;
animation: rainbow_flow 3s ease infinite;
}
.heart-square.left {
top: 0;
left: 45px;
transform: rotate(45deg);
transform-origin: 0 100%;
}
.heart-square.right {
top: 0;
right: 45px;
transform: rotate(-45deg);
transform-origin: 100% 100%;
}
@keyframes rainbow_flow {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
</style>
</head>
<body>
<div class="heart-container">
<div class="heart-square left"></div>
<div class="heart-square right"></div>
</div>
</body>
</html>
注意事项
- 两个正方形的
transform-origin属性必须设置正确，否则旋转后无法拼接成心形轮廓 - 渐变的
background-size要设置比元素本身大，否则动画时颜色变化不明显 - 如果调整了正方形的尺寸，需要同步调整容器的宽高和两个正方形的定位数值，避免出现拼接错位