CSS3 animation是一種用來實現動態效果的技術。其中的spin特性能夠讓某個元素在旋轉的同時呈現出漸進性的變化,非常適合用來制作加載提示的效果。
下面的代碼為一個簡單的spin動畫:
.spin { animation: spin 1s ease-in-out infinite; border: solid 4px #dcdcdc; border-top-color: #333; border-radius: 50%; height: 28px; width: 28px; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
可以看到,我們為需要進行spin動畫的元素添加了.spin類,并且通過animation屬性指定了spin動畫的相關信息。其中的spin關鍵詞指向了我們在下方定義的@keyframes,1s則是動畫持續時間為1秒,ease-in-out則是動畫的過渡方式為緩入緩出,infinite則表示動畫循環無限次。
@keyframes spin中定義了動畫的關鍵幀規則,0%與100%分別代表了動畫的起始幀與終止幀。在0%的時候,.rotate的transform屬性的rotate為0deg,而在100%的時候則為360deg,就形成了元素旋轉的效果。
通過以上的代碼示例,相信大家可以了解spin動畫的基本使用方法,并靈活應用于工作中。