CSS實現(xiàn)雙圓形是一種常見的效果，可以通過CSS中的偽元素和transform屬性實現(xiàn)。下面是一份實現(xiàn)雙圓形的代碼。

<style>
.double-circle {
position: relative;
width: 100px;
height: 100px;
background-color: #ccc;
border-radius: 50%;
overflow: hidden;
}
.double-circle::before,
.double-circle::after {
content: "";
position: absolute;
top: 0;
width: 50%;
height: 100%;
background-color: #f00;
border-radius: 50%;
transform-origin: center;
transform: scale(0) rotate(0);
transition: all 1s ease-in-out;
}
.double-circle::before {
left: 0;
}
.double-circle::after {
left: 50%;
}
.double-circle:hover::before,
.double-circle:hover::after {
transform: scale(1) rotate(180deg);
}
</style>
<div class="double-circle"></div>

上面的代碼定義了一個雙圓形容器，包括一個div元素和一些CSS樣式。其中，設(shè)置了容器的寬度、高度、背景顏色和圓角半徑，并將overflow屬性設(shè)置為hidden，這樣可以隱藏偽元素的溢出部分。

接下來定義了兩個偽元素，分別對應(yīng)兩個圓形。這里使用了偽元素的before和after，它們分別表示在元素的前面和后面插入內(nèi)容。這里用來插入兩個圓形，通過改變偽元素的transform屬性，使圓形動畫。

定義好雙圓形和偽元素后，接下來需要給兩個圓形添加動畫。這里使用了CSS3的transform屬性，它能夠?qū)⒃剡M行旋轉(zhuǎn)、縮放、平移等操作。在進行圓形動畫時，需要用到兩個屬性，分別是transform-origin和transform。它們的作用是指定旋轉(zhuǎn)中心和旋轉(zhuǎn)角度。同時，還需要使用transition屬性指定動畫效果和動畫時間。

最后，將雙圓形容器和偽元素添加到HTML文件中，并添加相應(yīng)的class名稱即可實現(xiàn)效果。