纯CSS动画爱心：用你的心用自己的方式

2024-01-23 19:20:03

序曲：CSS初恋

在计算机技术的广阔舞台上，CSS就像一位出色的设计师，它用灵动的代码赋予网页生命和韵律。在今天这堂CSS绘画课上，我们将描绘一颗鲜艳的心形，让你的网页溢满爱意。准备好踏上这令人心动的旅程了吗？

第一幕：勾勒爱心的雏形

HTML画布：
```
<div id="heart"></div>
```
我们先用一个<div>元素作为爱心的容器，赋予它一个独特的ID“heart”。
CSS画笔：
```
#heart {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #f00;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
```
我们给“heart”容器加上CSS样式，为它设定了宽度、高度、圆角边框、背景颜色以及绝对定位。这样，我们就创建了一个红色的正方形，它将作为爱心的躯干。

第二幕：点缀爱心的眼眸

椭圆形的眼睛：

#heart::before,
#heart::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: #fff;
}
#heart::before {
  width: 20px;
  height: 20px;
  top: 20%;
  left: 25%;
}
#heart::after {
  width: 20px;
  height: 20px;
  top: 20%;
  right: 25%;
}

我们用伪元素“::before”和“::after”来创建两个白色的椭圆形，它们将成为爱心的眼睛。

第三幕：旋转爱的华尔兹

爱的旋转：

#heart {
  animation: spin 5s infinite linear;
}
@keyframes spin {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

我们为爱心添加一个旋转动画，让它在网页上翩翩起舞。