纯CSS作旋转不断的效果

这是我参与8月更文挑战的第5天，活动详情查看：8月更文挑战css

昨天学习了CSS的animation动画特性，作了一个简单的放大字体效果。html

今天学习一个不太熟悉的CSS属性：transform。markdown

MDN官方文档：developer.mozilla.org/zh-CN/docs/…函数

transform属性容许你旋转，缩放，倾斜或平移给定元素。这是经过修改CSS视觉格式化模型的坐标空间来实现的。oop

其中可选得转换样式被称为transform-functions，MDN文档中关于transform-functions，列举了包括matrix, matrix3d, perspective, rotate等多个函数。post

本文会用到上一篇文章中介绍的animation以及transform中的rotate函数。学习

其中有几个关键点值得注意字体

animation属性值中的速度设置为linear。表示动画变化是匀速的。

若是是默认的ease，即默认逐渐变慢的速度时，能够看到动画在转换为25%，50%，75%时会有比较明显的卡顿效果。这也帮助咱们理解了animation中的速度函数，是针对@keyframes中的每一段的，而不是从开始到结束的，若采用ease默认值，效果以下所示：flex

animation属性中的定义播放次数为：infinate，表示无限次数播放，从而能够使动画一直循环播放。

最终的播放效果以下图所示：

<!DOCTYPE html>

<body class="border">
    <div class="rotate">
        中国加油！奥运健儿加油！
    </div>
</body>
<style> .border { border: 1px solid black; } body { height: 100vh; width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: center; } .rotate { display: flex; align-items: center; justify-content: center; font-size: 50px; color: red; animation: rotate 10s linear infinite; -webkit-animation: rotate 10s linear infinite; } @keyframes rotate { 0% { transform: rotate(0); } 25% { transform: rotate(90deg); } 50% { transform: rotate(180deg); } 75% { transform: rotate(270deg); } 100% { transform: rotate(360deg); } } @-webkit-keyframes rotate { 0% { transform: rotate(0); } 25% { transform: rotate(90deg); } 50% { transform: rotate(180deg); } 75% { transform: rotate(270deg); } 100% { transform: rotate(360deg); } } </style>

</html>
复制代码

PS: 制做动画所用软件为ScreenToGif。