每天堅持一個css-圓與邊框(border)
阿新 • • 發佈:2018-12-10
每天堅持一個CSS
實現效果:
程式碼
html:
<div id="box">
<div class="circle-out">
<div class="circle-inner"> </div>
</div>
<div class="circle-part">
</div>
<div class="part1">
</div>
</div>
css:
#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); } }
實現思路
1 圖形構成
從外觀看到,該圖形大致由:外圓,內圓及構扇形構成。
1.1 外圓
在本示例中,主要採用一個div
,設定高與寬,背景不設定或白色。設定 border-radius
為50%外圓圈,使用邊框構成從而形成外圈。
.circle-out{
height: inherit;
width: inherit;
border: 20px solid blue;
display: inline-block;
border-radius: 50%;
text-align: center;
}
效果圖 :
1.2內圓
內圓很簡單,也是使用border完成的圓,設定boder-radius:50%
1.3扇形
扇形,在本示例中,實現的思路也是拼湊,外加旋轉,利用邊框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
的扇形區域所遮蔽。從而達到最後的效果。
程式碼最後加上自己的動畫,實現最後的效果。
關於圖形的變很多,這裡列出來的都是最基礎的,歡迎大家一起學習。