這篇文章帶給大家的內容是關於css實現圓與邊框的程式碼實例，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
<div> <div> <div> </div> </div> <div> </div> <div> </div> </div>
#box {
height:200px;
width:200px;
}
.circle-out{
height: inherit;
width: inherit;
display: inline-block;
text-align: center;
border: 20px solid blue;
border-radius: 50%;
}
/* 绘制弧形 */
.circle-part{
display: inline-block;
position: relative;
width:0px;
height: 0px;
border-radius: 50%;
border: 100px solid #0000ff05;
border-top: 100px solid blue;
top: -220px;
left: 20px;
transform: rotate(0deg);
animation: run-part 5s infinite;
}
.part1{
height: 0px;
width: 0px;
border-radius: 50%;
border:100px solid #fafafa;
border-top: 100px solid #ff000000;
position: relative;
top: -420px;
left: 20px;
transform: rotate(45deg);
animation: run-part1 5s infinite;
}
.circle-inner{
height: 0px;
width: 0px;
display: inline-block;
border-radius: 50%;
border: 20px solid blue;
top: 80px;
position: relative;
z-index: 1000;
}
@-webkit-keyframes run-part1{
0%{
transform: rotate(45deg);
}
100% {
transform: rotate(405deg);
}
}
@-webkit-keyframes run-part{
0%{
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}從外觀看到，圖形大致由：外圓，內圓及構扇形構成。
在本範例中，主要採用一個p,設定高與寬，背景不設定或白色。設定 border-radius為50%外圓圈，使用邊框構成從而形成外圈。
.circle-out{
height: inherit;
width: inherit;
border: 20px solid blue;
display: inline-block;
border-radius: 50%;
text-align: center;
}效果圖 ：
內圓很簡單，也是使用border完成的圓，設定boder-radius:50%實現的圓的效果，最後就是一個定位的事情。
扇形，在本範例中，實現的想法也是拼湊，外加旋轉，利用邊框border實作。
.circle-part{
//(1)
display: inline-block;
width:0px;
height: 0px;
//(2)
border-radius: 50%;
border: 100px solid #0000ff05;
border-top: 100px solid blue;
//(3)
position: relative;
top: -220px;
left: 20px;
//(4)
transform: rotate(0deg);
animation: run-part 5s infinite;
}如上程式碼：
分為（1）、（2）、（3）、（4）部分，出去固定形狀、動畫外，比較重要的就在於（2）部分。
先畫出1/4的圓（邊框）。其他另外3/4的扇形以透明繪製。
相同的，另外使用另外一個圓進行相同的處理，這樣兩個圓就能重疊在一起，唯一不同的是：第二個圓設定那3/4圓作為白色，1/4設定為透明色。
這時，呈現的為1/4的扇形，背景為blue,而因為透明的原因1/4是完全暴露的。
最後，由於最後的圓為頂層元素，所以當頂層元素發生旋轉時，藍色的扇形部分就會被頂層元素那3/4的扇形區域所遮蔽。從而達到最後的效果。
程式碼最後加上自己的動畫，實現最後的效果。
以上是css實作圓與邊框旋轉動畫的程式碼實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！
