CSS中小圓如何繞著大圓轉(zhuǎn)

在CSS中，您可以使用動(dòng)畫和變換（transform）屬性來制作一個(gè)小圓繞著大圓旋轉(zhuǎn)的效果，以下是一個(gè)基本的示例：

HTML結(jié)構(gòu)：

<div class="circle-container">
    <div class="large-circle"></div>
    <div class="small-circle"></div>
</div>

CSS樣式：

.circle-container {
    position: relative;
    width: 200px;
    height: 200px;
}
.large-circle {
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #333;
}
.small-circle {
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #f00;
    animation: rotate 5s linear infinite;
}

關(guān)鍵動(dòng)畫代碼：

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

在這個(gè)示例中，我們創(chuàng)建了一個(gè)包含一個(gè)大圓和一個(gè)小圓的容器，大圓作為背景，小圓則在前上方，我們使用transform屬性中的rotate函數(shù)來使小圓旋轉(zhuǎn)，通過@keyframes規(guī)則，我們定義了一個(gè)名為rotate的動(dòng)畫，該動(dòng)畫從0度旋轉(zhuǎn)到360度，持續(xù)時(shí)間為5秒，并且是線性變化的，且設(shè)置為無限重復(fù)，這樣，小圓就會(huì)繞著大圓不斷地旋轉(zhuǎn)，您可以根據(jù)需要調(diào)整動(dòng)畫的持續(xù)時(shí)間、旋轉(zhuǎn)角度等參數(shù)來達(dá)到不同的效果。