制作CSS下拉加載的圓圈,可以通過CSS樣式和動畫來實現(xiàn),以下是一個簡單的示例代碼:
HTML結(jié)構(gòu):
<div class="circle-container"> <div class="circle"></div> </div>
CSS樣式:
.circle-container { position: relative; width: 100px; height: 100px; } .circle { position: absolute; top: 50%; left: 50%; width: 50px; height: 50px; border-radius: 50%; background-color: #000; transform: translate(-50%, -50%); animation: load 1s linear infinite; } @keyframes load { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
在這個示例中,我們創(chuàng)建了一個名為circle-container
的容器,用于承載我們的圓圈,我們創(chuàng)建了一個名為circle
的圓形元素,并設(shè)置了一些樣式屬性,如寬度、高度、邊框半徑和背景顏色,我們使用transform
屬性將圓形元素定位到容器的中心,并使用animation
屬性創(chuàng)建一個名為load
的動畫,這個動畫將圓形元素從0度旋轉(zhuǎn)到360度,從而實現(xiàn)了一個旋轉(zhuǎn)的加載動畫效果,我們使用@keyframes
規(guī)則來定義動畫的關(guān)鍵幀,在這個示例中,我們只有一個關(guān)鍵幀,即從0度旋轉(zhuǎn)到360度,您可以根據(jù)需要添加更多的關(guān)鍵幀來創(chuàng)建更復(fù)雜的動畫效果。