在CSS中,我們可以用線條動畫來增添頁面的視覺效果。線條動畫是通過在CSS中定義路徑、描邊和動畫來實現的。以下是如何用CSS中的線條動畫來制作一個簡單的線條圓效果的代碼。
/* 定義路徑 */ .circle { position: relative; width: 200px; height: 200px; margin: 50px auto; } .circle:before, .circle:after { content: ""; position: absolute; border-radius: 50%; z-index: -1; } .circle:before { left: 5px; top: 5px; bottom: 5px; right: 5px; box-shadow: inset 0 0 0 10px #333; } .circle:after { width: calc(100% - 10px); height: calc(100% - 10px); left: 0; top: 0; border: 3px solid #333; animation: animate 2s linear infinite; } @keyframes animate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
在上述代碼中,我們首先定義了一個DIV元素`circle`,然后用絕對定位方式創建了一個左右上下各有5像素間距的`before`元素,然后再用同樣的方式定義了一個`after`元素。
接下來,我們定義了`after`元素的樣式屬性,包括它的邊框、寬度、高度以及動畫。`border`屬性控制線條的寬度和顏色,`width`屬性設定了圓的寬度,`height`屬性設定了圓的高度,`animation`屬性則定義了動畫效果。
最后,我們通過`@keyframes`關鍵字定義了`rotate`的動畫,讓它從0度到360度無限循環。在這種方式下,圓的線條將不斷地旋轉。
上一篇純css打造相冊效果源碼
下一篇mysql 第一行數據