扁形/環形加載

時間 2019-11-08

標籤扁形環形加載简体版

原文原文鏈接

知識點:css

變形屬性: 邊框圓 (border-radius)/中心點 (transform-origin), 旋轉 (transform:rotate) / 裁剪 (clip) [or 高寬一半]html

經過js 控制進度css3

思路方法:一.經過2個半圓分別控制半圓進行轉動(2個半圓也有幾種實現方法), 二.經過背景屬性(比較複雜)web

下面經過簡單的步驟進行分解:wordpress

1.現實半月spa

假設一個100 x 100的圓, 放入一個元素,那麼,高仍是100,寬是50,而後改變左上,左下圓角.3d

 1 <!doctype html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         .demo{
 8             position: relative;
 9             margin: 50px auto;
10             width: 400px;
11             height: 400px;
12             border: 1px solid #000;
13         }
14         .left{
15             position: absolute;
16             top: 0;
17             left: 0;
18             background: #c93328;
19             height: 400px;
20             width: 400px;
21             z-index: 1;
22             border-radius:50% 0  0 50%;
23             clip: rect(0px,200px,400px,0px);
24         }
25         .right{
26             position: absolute;
27             top: 0;
28             right: 0;
29             background: green;
30             height: 400px;
31             width: 400px;
32             border-radius:0 50% 50%  0;
33             clip: rect(0px,400px,400px,200px);
34         }
35     </style>
36 </head>
37 <body>
38       <div class="demo">
39           <div class="left"></div>
40           <div class="right"></div>
41       </div>
42 </body>
43 </html>