CSS爱心旋转 |css 视频教程

/* 定义爱心的样式 */
.heart {
width: 30px;
height: 30px;
position: relative;
animation: heart 2s infinite ease-in-out; /* 定义动画效果 */
}
.heart:before,
.heart:after {
content: "";
position: absolute;
width: 30px;
height: 30px;
background: #ff69b4;
border-radius: 15px 15px 0 0;
transform: rotate(45deg);
}
.heart:before {
top: -15px;
left: 0;
}
.heart:after {
top: 0;
left: -15px;
}
/* 定义动画效果 */
@keyframes heart {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}

上面的CSS代码定义了一个名为“heart”的类，该类可以用于声明一个爱心图案，加上动画效果后可以使其旋转。其中，使用了伪元素: before和: after来定义爱心的两个半圆形，再用变形进行旋转。

最后，在HTML页面中插入以下代码，就可以看到爱心旋转的效果啦：

<div class="heart"></div>

希望以上的介绍能够对你了解如何使用CSS实现爱心旋转效果有所帮助。