用css3写一个守望先锋的loading动画,绘制你须求的几何图形

用 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%;
用css3写一个守望先锋的loading动画,绘制你须求的几何图形。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地图