制图你要求的几何图形,不行使图片

用 CSS3 绘制你必要的几何图形

2016/08/12 · CSS

初稿出处: 飘泊的作家   

1、圆形

示例:亚洲必赢官网 1

思路:给其他正方形元素设置一个足够大的 border-radius
,就足以把它成为一个圆形.代码如下:

html:

XHTML

<div class=”size example1″></div>

1
<div class="size example1"></div>

css:

CSS

.size{ width:200px; height: 200px; background: #8BC34A; } .example1{
border-radius:100px; }

1
2
3
4
5
6
7
8
.size{
    width:200px;
    height: 200px;
    background: #8BC34A;
}
.example1{
    border-radius:100px;
}

2、自适应椭圆

亚洲必赢官网 2

思路:border-radius
那几个特性还有别的一个不敢问津的原形,它不仅可以接受长度值,还足以承受百分比率。那几个百分比值会基于元素的尺码举行解析.这代表相同的比重可能会盘算出分裂的水平和垂直半径。代码如下:

html:

XHTML

<div class=”example3″></div>

1
<div class="example3"></div>

css:

CSS

.example3{ width:200px; height: 150px; border-radius:50%; background:
#8BC34A; }

1
2
3
4
5
6
.example3{
    width:200px;
    height: 150px;
    border-radius:50%;
    background: #8BC34A;
}

3、自适应的半椭圆:沿横轴劈开的半椭圆

亚洲必赢官网 3

思路:border-radius 的语法比我们想像中灵活得多。你恐怕会好奇地觉察
border-radius
原来是一个简写属性。第一种办法就是拔取它所对应的各样展开式属性:

  • „ border-top-left-radius
  • „ border-top-right-radius
  • „ border-bottom-right-radius
  • „ border-bottom-left-radius

大家居然可以为所有三个角提供完全两样的程度和垂直半径,方法是在斜杠前点名
1~4 个值,在斜杠后指定其它 1~4 个值。举例来说,当 border-radius
的值为10px / 5px 20px 时,其职能一定于 10px 10px 10px 10px / 5px 20px
5px 20px 。

为 border-radius 属性分别指定4、3、2、1
个由空格分隔的值时,这一个值是以如此的法则分配到八个角上的(请留心,对椭圆半径来说,斜杠前和斜杠后最多可以各有五个参数,这两组值是以同样的方法分配到种种角的)

亚洲必赢官网 4

代码如下:自适应的半椭圆:沿横轴劈开的半椭圆

html:

XHTML

<div class=”example4″></div>

1
<div class="example4"></div>

css:

CSS

.example4{ width:200px; height: 150px; border-radius: 50% / 100% 100% 0
0; background: #8BC34A; }

1
2
3
4
5
6
.example4{
    width:200px;
    height: 150px;
    border-radius: 50% / 100% 100% 0 0;
    background: #8BC34A;
}

4、自适应的半椭圆:沿纵轴劈开的半椭圆

亚洲必赢官网 5

思路:自适应的半椭圆:沿纵轴劈开的半椭圆

代码如下:

html:

XHTML

<div class=”example5″></div>

1
<div class="example5"></div>

css:

CSS

.example5{ width:200px; height: 150px; border-radius: 100% 0 0 100% /
50%; background: #8BC34A; }

1
2
3
4
5
6
.example5{
    width:200px;
    height: 150px;
    border-radius: 100% 0 0 100% / 50%;
    background: #8BC34A;
}

5、四分之一椭圆

思路:其中一个角的档次和垂直半径值都亟待是100%,而其余七个角都不能设为圆角。

亚洲必赢官网 6

代码如下:

html:

XHTML

<div class=”example6″></div>

1
<div class="example6"></div>

css:

CSS

.example6{ width:160px; height: 100px; border-radius: 100% 0 0 0;
background: #8BC34A; }

1
2
3
4
5
6
.example6{
    width:160px;
    height: 100px;
    border-radius: 100% 0 0 0;
    background: #8BC34A;
}

 6、用椭圆绘制opera浏览器的logo

亚洲必赢官网 7

思路:绘制opera浏览器的logo,分析起来简单,就唯有七个图层,一个是最底部的扁圆形,一个是最下边那层的椭圆。先确定一下最底部的扁圆形宽高,量了一晃,水平大幅度为258px,垂直中度为275px,因为其是一个对称的扁圆形,没有倾斜度,故4个角均为水平半径为258px,垂直半径为275px的4个出色椭圆,用相同的主意规定最里面的扁圆形的半径,因而,两个角均为水平半径120px,垂直半径为229px的扁圆形,代码如下:

html:

XHTML

<div class=”opera”> <div class=”opera-top”></div>
</div>

1
2
3
<div class="opera">
        <div class="opera-top"></div>
</div>

css:

CSS

.opera{ width:258px; height: 275px; background: #F22629;
border-radius:258px 258px 258px 258px /275px 275px 275px 275px;
position: relative; } .opera-top{ width: 112px; height: 231px;
background: #FFFFFF; border-radius: 112px 112px 112px 112px/231px 231px
231px 231px; position: absolute; left: 50%; right: 50%; top: 50%;
bottom: 50%; margin-left: -56px; margin-top: -115px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.opera{
    width:258px;
    height: 275px;
    background: #F22629;
    border-radius:258px 258px 258px 258px /275px 275px 275px 275px;
    position: relative;
}
.opera-top{
    width: 112px;
    height: 231px;
    background: #FFFFFF;
    border-radius: 112px 112px 112px 112px/231px 231px 231px 231px;
    position: absolute;
    left: 50%;
    right: 50%;
    top: 50%;
    bottom: 50%;
    margin-left: -56px;
    margin-top: -115px;
}

 7、平行四边形

亚洲必赢官网 8

思路:伪元素方案:是把拥有样式(背景、边框等)应用到伪元素上,然后再对
伪元素举办变形。因为我们的情节并不是含有在伪元素里的,所以内容并不会惨遭变形的影响。代码如下:

html:

XHTML

<div class=”button”>transform:skew()</div>

1
<div class="button">transform:skew()</div>

制图你要求的几何图形,不行使图片。css:

CSS

.button { width:200px; height: 100px; position: relative; left: 100px;
line-height: 100px; text-align: center; font-weight: bolder; }
.button::before { content: ”; /* 用伪元一直生成一个矩形 */
  position: absolute;   top: 0; right: 0; bottom: 0; left: 0;
  z-index: -1;   transform: skew(45deg);   background: #8BC34A; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.button {
    width:200px;
    height: 100px;
    position: relative;
    left: 100px;
    line-height: 100px;
    text-align: center;
    font-weight: bolder;
}
.button::before {
   content: ”; /* 用伪元素来生成一个矩形 */
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -1;
  transform: skew(45deg);
  background: #8BC34A;
}

技能总括:那几个技能不仅对 skew()
变形来说很有用,还适用于其余任何变形样式,当大家想变形一个要素而不想变形它的始末时就可以用到它。

8、菱形

亚洲必赢官网 9

思路:大家把那一个技能针对 rotate()
变形样式稍稍调整一下,再用到一个正方形元素上,就可以很不难地获取一个菱形。代码如下:

html:

XHTML

<div class=”example1″>transform:rotate()</div>

1
<div class="example1">transform:rotate()</div>

css:

CSS

.example1 { width:140px; height: 140px; position: relative; left: 100px;
line-height: 100px; text-align: center; font-weight: bolder; }
.example1::before { content: ”; position: absolute; top: 0; right: 0;
bottom: 0; left: 0; z-index: -1; transform: rotate(45deg); background:
#8BC34A; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.example1 {
    width:140px;
    height: 140px;
    position: relative;
    left: 100px;
    line-height: 100px;
    text-align: center;
    font-weight: bolder;
}
.example1::before {
    content: ”;
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -1;
    transform: rotate(45deg);
    background: #8BC34A;
}

技术总括:这几个技术的关键在于,大家运用伪元素以及定位属性暴发了一个四方,
然后对伪元素设置样式,并将其放置在其宿主元素的下层。那种思路同样可以利用在此外场景中,从而获取各类各类的效果。

9、菱形图片

亚洲必赢官网 10

思路:基于变形的方案,
我们想让图片的宽窄与容器的对角线相等,而不是与边长相等。要求选取勾股定理,那么些定律告诉我们,一个正方形的对角线长度等于它的边长乘以根号2,相当于1.414 213 562
 。由此,把 max-width 的值设置为根号2加倍100%相当于 414.421 356 2%
是很有理的,或者把这些值向上取整为 142% ,因为大家不愿意因为总括的舍入难题导致图片在其实突显时稍小(但稍大是没难题的,反正大家都是在裁切图片嘛)

代码如下:

html:

XHTML

<div class=”picture”> <img src=”./imgs/7.jpg”> </div>

1
2
3
<div class="picture">
    <img src="./imgs/7.jpg">
</div>

css:

CSS

.picture { width: 200px; transform: rotate(45deg); overflow: hidden;
margin: 50px; } .picture img { max-width: 100%; transform:
rotate(-45deg) scale(1.42); z-index: -1; position: relative; }

1
2
3
4
5
6
7
8
9
10
11
12
.picture {
    width: 200px;
    transform: rotate(45deg);
    overflow: hidden;
    margin: 50px;
}
.picture img {
    max-width: 100%;
    transform: rotate(-45deg) scale(1.42);
    z-index: -1;
    position: relative;
}

技巧总括:大家希望图片的尺寸属性保留 100% 这么些值,那样当浏览器不扶助变
形样式时仍是可以赢得一个合理的布局。 „ 通过 scale()
变形样式来缩放图片时,是以它的主干点展开缩放的 (除非大家优秀指定了
transform-origin 样式) 。通过 width 属性
来松手图片时,只会以它的左上角为原点进行缩放,从而迫使我们动用额外的负外边距来把图纸的职位调整回来.

10、切角意义

亚洲必赢官网 11

思路:基于background:linear-gradient()的方案:把八个角都做出切角效果了。你须要四层渐变图案,代码如
下所示:

html:

XHTML

<div class=”example2″>Hey, focus! You’re supposed to be looking at
my corners, not reading my text. The text is just
placeholder!</div>

1
<div class="example2">Hey, focus! You’re supposed to be looking at my corners, not reading my text. The text is just placeholder!</div>

css:

CSS

.example2{ background: #8BC34A; background: linear-gradient(135deg,
transparent 15px, #8BC34A 0) top left, linear-gradient(-135deg,
transparent 15px, #8BC34A 0) top right, linear-gradient(-45deg,
transparent 15px, #8BC34A 0) bottom right, linear-gradient(45deg,
transparent 15px, #8BC34A 0) bottom left; background-size: 50% 50%;
background-repeat: no-repeat; padding: 1em 1.2em; max-width: 12em;
line-height: 1.5em; }

1
2
3
4
5
6
7
8
9
10
11
12
13
.example2{
    background: #8BC34A;
    background: linear-gradient(135deg, transparent 15px, #8BC34A 0) top left,
                linear-gradient(-135deg, transparent 15px, #8BC34A 0) top right,
                linear-gradient(-45deg, transparent 15px, #8BC34A 0) bottom right,
                linear-gradient(45deg, transparent 15px, #8BC34A 0) bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
    
    padding: 1em 1.2em;
    max-width: 12em;
    line-height: 1.5em;
}

11、弧形切角

亚洲必赢官网 12

思路:上述渐变技巧还有一个变种,可以用来创建弧形切角(很四人也把那种
效果称为“内凹圆角” ,因为它看起来就像圆角的反向版本) 。唯一的界别
在于,我们会用径向渐变来替代上述线性渐变,代码如下:

html:

XHTML

<div class=”example3″>Hey, focus! You’re supposed to be looking at
my corners, not reading my text. The text is just
placeholder!</div>

1
<div class="example3">Hey, focus! You’re supposed to be looking at my corners, not reading my text. The text is just placeholder!</div>

css:

CSS

.example3{ background: #8BC34A; background: radial-gradient(circle at
top left, transparent 15px, #8BC34A 0) top left, radial-gradient(circle
at top right, transparent 15px, #8BC34A 0) top right,
radial-gradient(circle at bottom right, transparent 15px, #8BC34A 0)
bottom right, radial-gradient(circle at bottom left, transparent 15px,
#8BC34A 0) bottom left; background-size: 50% 50%; background-repeat:
no-repeat; padding: 1em 1.2em; max-width: 12em; }

1
2
3
4
5
6
7
8
9
10
11
12
.example3{
    background: #8BC34A;
    background: radial-gradient(circle at top left, transparent 15px, #8BC34A 0) top left,
                radial-gradient(circle at top right, transparent 15px, #8BC34A 0) top right,
                radial-gradient(circle at bottom right, transparent 15px, #8BC34A 0) bottom right,
                radial-gradient(circle at bottom left, transparent 15px, #8BC34A 0) bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
    
    padding: 1em 1.2em;
    max-width: 12em;
}

 12、不难的饼图

亚洲必赢官网 13

思路:基于 transform 的解决方案:大家现在能够透过一个 rotate()
变形属性来让这几个伪元素转起来。 如若我们要出示出 20%
的比值,我们得以指定旋转的值为 72deg (0.2 × 360 = 72) ,写成 .2turn
会尤其直观一些。你还足以观察其 他有些转悠值的情景。代码如下:

html:

XHTML

<div class=”pie”></div>

1
<div class="pie"></div>

css:

CSS

.pie{ width:140px; height: 140px; background: #8BC34A; border-radius:
50%; background-image: linear-gradient(to right,transparent 50%,#655
0); } .pie::before{ content: ”; display: block; margin-left: 50%;
height: 100%; border-radius: 0 100% 100% 0 / 50%; background-color:
inherit; transform-origin: left; transform: rotate(.1turn);/*10%*/
transform: rotate(.2turn);/*20%*/ transform: rotate(.3turn);/*30%*/
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.pie{
    width:140px;
    height: 140px;
    background: #8BC34A;
    border-radius: 50%;
    background-image: linear-gradient(to right,transparent 50%,#655 0);
}
.pie::before{
    content: ”;
    display: block;
    margin-left: 50%;
    height: 100%;
    border-radius: 0 100% 100% 0 / 50%;
    background-color: inherit;
    transform-origin: left;
    transform: rotate(.1turn);/*10%*/
    transform: rotate(.2turn);/*20%*/
    transform: rotate(.3turn);/*30%*/
}

提示:在参数中规定角度。turn是圈,1turn = 360deg;别的还有弧度rad,2nrad
= 1turn = 360deg。如,transform:rotate(2turn); //旋转两圈

亚洲必赢官网 14

此格局显示 0 到 50% 的比值时运行出色,但假诺大家尝试突显 60%
的比值时(比如指定旋转值为 .6turn 时),会合世难题。解决格局:使
用上述技术的一个反向版本来落到实处那些限制内的比值:设置一个灰色的伪
元素,让它在 0 至 .5turn 的限制内转悠。由此,要博得一个 60% 比率的饼
图,伪元素的代码可能是那样的:

html:

XHTML

<div class=”pie2″></div>

1
<div class="pie2"></div>

css:

CSS

.pie2{ width:140px; height: 140px; background: #8BC34A; border-radius:
50%; background-image: linear-gradient(to right,transparent 50%,#655
0); } .pie2::before{ content: ”; display: block; margin-left: 50%;
height: 100%; border-radius: 0 100% 100% 0 / 50%; background:
#655;/*当范围大于50%时,需求转移伪元素的背景颜色为#655;*/
transform-origin: left; transform: rotate(.1turn); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.pie2{
    width:140px;
    height: 140px;
    background: #8BC34A;
    border-radius: 50%;
    background-image: linear-gradient(to right,transparent 50%,#655 0);
}
.pie2::before{
    content: ”;
    display: block;
    margin-left: 50%;
    height: 100%;
    border-radius: 0 100% 100% 0 / 50%;
    background: #655;/*当范围大于50%时,需要改变伪元素的背景颜色为#655;*/
    transform-origin: left;
    transform: rotate(.1turn);
}

用 CSS 动画来完结一个饼图从 0 变化到 100%
的卡通,从而得到一个炫酷的进程提醒器:

亚洲必赢官网 15

代码如下:

html:

XHTML

<div class=”pie3″></div>

1
<div class="pie3"></div>

css:

CSS

.pie3 { width:140px; height: 140px; border-radius: 50%; background:
yellowgreen; background-image: linear-gradient(to right, transparent
50%, currentColor 0); color: #655; } .pie3::before { content: ”;
display: block; margin-left: 50%; height: 100%; border-radius: 0 100%
100% 0 / 50%; background-color: inherit; transform-origin: left;
animation: spin 3s linear infinite, bg 6s step-end infinite; }
@keyframes spin { to { transform: rotate(.5turn); } } @keyframes bg {
50% { background: currentColor; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.pie3 {
    width:140px;
    height: 140px;
    border-radius: 50%;
    background: yellowgreen;
    background-image: linear-gradient(to right, transparent 50%, currentColor 0);
    color: #655;
}
 
.pie3::before {
    content: ”;
    display: block;
    margin-left: 50%;
    height: 100%;
    border-radius: 0 100% 100% 0 / 50%;
    background-color: inherit;
    transform-origin: left;
    animation: spin 3s linear infinite, bg 6s step-end infinite;
}
 
@keyframes spin {
    to { transform: rotate(.5turn); }
}
@keyframes bg {
    50% { background: currentColor; }
}

1 赞 8 收藏
评论

亚洲必赢官网 16


亚洲必赢官网 17

CSS3创设漂亮的iphone电话图标,不使用图片,

<!DOCTYPE HTML>
<html lang=zh-cn>
<head>
<meta charset=utf-8>
<title>CSS3完美落实iphone电话图标</title>
<style>
*{margin:0px;padding:0px;}
body{background:#b1b1b1;margin:0px;padding:0px;font-size:14px;color:#000;}
.icon {width: 56px;height: 56px;z-index: 10;position: absolute;left:
50%;top: 50%;margin-left: -28px;margin-top: -28px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: rgba(0,0,0,0.5) 0 1px 2px;
-moz-box-shadow: rgba(0,0,0,0.5) 0 1px 2px;
box-shadow: rgba(0,0,0,0.5) 0 1px 2px;
}
.icon span {
display: block;text-align: center;font: bold 11px/15px “Helvetica Neue”,
Arial, Helvetica, Geneva, sans-serif;color: #fff;position:
absolute;top: 58px;left: -10px;width: 76px;
text-shadow: rgba(0,0,0,0.3) 1px 2px 1px;
text-transform: capitalize;
}
.i_phone {
width: 100%;height: 100%;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
position: relative;
overflow: hidden;
cursor: pointer;
background:-webkit-linear-gradient(top, #015801, #06f700);
background:-moz-linear-gradient(top, #015801, #06f700);
background:-ms-linear-gradient(top, #015801, #06f700);
background:-o-linear-gradient(top, #015801, #06f700);
background:linear-gradient(top, #015801, #06f700);
-ms-filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr=’#015801′,
endColorstr=’#06f700′, GradientType=0);
filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr=’#015801′,
endColorstr=’#06f700′, GradientType=0);
}

.i_phone .bg_angled {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
width: 125%;
height: 125%;
position: absolute;
left: -7px;
top: -7px;
-webkit-background-size: 4px 4px;
-moz-background-size: 4px 4px;
-ms-background-size: 4px 4px;
-o-background-size: 4px 4px;
background-size: 4px 4px;
background-color: none;
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, .2)
0%, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent 100%);
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, .2) 0%,
rgba(255, 255, 255, .2) 50%, transparent 50%, transparent 100%);
background-image: -ms-linear-gradient(top, rgba(255, 255, 255, .2) 0%,
rgba(255, 255, 255, .2) 50%, transparent 50%, transparent 100%);
background-image: -o-linear-gradient(top, rgba(255, 255, 255, .2) 0%,
rgba(255, 255, 255, .2) 50%, transparent 50%, transparent 100%);
background-image: linear-gradient(top, rgba(255, 255, 255, .2) 0%,
rgba(255, 255, 255, .2) 50%, transparent 50%, transparent 100%);
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}

.i_phone:after{
content: ”;
-webkit-box-shadow: inset #06f700 0 0 2px;
-moz-box-shadow: inset #06f700 0 0 2px;
box-shadow: inset #06f700 0 0 2px;
width: 100%;
height: 100%;
position: absolute;
display: block;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
z-index: 2;
}

.i_phone:before{
content: ”;
width: 100%;
height: 50%;
position: absolute;
display: block;
-webkit-border-radius: 10px 10px 50% 50% / 10px 10px 5px 5px;
-moz-border-radius: 10px 10px 50% 50% / 10px 10px 5px 5px;
border-radius: 10px 10px 50% 50% / 10px 10px 5px 5px;
background: rgba(255,255,255,0.5);
z-index: 5;
-webkit-box-shadow: inset rgba(255,255,255,0.5) 0 1px 0;
-moz-box-shadow: inset rgba(255,255,255,0.5) 0 1px 0;
box-shadow: inset rgba(255,255,255,0.5) 0 1px 0;
}

.i_phone .truba {
position: absolute;
top: 7px;
left: 5px;
z-index: 1;
width: 40px;
height:40px;
font: bold 40px/40px “Helvetica Neue”, Arial, Helvetica, Geneva,
sans-serif !important;
color: #f1f5f9;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
text-shadow: rgba(0,0,0,0.5) 0 0 2px;
}

.i_phone .truba:after {
content: ”;
position: absolute;
width: 12px;
height: 10px;
top: 2px;
left: 25px;
background: #f1f5f9;
-webkit-border-radius: 50% / 2px 2px 6px 2px;
-moz-border-radius: 50% / 2px 2px 6px 2px;
border-radius: 50% / 2px 2px 6px 2px;
-webkit-transform: rotate(-57deg);
-moz-transform: rotate(-57deg);
-ms-transform: rotate(-57deg);
-o-transform: rotate(-57deg);
transform: rotate(-57deg);
}

.i_phone .truba:before {
content: ”;
position: absolute;
width: 12px;
height: 10px;
top: 24px;
left: 4px;
background: #f1f5f9;
-webkit-border-radius: 50% / 2px 2px 2px 6px;
-moz-border-radius: 50% / 2px 2px 2px 6px;
border-radius: 50% / 2px 2px 2px 6px;
-webkit-transform: rotate(-25deg);
-moz-transform: rotate(-25deg);
-ms-transform: rotate(-25deg);
-o-transform: rotate(-25deg);
transform: rotate(-25deg);
}

.i_phone .truba b {
position: absolute;
width: 35px;
height: 4px;
top: 17px;
left: 7px;
background: #f1f5f9;
border-radius: 0 0 5px 5px;
-webkit-transform: rotate(-47deg);
-moz-transform: rotate(-47deg);
-ms-transform: rotate(-47deg);
-o-transform: rotate(-47deg);
transform: rotate(-47deg);
}
</style>
</head>
<body>
<div>;
<div class=”icon”>
<div class=”i_phone”>
<div class=”bg_angled”></div>
<div class=”truba”><b></b></div>
</div>
<span>Phone</span>
</div>
</body>
</html>

!DOCTYPE HTML html lang=zh-cn head meta charset=utf-8
titleCSS3完美落到实处iphone电话图标/title style *{margin:0px;pa…

The problem

饼图,四处可知,然而真正去贯彻,仍旧要下点功夫的。
譬如大家要成立一个速度提示器,或者计时显示屏,常常涉及使用外部图像编辑器为饼图的七个值创建图像,或接纳js脚本设计尤为复杂的图形。

当今有任何更好的方法去完成。

我是在前端网看到的成效,点击这里进入,自己看完源码后完毕了四遍,以下介绍具体步骤:

transform solution

率先,大家来画一个圆:

<pre>
.pie {
width: 100 px;
height: 100 px;
border-radius: 50 %;
background: yellowgreen;
}
</pre>

亚洲必赢官网 18

既然是饼图,比如双色饼图,就要求另一种颜色来浮现速度,再画一个半圆:

可以用渐变来做:

background-image: linear-gradient(to right, transparent 50%, #655 0);

亚洲必赢官网 19

咱们还索要创设一个遮罩层:虚线部分。

<pre>
.pie::before {
content: ”;
display: block;
margin-left: 50%;
height: 100%;
border-radius: 0 100% 100% 0 / 50%;
background-color: inherit;
transform-origin: left;
}
</pre>

创立好了,但是有几点要专注的地点:

  • 因为我们想让这些层盖住红色的一部分,所以我们可以给它加个藏蓝色的背景,也得以用
    <pre>
    background-color: inherit;
    </pre>来幸免重新表明。

  • 旋转的中心点是圆心,大家可以那样注明:
    <pre>
    transform-origin: left;
    //或者
    transform-origin: 0 50%;
    </pre>

  • 大家创立遮罩层的目标是盖住青色的那有些,它需假如个半圆,不过我们现在写的是个矩形,所以为了防止侧漏,大家用border-radius
    让它也变为半圆:

<pre>
border-radius: 0 100% 100% 0 / 50%;
</pre>

遮罩层也就就绪了,现在给一个旋转角度省视:

<pre>
.pie::before {
content: ”;
display: block;
margin-left: 50%;
height: 100%;
border-radius: 0 100% 100% 0 / 50%;
background: #655;
transform-origin: left;
transform: rotate(.1turn);
}
</pre>

亚洲必赢官网 20

旋转36度

今日加点动画让它动起来:

<pre>
@keyframes spin {
to {
transform: rotate(.5turn)
}
}

@keyframes bg {
50% {
background: #655
}
}

.pie::before {
content: ”;
display: block;
margin-left: 50%;
height: 100%;
border-radius: 0 100% 100% 0/50%;
background-color: inherit;
transform-origin: left;
animation: spin 3s linear infinite,bg 6s step-end infinite
}

</pre>

点击查阅:
http://dabblet.com/gist/722909b9808c14eb7300

近日先是步好了,更进一步,想想,即使大家在html中定义百分数,就能显得相应的比重,那大概是无法更好了。
就像是这么定义:
<pre>
<div class=”pie”>20%</div>
<div class=”pie”>60%</div>
</pre>

亚洲必赢官网 21

就如那样

一个浮现20%,另一个出示60% .

先是,大家摸索能无法用行内样式,然后用一段脚本去分析。

回头想一想:大家是要控制伪元素的转动度数来体现百分比的,那难点来了(挖掘机技术哪家强。。XD),我们没办法直接给伪元素添加行内样式…咋做呢?

The solution comes from one of the most unlikely places.

咱俩刚刚定义了动画片,现在它该停停了。

我们将利用animation的delay 来促成,与健康的行使分歧的是,我们将采纳负数
让它停在咱们定义的义务。很迷惑是还是不是,animation-delay
的参数为负数,那是不符合规范的,可是在一些情况下,它是很有用的,看描述:

“A negative delay is valid. Similar to a delay of 0s, it means that the
ani-mation executes immediately, but is automatically progressed by the
ab-solute value of the delay, as if the animation had started the
specifiedtime in the past, and so it appears to start partway through
its activeduration.”
— CSS Animations Level 1 (w3.org/TR/css-animations/#animation-delay)

因为动画被定义为pause 的时候,只会显示第一帧。

此时,展现在饼图上的百分比就是我们定义的延迟时间占整个动画时间的比例。

比如,大家的卡通片持续时间是6s, 延迟时间是-1.2s, 就会显得 20% ;
为了看起来方便,大家定义整个动画的持续时间为100s。

因为动画是不变的,所以设置多大的延迟是不会有其余影响的。

事例走起:

<pre>
<div class=”pie” style=”animation-delay: -20s”></div>
<div class=”pie” style=”animation-delay: -60s”></div>
</pre>

CSS 规则:
<pre>
@keyframes spin {
to {
transform: rotate(.5turn);
}
}

@keyframes bg {
50% {
background: #655;
}
}

.pie::before {
/* [Rest of styling stays the same] */
animation: spin 50s linear infinite,
bg 100s step-end infinite;
animation-play-state: paused;
animation-delay: inherit;
}
</pre>

<pre>
$$(‘.pie’).forEach(function(pie) {
var p = pie.textContent;
pie.style.animationDelay = ‘-‘ + parseFloat(p) + ‘s’;
});
</pre>

亚洲必赢官网 22

我们现在不想看看这么些比重,如何做吧?

<pre>
color: transparent;
</pre>

这么字体就看不到了,可是依然是可以选中和打印的。
除此以外,大家得以让那几个百分比居中,防止它被选中时,出现在其余地点。

几点注意的地点:

  • 为了兑现垂直居中,我们可以:

<pre>
height:100px;
line-height:100px;
</pre>

不过尔尔的代码是双重的,只写line-height 就好。

Convert height to line-height (or add a line-height equal to the
height, but that’s pointless code duplication, because line- height
would set the computed height to that as well ).

  • 给伪元素 相对定位,避免字飞出去。
  • text-align:center; 完结程度居中。

终极的代码是那般的:

<pre>

.pie {
opacity: 1;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: yellowgreen;
background-image: linear-gradient(to right ,transparent 50% , #655
0);
}

@keyframes spin {
to {
transform: rotate(.5turn);
}
}

@keyframes bg {
50% {
background: #655;
}
}

.pie::before {
/* [Rest of styling stays the same] */
animation: spin 50s linear infinite,
bg 100s step-end infinite;
animation-play-state: paused;
animation-delay: inherit;
}
</pre>

在线查看:http://scaukk.github.io/css/static\_pie\_chart.html

理所当然,还足以用svg 完毕,篇幅有限,那里就背着了。


题外话:

那是张鑫旭 之前做的 摊鸡蛋饼 动画 XD
http://www.zhangxinxu.com/wordpress/2014/04/css3-pie-loading-waiting-animation/

既然 饼图我都写好了,干脆写点动画,也摊个鸡蛋饼。
规律差不离,有趣味的可以看看。
做客地址:

http://scaukk.github.io/css/pie.html


正文内容大体如同此多,欢迎沟通,欢迎举报,如有错误,还请更正,谢谢阅读。

一、布局###\

考察效果,可以将其分成三个圆和里面的logo,所以简单分为三有些

<div class="overwatch-container">
    <div class="out-ring-container">
    </div>
    <div class="inner-ring-container">
    </div>
    <div class="inner-img">
    </div>
</div>

二、完成外圆效果###\

着眼外面的半圆形,肯定是用clip属性来完成了,明显要用4次,所以里面可以再分为多少个部分,再用before和after几个伪元素,注意选取clip必须是用相对定位元素,具体clip里面的值的话可以逐步调了,借使您是一个游戏迷的话,不仿达成一个和游玩里同样的,多少个月前,当我的心上人圈被那款游戏刷屏的时候,我也想娱乐的,不过当自家打开官网的时候

亚洲必赢官网 23

QQ截图20160816205229.png

亚洲必赢官网 24

自家竟无言以对,尽管本人很匡助正版,可是到底没钱。
把外圆的连带样式丢进来,就可以兑现效益了,那一个重中之重也就在clip了

<div class="overwatch-container">
    <div class="out-ring-container">
                <div class="out-ring1"></div>
        <div class="out-ring2"></div>
    </div>
    <div class="inner-ring-container">
    </div>
    <div class="inner-img">
    </div>
</div>

* {
    margin: 0;
    padding: 0;
}
html {
    height: 100%;
    background: #282828;
}
.overwatch-container {
    width: 232px;
    margin: 50px auto;
    position: relative;
}
.out-ring1 {
    height: 220px;
    width: 220px;
    position: absolute;
    top: 6px;
    left: 6px;
}
.out-ring1::before, .out-ring1::after {
    content: "";
    height: 220px;
    width: 220px;
    border-radius: 50%;
    position: absolute;
    top: -6px;
    left: -6px;
    border: 6px solid rgba(161, 164, 176, 0.5);
}
.out-ring1::before {
    clip: rect(60px, 232px, 172px, 100px);
    transform: rotate(230deg);
}
.out-ring1::after {
    clip: rect(80px, 232px, 152px, 100px);
    transform: rotate(120deg);
}
.out-ring2 {
    position: absolute;
    top: 6px;
    left: 6px;
}
.out-ring2::before, .out-ring2::after {
    content: "";
    height: 220px;
    width: 220px;
    border-radius: 50%;
    position: absolute;
    top: -6px;
    left: -6px;
    border: 6px solid rgba(161, 164, 176, 0.5);
}
.out-ring2::before {
    clip: rect(105px, 232px, 127px, 100px);
}
.out-ring2::after {
    clip: rect(112px, 232px, 120px, 100px);
}

三、logo的实现###\

因为其中的圆的侧重于动画效果,故先写logo,观看logo,可以驾驭,那里看到那里肯定要用到transform:rotate这么些特性,logo中必然是一个大圆,其余部分可以通过方块达成,而最中间的一部分可以用三角来落成,css画三角形使用border就能够,具体的rotate须要具体调

<div class="overwatch-container">
    <div class="out-ring-container">
                <div class="out-ring1"></div>
        <div class="out-ring2"></div>
    </div>
    <div class="inner-ring-container">
    </div>
    <div class="inner-img">
              <div class="inner-img-shelter"></div>
          <div class="inner-img-triangle"></div>
    </div>
</div>

* {
    margin: 0;
    padding: 0;
}
html {
    height: 100%;
    background: #282828;
}
.overwatch-container {
    width: 232px;
    margin: 50px auto;
    position: relative;
}
.out-ring1 {
    height: 220px;
    width: 220px;
    position: absolute;
    top: 6px;
    left: 6px;
}
.out-ring1::before, .out-ring1::after {
    content: "";
    height: 220px;
    width: 220px;
    border-radius: 50%;
    position: absolute;
    top: -6px;
    left: -6px;
    border: 6px solid rgba(161, 164, 176, 0.5);
}
.out-ring1::before {
    clip: rect(60px, 232px, 172px, 100px);
    transform: rotate(230deg);
}
.out-ring1::after {
    clip: rect(80px, 232px, 152px, 100px);
    transform: rotate(120deg);
}
.out-ring2 {
    position: absolute;
    top: 6px;
    left: 6px;
}
.out-ring2::before, .out-ring2::after {
    content: "";
    height: 220px;
    width: 220px;
    border-radius: 50%;
    position: absolute;
    top: -6px;
    left: -6px;
    border: 6px solid rgba(161, 164, 176, 0.5);
}
.out-ring2::before {
    clip: rect(105px, 232px, 127px, 100px);
}
.out-ring2::after {
    clip: rect(112px, 232px, 120px, 100px);
}
.inner-img {
    width: 120px;
    height: 120px;
    border: 20px solid #B6B8C0;
    background: transparent;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 0;
    margin: 36px;
}
.inner-img::before {
    content: "";
    height: 20px;
    width: 66px;
    position: absolute;
    background: #B6B8C0;
    bottom: 0;
    left: 0;
    transform: rotate(-45deg);
    transform-origin: left;
}
.inner-img::after {
    content: "";
    height: 20px;
    width: 66px;
    position: absolute;
    background: #B6B8C0;
    bottom: 0;
    right: 0;
    transform: rotate(45deg);
    transform-origin: right;
}
.inner-img-shelter::before, .inner-img-shelter::after {
    content: "";
    height: 4px;
    width: 21px;
    background: #282828;
    position: absolute;
    top: 15px;
}
.inner-img-shelter::before {
    left: -4px;
    transform: rotate(45deg);
    transform-origin: bottom right;
}
.inner-img-shelter::after {
    right: -4px;
    transform: rotate(-45deg);
    transform-origin: bottom left;
}
.inner-img-triangle::before {
    content: "";
    width: 0px;
    height: 0px;
    border-width: 0px 0px 50px 20px;
    border-left-color: transparent;
    border-bottom-color: #B6B8C0;
    border-style: solid;
    position: absolute;
    top: 20px;
    left: 34px;
}
.inner-img-triangle::after {
    content: "";
    width: 0px;
    height: 0px;
    border-width: 0px 20px 50px 00px;
    border-right-color: transparent;
    border-bottom-color: #B6B8C0;
    border-style: solid;
    position: absolute;
    top: 20px;
    right: 34px;
}

三、已毕里圆效果###\

里圆的功用侧重于动画了,里面的功能都是由此持续调整达成的,我也是看的源代码,里面的效力终究照旧主旨的圆形loading加载动画,一般圆形的进度条我们可以利用方面提到的clip已毕

亚洲必赢官网 25

23333

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title> loading</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
    *{
        margin:0;
        padding:0;
    }
    body{
        width:220px;
        margin:20px auto;
    }
    .loading-container{
        position:relative;
    }
    .loading{
        width:200px;
        height:200px;
        border-radius: 50%;
        border:10px solid yellow;
        animation: loading 2s linear infinite;
        position:absolute;
    }
    .loading2{
        width:200px;
        height:200px;
        border-radius:50%;
        border:10px solid yellow;
        position:absolute;
        transform: rotate(180deg);
        clip:rect(0px,0px,0px,0px);
        animation:loading2 2s  linear infinite;
    }
    @keyframes loading{
        0%{
            clip:rect(0px, 220px,0px,110px);
        }
        50%{
            clip:rect(0px,220px,220px,110px);
        }
        100%{
            clip:rect(0px,220px,220px,110px);
        }
    }
    @keyframes loading2{
        0%{
            clip:rect(0px, 220px,0px,110px);
        }
        50%{
            clip:rect(0px, 220px,0px,110px);
        }
        100%{
            clip:rect(0px, 220px,220px,110px);
        }
    }
</style>
</head>
<body>
    <div class="loading-container">
        <div class="loading"></div>
        <div class="loading2"></div>
    </div>
</body>
</html>

若果因此js添加一些数字就更是形象了

亚洲必赢官网 26

2334.gif

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″>
<title> loading</title>
<meta name=”description” content=””>
<meta name=”keywords” content=””>
<link href=”” rel=”stylesheet”>
<style>
*{
margin:0;
padding:0;
}
body{
width:220px;
margin:20px auto;
}
.loading-container{
position:relative;
}
.loading{
width:200px;
height:200px;
border-radius: 50%;
border:10px solid yellow;
animation: loading 2s linear infinite;
position:absolute;
}
.loading2{
width:200px;
height:200px;
border-radius:50%;
border:10px solid yellow;
position:absolute;
transform: rotate(180deg);
clip:rect(0px,0px,0px,0px);
animation:loading2 2s linear infinite;
}
@keyframes loading{
0%{
clip:rect(0px, 220px,0px,110px);
}
50%{
clip:rect(0px,220px,220px,110px);
}
100%{
clip:rect(0px,220px,220px,110px);
}
}
@keyframes loading2{
0%{
clip:rect(0px, 220px,0px,110px);
}
50%{
clip:rect(0px, 220px,0px,110px);
}
100%{
clip:rect(0px, 220px,220px,110px);
}
}
</style>
</head>
<body>
<div class=”loading-container”>
<div class=”loading”></div>
<div class=”loading2″></div>
</div>
<script>
var number=document.getElementById(“number”);
function changeNumber(){
var text=number.innerText;
var newText=Number(text.replace(/%/, ”));
if(newText<100){
newText++;
}
else{
clearTimeout(timer);
}
number.innerText=newText+”%”;
var timer=setTimeout(changeNumber,20);
}
changeNumber();
</script>
</body>
</html>

使用clip的一个特点是过程中会出现棱角,这个可能不是我们想要的,我们可以使用border来代替,从而消除棱角

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″>
<title> loading2</title>
<meta name=”description” content=””>
<meta name=”keywords” content=””>
<link href=”” rel=”stylesheet”>
<style>
*{
margin:0;
padding:0;
}
body{
width:220px;
margin:20px auto;
}
.loading-container{
position:relative;
}
.loading{
width:110px;
height:220px;
position:absolute;
overflow: hidden;
}
.loading-content{
width:200px;
height:200px;
border:10px solid yellow;
border-radius: 50%;
border-bottom-color:transparent;
border-right-color:transparent;
transform:rotate(-225deg);
animation: loading 2s infinite linear;
}
.loading2{
width:110px;
height:220px;
position:absolute;
overflow: hidden;
right:0;
top:0;
transform:rotate(180deg);
}
.loading2-content{
width:200px;
height:200px;
border:10px solid yellow;
border-radius: 50%;
border-bottom-color:transparent;
border-right-color:transparent;
transform:rotate(-225deg);
animation: loading2 2s infinite linear;
}
.number{
width:220px;
height:40px;
position:absolute;
top:90px;
text-align: center;
font-size: 30px;
font-weight:bold;
}
@keyframes loading{
0%{
transform: rotate(-225deg);
}
50%{
transform: rotate(-225deg);
}
100%{
transform: rotate(-45deg);
}
}
@keyframes loading2{
0%{
transform: rotate(-225deg);
}
50%{
transform: rotate(-45deg);
}
100%{
transform: rotate(-45deg);
}
}
</style>
</head>
<body>
<div class=”loading-container”>
<div class=”loading”>
<div class=”loading-content”></div>
</div>
<div class=”loading2″>
<div class=”loading2-content”></div>
</div>
<div class=”number” id=”number”>0%</div>
</div>
<script>
var number=document.getElementById(“number”);
function changeNumber(){
var text=number.innerText;
var newText=Number(text.replace(/%/, ”));
if(newText<100){
newText++;
}
else{
clearTimeout(timer);
}
number.innerText=newText+”%”;
var timer=setTimeout(changeNumber,20);
}
changeNumber();
</script>
</body>
</html>

而守望先锋的效果也正是这个的延伸的微调,具体可以看源码
####四、添加动画效果####
这里的动画效果没有什么技巧,只是不断的rotate微调而已,具体情况可以参照源码

<div class=”overwatch-container”>
<div class=”out-ring-container”>
<div class=”out-ring1″></div>
<div class=”out-ring2″></div>
</div>
<div class=”inner-ring-container”>
<div class=”inner-ring1″></div>
<div class=”inner-ring2″>
<div class=”inner-ring2-container”>
<div class=”inner-ring2-content”></div>
</div>
</div>
<div class=”inner-ring3″>
<div class=”inner-ring3-container1″>
<div class=”inner-ring3-container1-content”>
<div class=”inner-ring3-content1″></div>
</div>
</div>
<div class=”inner-ring3-container2″>
<div class=”inner-ring3-container2-content”>
<div class=”inner-ring3-content2″></div>
</div>
</div>
</div>
</div>
<div class=”inner-img”>
<div class=”inner-img-shelter”></div>
<div class=”inner-img-triangle”></div>
</div>
</div>

  • {
    margin: 0;
    padding: 0;
    }
    html {
    height: 100%;
    background: #282828;
    }
    .overwatch-container {
    width: 232px;
    亚洲必赢官网,margin: 50px auto;
    position: relative;
    }
    .out-ring1 {
    height: 220px;
    width: 220px;
    position: absolute;
    top: 6px;
    left: 6px;
    }
    .out-ring1::before, .out-ring1::after {
    content: “”;
    height: 220px;
    width: 220px;
    border-radius: 50%;
    position: absolute;
    top: -6px;
    left: -6px;
    border: 6px solid rgba(161, 164, 176, 0.5);
    }
    .out-ring1::before {
    clip: rect(60px, 232px, 172px, 100px);
    transform: rotate(230deg);
    animation: out-ring1-before 3s cubic-bezier(0.34, 0.07, 0.68, 0.93)
    infinite
    }
    .out-ring1::after {
    clip: rect(80px, 232px, 152px, 100px);
    transform: rotate(120deg);
    animation: out-ring1-after 3s linear infinite
    }
    @keyframes out-ring1-before {
    from {
    transform: rotate(0deg);
    }
    to {
    transform: rotate(360deg);
    }
    }
    @keyframes out-ring1-after {
    from {
    transform: rotate(120deg);
    }
    to {
    transform: rotate(480deg);
    }
    }
    .out-ring2 {
    position: absolute;
    top: 6px;
    left: 6px;
    }
    .out-ring2::before, .out-ring2::after {
    content: “”;
    height: 220px;
    width: 220px;
    border-radius: 50%;
    position: absolute;
    top: -6px;
    left: -6px;
    border: 6px solid rgba(161, 164, 176, 0.5);
    }
    .out-ring2::before {
    clip: rect(105px, 232px, 127px, 100px);
    animation: out-ring2-before 3s cubic-bezier(0.34, 0.07, 0.68, 0.93)
    infinite;
    }
    .out-ring2::after {
    clip: rect(112px, 232px, 120px, 100px);
    animation: out-ring2-before 3s linear infinite reverse;
    }
    @keyframes out-ring2-before {
    from {
    transform: rotate(270deg);
    }
    to {
    transform: rotate(-90deg);
    }
    }
    @keyframes out-ring2-after {
    from {
    transform: rotate(120deg);
    }
    to {
    transform: rotate(480deg);
    }
    }
    .inner-img {
    width: 120px;
    height: 120px;
    border: 20px solid #B6B8C0;
    background: transparent;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 0;
    margin: 36px;
    }
    .inner-img::before {
    content: “”;
    height: 20px;
    width: 66px;
    position: absolute;
    background: #B6B8C0;
    bottom: 0;
    left: 0;
    transform: rotate(-45deg);
    transform-origin: left;
    }
    .inner-img::after {
    content: “”;
    height: 20px;
    width: 66px;
    position: absolute;
    background: #B6B8C0;
    bottom: 0;
    right: 0;
    transform: rotate(45deg);
    transform-origin: right;
    }
    .inner-img-shelter::before, .inner-img-shelter::after {
    content: “”;
    height: 4px;
    width: 21px;
    background: #282828;
    position: absolute;
    top: 15px;
    }
    .inner-img-shelter::before {
    left: -4px;
    transform: rotate(45deg);
    transform-origin: bottom right;
    }
    .inner-img-shelter::after {
    right: -4px;
    transform: rotate(-45deg);
    transform-origin: bottom left;
    }
    .inner-img-triangle::before {
    content: “”;
    width: 0px;
    height: 0px;
    border-width: 0px 0px 50px 20px;
    border-left-color: transparent;
    border-bottom-color: #B6B8C0;
    border-style: solid;
    position: absolute;
    top: 20px;
    left: 34px;
    }
    .inner-img-triangle::after {
    content: “”;
    width: 0px;
    height: 0px;
    border-width: 0px 20px 50px 00px;
    border-right-color: transparent;
    border-bottom-color: #B6B8C0;
    border-style: solid;
    position: absolute;
    top: 20px;
    right: 34px;
    }
    .inner-ring-container {
    width: 200px;
    height: 200px;
    position: absolute;
    top: 16px;
    left: 16px;
    background: transform;
    }
    .inner-ring1 {
    width: 180px;
    height: 180px;
    border: 10px solid #F9D64A;
    border-radius: 50%;
    position: absolute;
    clip: rect(90px, 200px, 110px, 110px);
    animation: inner-ring1 3s infinite linear;
    z-index: 2;
    }
    @keyframes inner-ring1 {
    from {
    transform: rotate(0deg);
    }
    to {
    transform: rotate(-360deg);
    }
    }
    .inner-ring3 {
    width: 200px;
    height: 200px;
    background: transparent;
    position: absolute;
    top: 0;
    left: 0;
    animation: inner-ring3 infinite 2s linear;
    }
    .inner-ring3-container1 {
    width: 100px;
    height: 200px;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    }
    .inner-ring3-container1-content {
    width: 200px;
    height: 200px;
    position: absolute;
    animation: inner-ring3-container1-content 2s cubic-bezier(0, 0.5,
    0.5, 1) infinite;
    }
    .inner-ring3-content1 {
    height: 180px;
    width: 180px;
    border-radius: 50%;
    border: 10px solid #4D4C2D;
    border-bottom-color: transparent;
    border-right-color: transparent;
    transform: rotate(-45deg);
    animation: inner-ring3-content1 2s linear infinite;
    }
    @keyframes inner-ring3 {
    from {
    transform: rotate(0deg);
    }
    to {
    transform: rotate(360deg);
    }
    }
    @keyframes inner-ring3-content1 {
    from {
    transform: rotate(-45deg);
    }
    35.5% {
    transform: rotate(-45deg);
    }
    50% {
    transform: rotate(135deg);
    }
    to {
    transform: rotate(135deg);
    }
    }
    @keyframes inner-ring3-container1-content {
    0% {
    transform: rotate(0deg);
    }
    64.5% {
    transform: rotate(0deg);
    }
    100% {
    transform: rotate(180deg);
    }
    }
    .inner-ring3-container2 {
    width: 100px;
    height: 200px;
    overflow: hidden;
    position: absolute;
    top: 0;
    right: 0;
    }
    .inner-ring3-container2-content {
    width: 200px;
    height: 200px;
    position: absolute;
    top: 0;
    left: -100px;
    animation: inner-ring3-container2-content linear 2s infinite;
    }
    .inner-ring3-content2 {
    height: 180px;
    width: 180px;
    border-radius: 50%;
    border: 10px solid #4D4C2D;
    border-bottom-color: transparent;
    border-left-color: transparent;
    transform: rotate(45deg);
    animation: inner-ring3-content2 2s cubic-bezier(0.5, 0, 1, 0.5)
    infinite;
    }
    @keyframes inner-ring3-content2 {
    from {
    transform: rotate(45deg);
    }
    35.5% {
    transform: rotate(225deg);
    }
    to {
    transform: rotate(225deg);
    }
    }
    @keyframes inner-ring3-container2-content {
    0% {
    transform: rotate(0deg);
    }
    50% {
    transform: rotate(0deg);
    }
    64.5% {
    transform: rotate(180deg);
    }
    100% {
    transform: rotate(180deg);
    }
    }
    .inner-ring2 {
    width: 200px;
    height: 200px;
    z-index: 2;
    position: absolute;
    animation: inner-ring2 infinite 2s linear;
    }
    .inner-ring2-container {
    width: 100px;
    height: 200px;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    }
    .inner-ring2-content {
    height: 180px;
    width: 180px;
    border-radius: 50%;
    border: 10px solid #F9D64A;
    border-bottom-color: transparent;
    border-right-color: transparent;
    z-index: 2;
    animation: inner-ring2-content infinite linear 2s;
    }
    @keyframes inner-ring2 {
    0% {
    transform: rotate(0deg);
    }
    50% {
    transform: rotate(90deg);
    }
    100% {
    transform: rotate(360deg);
    }
    }
    @keyframes inner-ring2-content {
    0% {
    transform: rotate(-205deg);
    }
    50% {
    transform: rotate(-135deg);
    }
    100% {
    transform: rotate(-205deg);
    }
    }

网站地图xml地图