css 心跳 |scss元素选择器

.heart-beat {
display: inline-block;
transition: transform 0.2s ease-in-out;
transform: scale(1);
}
.heart-beat:hover {
transform: scale(1.2);
}

以上代码中，大家先设置了一个 .heart-beat 类，它是一个 inline-block 元素，并设置了 transition 属性。transition 属性指定了 CSS 属性过渡时的动画效果，其中 0.2s 是变换时间，ease-in-out 是动画效果（即变慢再变快）。

接着，在:hover 伪类下，大家设置了 .heart-beat 的 transform 属性，将其变换比例从 1 改变到 1.2，即图标变大一些，达到心跳的效果。

大家也可以使用 @keyframe 关键帧来实现更复杂的心跳效果，代码如下：

.heart-pulse {
position: relative;
display: inline-block;
animation: heart-pulse 1s infinite alternate;
}
@keyframes heart-pulse {
from {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7);
}
to {
transform: scale(1.1);
box-shadow: 0 0 0 20px rgba(255, 0, 0, 0);
}
}

以上代码中，大家创建了一个 .heart-pulse 类，并设置了 position: relative 属性，以便后面设置 ::before 伪元素的绝对位置。animation 属性指定了关键帧的名称和动画效果，它可以持续一秒，并且无限循环，且每次从前或后交替开始。

接着，大家通过 @keyframe 定义 heart-pulse 关键帧，设置其开始状态和结束状态。其中，开始状态为初始大小和红色阴影，结束状态为稍大的大小和透明阴影。

总的来说，CSS 心跳是一种简单但强大的动画效果，让你的页面更加生动。无论是基础的 transition/transform 还是复杂的关键帧动画，都可以让你的网站更加出色。