css3 爱心跳动 |css3大于

.heart {
position: relative;
width: 100px;
height: 90px;
transform: rotate(45deg);
transform-origin: center;
background: red;
}
.heart:before,
.heart:after {
content: "";
position: absolute;
background: red;
}
.heart:before {
top: -45px;
left: 0;
width: 45px;
height: 45px;
border-radius: 30px 0 0 0;
}
.heart:after {
top: 0;
left: 45px;
width: 45px;
height: 45px;
border-radius: 0 30px 0 0;
}
.heart:before {
transform: rotate(-45deg);
}
.heart:after {
transform: rotate(45deg);
}

上面代码的核心是在一个 div 元素中绘制一个心形，并通过 :before 和 :after 脚本分别增加了半个心形的区域。这里利用了 CSS 的 transform 属性实现了对单独的心形进行旋转。实现之后，只需要添加一个动画效果，让心形跳动即可：

@keyframes heartbeat {
0% { transform: scale(1); }
20% { transform: scale(1.1); }
40%, 100% { transform: scale(1); }
}
.heart {
animation: heartbeat 1s infinite ease-in-out;
}

上面的代码使用 CSS3 的动画效果让心形跳动起来。动画的细节可以根据自己的需求调节。至此，你已经实现了 CSS3 爱心跳动的效果，可以尝试在你的页面中进行应用了。