程序员的专属浪漫：CSS打造爱心追随鼠标效果

前端

2023-09-09 10:25:44

用 CSS 绽放浪漫：爱心追随鼠标的甜蜜效果

导言

各位代码狂热爱好者，你们准备好了吗？我们今天要踏上一段甜蜜的编程之旅，用 CSS 创造一个浪漫的爱心追随鼠标的效果。无论你的鼠标指向何方，一颗充满爱意的爱心都会如影随形，为你的代码世界增添一份动人的气息。

原理揭秘

这个迷人的效果背后原理很简单：我们借助 CSS 的:hover伪类来改变爱心的样式。当鼠标悬停在爱心上时，它的样式就会发生改变，从而营造出爱心追随鼠标的视觉效果。

步骤指南

准备好你的键盘，让我们开始打造我们的代码之爱吧！

1. 构建 HTML 结构

我们先创建一个 HTML 结构来容纳我们的爱心元素：

<div id="heart">
  <span class="left"></span>
  <span class="right"></span>
</div>

在这个结构中，<div id="heart">是爱心的容器，<span class="left">和<span class="right">分别代表爱心的左右半部分。

2. 编写 CSS 样式

接下来，我们用 CSS 来定义爱心的样式和行为：

#heart {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  background-color: red;
  border-radius: 50%;
}

#heart:hover {
  animation: heart-beat 1s infinite alternate;
}

@keyframes heart-beat {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}

.left, .right {
  position: absolute;
  top: 50%;
  width: 50%;
  height: 50%;
  background-color: white;
  border-radius: 50%;
}

.left {
  left: 0;
}

.right {
  right: 0;
}