css3 由慢到快的旋转 |css图片炫光

/* 定义动画 */
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* 定义样式 */
.rotate {
animation-name: rotate; /* 动画名称 */
animation-duration: 3s; /* 动画时间 */
animation-timing-function: ease-in-out; /* 动画缓动 */
}
/* 加入 HTML */
<div class="rotate">
<p>Hello, CSS3!</p>
</div>

首先，大家需要使用@keyframes定义动画。在这个例子中，大家将一个元素从0度旋转到360度。接下来，大家定义.rotate样式，将大家刚刚定义的动画在元素上应用。

动画时间大家选用了3秒，这意味着动画将持续3秒。为了使大家的动画更加流畅，大家使用了ease-in-out作为大家的动画缓动。

最后，大家将<p>Hello, CSS3!</p>加入到大家的<div>元素中，并为该元素添加了.rotate类名，这样就完成了代码部分。当大家将这段代码运行后，你将看到一个带有由慢到快的旋转效果的文本块。

以上就是如何实现由慢到快的旋转效果。希望这篇文章能对你有所帮助。