css3模拟gif动画 |css 文字灰色

/*定义动画*/
@keyframes loading {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/*定义加载动画的样式*/
.loading {
width: 100px;
height: 100px;
border-radius: 50%;
border: 10px solid #ccc;
border-top-color: #00bcd4;
animation: loading 1s linear infinite;
}

上述代码中大家使用了@keyframes关键字定义了一个名称为loading的动画，其中0%代表动画起点（即图形从0度开始旋转），100%代表动画的终点（即图形旋转360度）。接下来的代码中大家定义了一个loading的样式，利用border属性和border-radius属性绘制了一个圆形的边框，通过animation属性中的loading来实现不断旋转的效果。

这样大家就成功地使用CSS3模拟了一个GIF动画。CSS3的各种属性和动画，为大家提供了更加丰富的视觉效果，让网页看起来更加动感和生动。在实际开发中，使用CSS3模拟GIF动画可以很好地提高用户的体验感，让用户更加喜欢使用大家的网页。