css点击旋转动画效果 |css 红色字体

/*html代码*/ 
<div class="rotate-box"></div>
/*css代码*/ 
.rotate-box { 
width: 100px; 
height: 100px;
background-color: #ff5722;
cursor: pointer; /*光标设置为手指形状*/
animation: rotate 1s ease-in-out forwards; /*默认旋转效果*/
}
.rotate-box.active { /*旋转后状态*/
animation: rotate2 1.5s ease-in-out forwards; 
} 
/*动画：以自身中心点顺时针旋转一周*/
@keyframes rotate { 
0% { 
transform: rotate(0deg); 
} 
100% { 
transform: rotate(360deg); 
} 
} 
/*动画：逆时针旋转一周*/
@keyframes rotate2 { 
0% { 
transform: rotate(360deg); 
} 
100% { 
transform: rotate(0deg); 
} 
}
/*JS代码*/
var box = document.querySelector('.rotate-box'); //找到需要点击的元素
box.addEventListener('click', function() { //为元素添加点击事件
this.classList.add('active'); //添加类名，修改样式
});

以上是一段CSS代码，包含了点击旋转动画效果的实现过程。首先，定义了一个div元素，设置了其宽高、背景颜色和光标样式，并给予了默认的旋转动画效果。

通过关键帧动画的定义，实现了元素在自身中心点顺时针旋转一周的效果。在JS代码中，通过添加点击事件，触发元素状态的改变，使其执行逆时针旋转一周的动画，从而达到“点击旋转”的效果。

在实际应用中，可以根据需要对元素样式和动画效果进行调整，实现更加丰富多彩的点击动画效果。