純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。