金沙棋牌官方平台

当前位置:金沙棋牌 > 金沙棋牌官方平台 > CSS3制作精美的iphone电话图标,css3实现的小丸子和

CSS3制作精美的iphone电话图标,css3实现的小丸子和

来源:http://www.logblo.com 作者:金沙棋牌 时间:2019-11-09 19:47

用 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

The problem

饼图,随处可见,但是真正去实现,还是要下点功夫的。
比如我们要创建一个进度指示器,或者计时显示器,通常涉及使用外部图像编辑器为饼图的多个值创建图像,或使用js脚本设计更为复杂的图表。

现在有其他更好的方式去实现。

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...

100% {
transform:scale(1,1);
}
}
body{
background: #ffef5e;
}
body,div{
margin: 0;
padding: 0;
background: #ffef5e;
}
.border{
border:1px solid #152131;
}
.main{
position: relative;
width: 700px;
margin: 50px auto;
}
.me{
position: absolute;
top: 250px;
left: 100px;
z-index: 10;
.hairs{
background: #152131;
width: 190px;
height: 250px;
border-radius: 50% 50% 0 0;
left: -30px;
top: -50px;
position: absolute;
overflow: hidden;
&:after{
content: '';
position: absolute;
width: 300px;
height: 200px;
background: #ffef5e;
top: 120px;
}
.hair{
width: 35px;
height: 45px;
background: #152131;
position: absolute;
z-index: 1;
transform: rotate(70deg) scale(1) skew(44deg) translate(8px);
&.hair1{
top: 17px;
left: 27px;
}
&.hair2{
top: 8px;
left: 52px;
}
&.hair3{
top: 4px;
left: 73px;
}
&.hair4{
top: 0;
left: 90px;
}
&.hair5{
top: 4px;
left:108px;
}
&.hair6{
top: 8px;
left: 125px;
}
&.hair7{
top: 17px;
right: 17px;
}
}
}
.face{
background: #fbdac7;
width: 130px;
height: 100px;
position: absolute;
top: 0;
border-radius: 20px 20px 50px 50px;
&:after{ //脖子
content: "";
width: 14px;
height: 10px;
background: #fbdac7;
position: absolute;
bottom:-12px;
left: 50%;
margin-left: -7px;
.border;
}
.border;
.brow{
width: 42px;
height: 10px;
background: #152131;
position: absolute;
top: 26px;
border-radius: 50%;
&:after{
content: "";
background: #fbdac7;
position: absolute;
width: 50px;
height: 10px;
top: 1px;
border-radius: 50%;
}
&.left-brow{
left : 18px;
transform:rotate(-10deg);
}
&.right-brow{
right: 14px;
transform:rotate(10deg);
}
}
.eye{
width: 14px;
height: 14px;
border-radius: 50%;
background: #000;
position: absolute;
top: 40px;
z-index: 2;
&.left-eye{
left: 32%;
}
&.right-eye{
right: 32%;
//animation: eye 1s infinite ease;
}
}
.blusher{
width: 12px;
height: 12px;
border-radius: 50%;
background: #f79c99;
position: absolute;
top: 70px;
&.left-blusher{
left: 8px;
}
&.right-blusher{
right: 8px;
}
}
.mouth{
.border;
z-index: 1;
width: 30px;
height: 30px;
background: #d96b6e;
position: absolute;
top: 50px;
left: 50px;
border-radius: 50%;
&:after{
content: "";
width: 60px;
height: 30px;
background: #fbdac7;
position: absolute;
top: -10px;
left: -20px;
border-radius: 30%;
}
}
.ear{
width: 10px;
height: 20px;
background: #fbdac7;
position: absolute;
top: 30px;
z-index: 2;
&.left-ear{
left: -11px;
border-radius: 5px 0 0 10px;
}
&.right-ear{
right: -11px;
border-radius: 0 5px 10px 0;
}
}
}
.clothes{
background: #fff;
width: 70px;
height: 80px;
position: absolute;
top:112px;
left: 31px;
z-index: 2;
border-radius: 30% 30% 10px 10px;
overflow: hidden;
.border;
.sleeve{
background: #fff;
width: 40px;
height: 40px;
position: absolute;
top: 10px;
border-radius: 10px;
}
// &:before{ //左袖子
// content: "";
// .sleeve;
// left: -10px;
// transform:rotate(50deg);
// }
// &:after{ //右袖子
// content :"";
// .sleeve;
// right: -10px;
// transform:rotate(-50deg);
// }
.collar{
z-index: 3;
position: absolute;
.border;
width: 20px;
height: 10px;
background: #fff;
&.left-collar{
left: 12px;
transform:rotate(50deg);
}
&.right-collar{
right: 12px;
transform:rotate(-50deg);
}
}
.straps{
z-index: 2;
position: absolute;
width: 6px;
height: 100px;
background: #e9003a;
.border;
&.left-straps{
left: 12px;
}
&.right-straps{
right: 12px;
}
}
}
.arm{
width: 70px;
height: 70px;
border-radius: 50%;
background: #fff;
.border;
z-index: 1;
position: absolute;
top: 115px;
z-index: 0;
&.left-arm{
left: 10px;
&:after{
content: "";
position: absolute;
background:#ffef5e;
width: 60px;
height: 60px;
left: 12px;
top: 5px;
border-radius: 50%;
.border;
}
}
&.right-arm{
left: 52px;
&:after{
content: "";
position: absolute;
background:#ffef5e;
width: 60px;
height: 60px;
left: -4px;
top: 5px;
border-radius: 50%;
.border;
}
}
}
.belt{
background: #ed023a;
border: 1px solid #152131;
height: 10px;
left: 31px;
position: absolute;
top: 182px;
width: 70px;
z-index: 3;
}
.skirt{
background: #ed023a;
position: absolute;
background: none;
border-color: #e9003a transparent;
border-image: none;
border-style: solid;
border-width: 0px 30px 50px;
height: 0;
left: 1px;
position: absolute;
top: 194px;
width: 72px;
z-index: 3;
border-radius: 0 0 50% 50%;
.line{
width: 1px;
height: 30px;
position: absolute;
background: #000;
top:10px;
transform-origin:0 0;
&.line1{
left: 10px;
transform:rotate(20deg);
}
&.line2{
left: 25px;
transform:rotate(10deg);
}
&.line3{
left: 35px;
}
&.line4{
right: 25px;
transform:rotate(-10deg);
}
&.line5{
right: 10px;
transform:rotate(-20deg);
}
}
}
.leg{
width: 12px;
height: 40px;
background: #fadbc7;
.border;
position: absolute;
top: 220px;
z-index: 2;
&.left-leg{
left: 40px;
}
&.right-leg{
left: 78px;
}
&:after{
content: '';
width: 12px;
height: 16px;
background: #fff;
.border;
border-bottom: 0;
top: 40px;
left: -1px;
position: absolute;
}
}
.stockings{
width: 28px;
height: 12px;
background: #fff;
.border;
position: absolute;
z-index: 1;
transform-origin:0 0;
&.left-stockings{
left: 21px;
top: 275px;
transform:rotate(-20deg);
border-radius: 50% 0 0 50%;
}
&.right-stockings{
left: 83px;
top: 265px;
transform:rotate(20deg);
border-radius: 0 50% 50% 0;
}
}
.shoes{
width: 40px;
height: 17px;
position: absolute;
z-index: 0;
background: #a23030;
transform-origin:0 0;
border-radius: 50%;
&.left-shoes{
left: 13px;
top: 280px;
transform:rotate(-20deg);
border-radius: 50% 0 0 50%;
}
&.right-shoes{
left: 81px;
top: 267px;
transform:rotate(20deg);
border-radius: 0 50% 50% 0;
}
}
}

transform solution

首先,我们来画一个圆:

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

图片 17

既然是饼图,比如双色饼图,就需要另一种颜色来显示进度,再画一个半圆:

可以用渐变来做:

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

图片 18

我们还需要创建一个遮罩层:虚线部分。

<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>

图片 19

旋转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>

图片 20

就像这样

一个显示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>

图片 21

我们现在不想看到这个百分比,怎么办呢?

<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


本文内容大概就这么多,欢迎交流,欢迎反馈,如有错误,还请纠正,谢谢阅读。

<div class="clothes">
<div class="collar left-collar"></div>
<div class="collar right-collar"></div>
<div class="straps left-straps"></div>
<div class="straps right-straps"></div>
</div>


<div class="clothes">
<div class="collar"></div>
<div class="cover"></div>
</div>
<div class="hand"></div>

<div class="bangs">
<div class="bang bang1"></div>
<div class="bang bang2"></div>
<div class="bang bang3"></div>
</div>

.grandpa{
position: absolute;
top: 40px;
left: 280px;
z-index: 10;
width: 126px;
.hairs{
position: absolute;

less代码

</div>
</body>
</html>

<div class="mouth"></div>

@keyframes eye {
0% {
transform:scale(1,1);
}
20% {
transform:scale(1,0.1);
}

&:after{
content: "";
position: absolute;
border-radius: 50%;
width: 34px;
height: 55px;
background: #f8bb9f;
top: 1px;
left: 0px;
}
&.left-eye{
left: 20px;
transform:rotate(30deg);

<div class="arm left-arm"></div>
<div class="arm right-arm"></div>

<div class="brow left-brow"></div>
<div class="brow right-brow"></div>

<div class="trousers"></div>
<div class="footer left-footer"></div>
<div class="footer right-footer"></div>
<div class="shoes left-shoes"></div>
<div class="shoes right-shoes"></div>

<div class="belt"></div>
<div class="skirt">
<div class="line line1"></div>
<div class="line line2"></div>
<div class="line line3"></div>
<div class="line line4"></div>
<div class="line line5"></div>
</div>
<div class="leg left-leg"></div>
<div class="leg right-leg"></div>

<div class="nose"></div>

<div class="blusher left-blusher"></div>
<div class="blusher right-blusher"></div>

HTML代码

<div class="wrinkle wrinkle1"></div>
<div class="wrinkle wrinkle2"></div>

z-index: 3;
width: 126px;
.hair{
background: #152131;
width: 1px;
height: 5px;
position: absolute;
&.hair1{
left: 40px;
top: 12px;
}
&.hair2{
left: 50px;
top: 8px;
}
&.hair3{
left: 62px;
top: 5px;
}
&.hair4{
right: 50px;
top: 8px;
}
&.hair5{
right: 40px;
top: 12px;
}
}
}
.ear{
width: 20px;
height: 20px;
background: #f8bb9f;
.border;
position: absolute;
top: 90px;
border-radius: 50%;
z-index: 1;
&.left-ear{
left: -10px;
}
&.right-ear{
right: -10px;
}
}
.header{
top: 10px;
position: absolute;
width: 126px;
height: 180px;
background: #f8bb9f;
display: block;
border-radius: 175% 175% 150% 150%;
z-index: 2;
.border;
&:after{
background: #f8bb9f;
bottom: -12px;
content: "";
height: 10px;
left: 50%;
margin-left: -7px;
position: absolute;
width: 14px;
.border;
}
.bang{
background: #152131;
width: 1px;
height: 3px;
position: absolute;
z-index: 1;
top: 12px;
&.bang1{
left: 50px;
transform:rotate(-20deg);
}
&.bang2{
left: 63px;
}
&.bang3{
right:50px;
transform:rotate(20deg);
}
}
.wrinkle{
position: absolute;
height: 1px;
background: #152131;
border-radius: 50%;
&.wrinkle1{
top: 30px;
width:30px;
left: 48px;
}
&.wrinkle2{
top: 40px;
width:20px;
left: 53px;
}
}
.brow{
position: absolute;
top: 60px;
width: 50px;
height: 30px;
border-radius: 50%;
background: #152131;
&:after{
content: "";
position: absolute;
border-radius: 50%;
width: 60px;
height: 30px;
background: #f8bb9f;
top: 1px;
left: -1px;
}
&.left-brow{
left: 20px;
transform:rotate(10deg);
}
&.right-brow{
left: 67px;
transform:rotate(10deg);
}
}
.eye{
position: absolute;
top: 80px;
width: 30px;
height: 50px;
border-radius: 50%;
background: #152131;

 CSS代码

<div class="grandpa">
<div class="hairs">
<div class="hair hair1"></div>
<div class="hair hair2"></div>
<div class="hair hair3"></div>
<div class="hair hair4"></div>
<div class="hair hair5"></div>
</div>
<div class="ear left-ear"></div>
<div class="ear right-ear"></div>
<div class="header">

.clothes{
background: #a5d1d2;
width: 100px;
position: absolute;
top: 200px;
height: 130px;
left: 14px;
border-radius: 50% 50% 10% 10%;
z-index: 2;
.border;
.cover{
border-radius: 50% 50% 10% 10%;
width: 102px;
height: 60px;
background: #a5d1d2;
position: absolute;
top: 0;
z-index: 3;
}
.collar{
border-radius: 50% 50% 10% 10%;
height: 130px;
width: 100px;
position: absolute;
z-index: 4;
background: #a5d1d2;
overflow: hidden;
&:after{
content: "";
position: absolute;
width: 40px;
height: 40px;
border-radius: 50%;
background: #a5d1d2;
left: 30px;
top: -20px;
.border;
z-index: 5;
}
}
}
.hand{
.border;
z-index: 1;
background: #a5d1d2;
border: 1px solid #152131;
border-radius: 90% 90% 50% 50%;
height: 110px;
left: -13px;
position: absolute;
top: 200px;
width: 150px;
}
.trousers{
.border;
height: 140px;
left: 16px;
position: absolute;
top: 331px;
width: 96px;
background: #6c8d6e;
&:after{
content: "";
transform: rotate(82deg) scale(0.825) skew(70deg) translate(0px);
height: 100px;
width: 400px;
background: #ffef5e;
height: 100px;
left: -152px;
position: absolute;
top: 250px;
}
}
.footer{
width: 30px;
height: 15px;
background: #a18883;
position: absolute;
top: 473px;
&.left-footer{
width: 25px;
left: 16px;
}
&.right-footer{
left: 84px;
}
}
.shoes{
width: 45px;
height: 18px;
position: absolute;
top: 483px;
background: #555a6d;
&.left-shoes{
border-radius: 50% 0 30% 50%;
left: -4px;
transform:rotate(-10deg);
}
&.right-shoes{
border-radius: 0 50% 50% 30%;
left: 84px;
transform:rotate(10deg);
}
}
}

 

<div class="stockings left-stockings"></div>
<div class="stockings right-stockings"></div>

<div class="eye left-eye"></div>
<div class="eye right-eye"></div>

<div class="shoes left-shoes"></div>
<div class="shoes right-shoes"></div>
</div>

@-webkit-keyframes eye {
/* line 2, main.less */
0% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
/* line 5, main.less */
20% {
-webkit-transform: scale(1, 0.1);
transform: scale(1, 0.1);
}
/* line 9, main.less */
100% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
}
@keyframes eye {
/* line 2, main.less */
0% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
/* line 5, main.less */
20% {
-webkit-transform: scale(1, 0.1);
transform: scale(1, 0.1);
}
/* line 9, main.less */
100% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
}
/* line 13, main.less */
body {
background: #ffef5e;
}
/* line 16, main.less */
body,
div {
margin: 0;
padding: 0;
background: #ffef5e;
}
/* line 21, main.less */
.border {
border: 1px solid #152131;
}
/* line 24, main.less */
.main {
position: relative;
width: 700px;
margin: 50px auto;
}
/* line 29, main.less */
.me {
position: absolute;
top: 250px;
left: 100px;
z-index: 10;
}
/* line 34, main.less */
.me .hairs {
background: #152131;
width: 190px;
height: 250px;
border-radius: 50% 50% 0 0;
left: -30px;
top: -50px;
position: absolute;
overflow: hidden;
}
/* line 43, main.less */
.me .hairs:after {
content: '';
position: absolute;
width: 300px;
height: 200px;
background: #ffef5e;
top: 120px;
}
/* line 51, main.less */
.me .hairs .hair {
width: 35px;
height: 45px;
background: #152131;
position: absolute;
z-index: 1;
-webkit-transform: rotate(70deg) scale(1) skew(44deg) translate(8px);
-ms-transform: rotate(70deg) scale(1) skew(44deg) translate(8px);
transform: rotate(70deg) scale(1) skew(44deg) translate(8px);
}
/* line 58, main.less */
.me .hairs .hair.hair1 {
top: 17px;
left: 27px;
}
/* line 62, main.less */
.me .hairs .hair.hair2 {
top: 8px;
left: 52px;
}
/* line 66, main.less */
.me .hairs .hair.hair3 {
top: 4px;
left: 73px;
}
/* line 70, main.less */
.me .hairs .hair.hair4 {
top: 0;
left: 90px;
}
/* line 74, main.less */
.me .hairs .hair.hair5 {
top: 4px;
left: 108px;
}
/* line 78, main.less */
.me .hairs .hair.hair6 {
top: 8px;
left: 125px;
}
/* line 82, main.less */
.me .hairs .hair.hair7 {
top: 17px;
right: 17px;
}
/* line 88, main.less */
.me .face {
background: #fbdac7;
width: 130px;
height: 100px;
position: absolute;
top: 0;
border-radius: 20px 20px 50px 50px;
border: 1px solid #152131;
}
/* line 95, main.less */
.me .face:after {
content: "";
width: 14px;
height: 10px;
background: #fbdac7;
position: absolute;
bottom: -12px;
left: 50%;
margin-left: -7px;
border: 1px solid #152131;
}
/* line 107, main.less */
.me .face .brow {
width: 42px;
height: 10px;
background: #152131;
position: absolute;
top: 26px;
border-radius: 50%;
}
/* line 114, main.less */
.me .face .brow:after {
content: "";
background: #fbdac7;
position: absolute;
width: 50px;
height: 10px;
top: 1px;
border-radius: 50%;
}
/* line 123, main.less */
.me .face .brow.left-brow {
left: 18px;
-webkit-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
transform: rotate(-10deg);
}
/* line 127, main.less */
.me .face .brow.right-brow {
right: 14px;
-webkit-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);
}
/* line 132, main.less */
.me .face .eye {
width: 14px;
height: 14px;
border-radius: 50%;
background: #000;
position: absolute;
top: 40px;
z-index: 2;
}
/* line 140, main.less */
.me .face .eye.left-eye {
left: 32%;
}
/* line 143, main.less */
.me .face .eye.right-eye {
right: 32%;
}
/* line 148, main.less */
.me .face .blusher {
width: 12px;
height: 12px;
border-radius: 50%;
background: #f79c99;
position: absolute;
top: 70px;
}
/* line 155, main.less */
.me .face .blusher.left-blusher {
left: 8px;
}
/* line 158, main.less */
.me .face .blusher.right-blusher {
right: 8px;
}
/* line 162, main.less */
.me .face .mouth {
border: 1px solid #152131;
z-index: 1;
width: 30px;
height: 30px;
background: #d96b6e;
position: absolute;
top: 50px;
left: 50px;
border-radius: 50%;
}
/* line 172, main.less */
.me .face .mouth:after {
content: "";
width: 60px;
height: 30px;
background: #fbdac7;
position: absolute;
top: -10px;
left: -20px;
border-radius: 30%;
}
/* line 183, main.less */
.me .face .ear {
width: 10px;
height: 20px;
background: #fbdac7;
position: absolute;
top: 30px;
z-index: 2;
}
/* line 190, main.less */
.me .face .ear.left-ear {
left: -11px;
border-radius: 5px 0 0 10px;
}
/* line 194, main.less */
.me .face .ear.right-ear {
right: -11px;
border-radius: 0 5px 10px 0;
}
/* line 200, main.less */
.me .clothes {
background: #fff;
width: 70px;
height: 80px;
position: absolute;
top: 112px;
left: 31px;
z-index: 2;
border-radius: 30% 30% 10px 10px;
overflow: hidden;
border: 1px solid #152131;
}
/* line 211, main.less */
.me .clothes .sleeve {
background: #fff;
width: 40px;
height: 40px;
position: absolute;
top: 10px;
border-radius: 10px;
}
/* line 231, main.less */
.me .clothes .collar {
z-index: 3;
position: absolute;
border: 1px solid #152131;
width: 20px;
height: 10px;
background: #fff;
}
/* line 238, main.less */
.me .clothes .collar.left-collar {
left: 12px;
-webkit-transform: rotate(50deg);
-ms-transform: rotate(50deg);
transform: rotate(50deg);
}
/* line 242, main.less */
.me .clothes .collar.right-collar {
right: 12px;
-webkit-transform: rotate(-50deg);
-ms-transform: rotate(-50deg);
transform: rotate(-50deg);
}
/* line 247, main.less */
.me .clothes .straps {
z-index: 2;
position: absolute;
width: 6px;
height: 100px;
background: #e9003a;
border: 1px solid #152131;
}
/* line 254, main.less */
.me .clothes .straps.left-straps {
left: 12px;
}
/* line 257, main.less */
.me .clothes .straps.right-straps {
right: 12px;
}
/* line 262, main.less */
.me .arm {
width: 70px;
height: 70px;
border-radius: 50%;
background: #fff;
border: 1px solid #152131;
z-index: 1;
position: absolute;
top: 115px;
z-index: 0;
}
/* line 272, main.less */
.me .arm.left-arm {
left: 10px;
}
/* line 274, main.less */
.me .arm.left-arm:after {
content: "";
position: absolute;
background: #ffef5e;
width: 60px;
height: 60px;
left: 12px;
top: 5px;
border-radius: 50%;
border: 1px solid #152131;
}
/* line 286, main.less */
.me .arm.right-arm {
left: 52px;
}
/* line 288, main.less */
.me .arm.right-arm:after {
content: "";
position: absolute;
background: #ffef5e;
width: 60px;
height: 60px;
left: -4px;
top: 5px;
border-radius: 50%;
border: 1px solid #152131;
}
/* line 301, main.less */
.me .belt {
background: #ed023a;
border: 1px solid #152131;
height: 10px;
left: 31px;
position: absolute;
top: 182px;
width: 70px;
z-index: 3;
}
/* line 311, main.less */
.me .skirt {
background: #ed023a;
background: none;
border-color: #e9003a transparent;
-webkit-border-image: none;
-o-border-image: none;
border-image: none;
border-style: solid;
border-width: 0px 30px 50px;
height: 0;
left: 1px;
position: absolute;
top: 194px;
width: 72px;
z-index: 3;
border-radius: 0 0 50% 50%;
}
/* line 326, main.less */
.me .skirt .line {
width: 1px;
height: 30px;
position: absolute;
background: #000;
top: 10px;
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
}
/* line 333, main.less */
.me .skirt .line.line1 {
left: 10px;
-webkit-transform: rotate(20deg);
-ms-transform: rotate(20deg);
transform: rotate(20deg);
}
/* line 337, main.less */
.me .skirt .line.line2 {
left: 25px;
-webkit-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);
}
/* line 341, main.less */
.me .skirt .line.line3 {
left: 35px;
}
/* line 344, main.less */
.me .skirt .line.line4 {
right: 25px;
-webkit-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
transform: rotate(-10deg);
}
/* line 348, main.less */
.me .skirt .line.line5 {
right: 10px;
-webkit-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
transform: rotate(-20deg);
}
/* line 354, main.less */
.me .leg {
width: 12px;
height: 40px;
background: #fadbc7;
border: 1px solid #152131;
position: absolute;
top: 220px;
z-index: 2;
}
/* line 362, main.less */
.me .leg.left-leg {
left: 40px;
}
/* line 365, main.less */
.me .leg.right-leg {
left: 78px;
}
/* line 368, main.less */
.me .leg:after {
content: '';
width: 12px;
height: 16px;
background: #fff;
border: 1px solid #152131;
border-bottom: 0;
top: 40px;
left: -1px;
position: absolute;
}
/* line 380, main.less */
.me .stockings {
width: 28px;
height: 12px;
background: #fff;
border: 1px solid #152131;
position: absolute;
z-index: 1;
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
}
/* line 388, main.less */
.me .stockings.left-stockings {
left: 21px;
top: 275px;
-webkit-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
transform: rotate(-20deg);
border-radius: 50% 0 0 50%;
}
/* line 394, main.less */
.me .stockings.right-stockings {
left: 83px;
top: 265px;
-webkit-transform: rotate(20deg);
-ms-transform: rotate(20deg);
transform: rotate(20deg);
border-radius: 0 50% 50% 0;
}
/* line 401, main.less */
.me .shoes {
width: 40px;
height: 17px;
position: absolute;
z-index: 0;
background: #a23030;
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
border-radius: 50%;
}
/* line 409, main.less */
.me .shoes.left-shoes {
left: 13px;
top: 280px;
-webkit-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
transform: rotate(-20deg);
border-radius: 50% 0 0 50%;
}
/* line 415, main.less */
.me .shoes.right-shoes {
left: 81px;
top: 267px;
-webkit-transform: rotate(20deg);
-ms-transform: rotate(20deg);
transform: rotate(20deg);
border-radius: 0 50% 50% 0;
}
/* line 424, main.less */
.grandpa {
position: absolute;
top: 40px;
left: 280px;
z-index: 10;
width: 126px;
}
/* line 430, main.less */
.grandpa .hairs {
position: absolute;
z-index: 3;
width: 126px;
}
/* line 435, main.less */
.grandpa .hairs .hair {
background: #152131;
width: 1px;
height: 5px;
position: absolute;
}
/* line 440, main.less */
.grandpa .hairs .hair.hair1 {
left: 40px;
top: 12px;
}
/* line 444, main.less */
.grandpa .hairs .hair.hair2 {
left: 50px;
top: 8px;
}
/* line 448, main.less */
.grandpa .hairs .hair.hair3 {
left: 62px;
top: 5px;
}
/* line 452, main.less */
.grandpa .hairs .hair.hair4 {
right: 50px;
top: 8px;
}
/* line 456, main.less */
.grandpa .hairs .hair.hair5 {
right: 40px;
top: 12px;
}
/* line 462, main.less */
.grandpa .ear {
width: 20px;
height: 20px;
background: #f8bb9f;
border: 1px solid #152131;
position: absolute;
top: 90px;
border-radius: 50%;
z-index: 1;
}
/* line 471, main.less */
.grandpa .ear.left-ear {
left: -10px;
}
/* line 474, main.less */
.grandpa .ear.right-ear {
right: -10px;
}
/* line 478, main.less */
.grandpa .header {
top: 10px;
position: absolute;
width: 126px;
height: 180px;
background: #f8bb9f;
display: block;
border-radius: 175% 175% 150% 150%;
z-index: 2;
border: 1px solid #152131;
}
/* line 488, main.less */
.grandpa .header:after {
background: #f8bb9f;
bottom: -12px;
content: "";
height: 10px;
left: 50%;
margin-left: -7px;
position: absolute;
width: 14px;
border: 1px solid #152131;
}
/* line 499, main.less */
.grandpa .header .bang {
background: #152131;
width: 1px;
height: 3px;
position: absolute;
z-index: 1;
top: 12px;
}
/* line 506, main.less */
.grandpa .header .bang.bang1 {
left: 50px;
-webkit-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
transform: rotate(-20deg);
}
/* line 510, main.less */
.grandpa .header .bang.bang2 {
left: 63px;
}
/* line 513, main.less */
.grandpa .header .bang.bang3 {
right: 50px;
-webkit-transform: rotate(20deg);
-ms-transform: rotate(20deg);
transform: rotate(20deg);
}
/* line 518, main.less */
.grandpa .header .wrinkle {
position: absolute;
height: 1px;
background: #152131;
border-radius: 50%;
}
/* line 523, main.less */
.grandpa .header .wrinkle.wrinkle1 {
top: 30px;
width: 30px;
left: 48px;
}
/* line 528, main.less */
.grandpa .header .wrinkle.wrinkle2 {
top: 40px;
width: 20px;
left: 53px;
}
/* line 534, main.less */
.grandpa .header .brow {
position: absolute;
top: 60px;
width: 50px;
height: 30px;
border-radius: 50%;
background: #152131;
}
/* line 541, main.less */
.grandpa .header .brow:after {
content: "";
position: absolute;
border-radius: 50%;
width: 60px;
height: 30px;
background: #f8bb9f;
top: 1px;
left: -1px;
}
/* line 551, main.less */
.grandpa .header .brow.left-brow {
left: 20px;
-webkit-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);
}
/* line 555, main.less */
.grandpa .header .brow.right-brow {
left: 67px;
-webkit-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);
}
/* line 560, main.less */
.grandpa .header .eye {
position: absolute;
top: 80px;
width: 30px;
height: 50px;
border-radius: 50%;
background: #152131;
}
/* line 568, main.less */
.grandpa .header .eye:after {
content: "";
position: absolute;
border-radius: 50%;
width: 34px;
height: 55px;
background: #f8bb9f;
top: 1px;
left: 0px;
}
/* line 578, main.less */
.grandpa .header .eye.left-eye {
left: 20px;
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(30deg);
}
/* line 583, main.less */
.grandpa .header .eye.right-eye {
left: 80px;
top: 79px;
-webkit-transform: rotate(-40deg) rotateY(160deg);
transform: rotate(-40deg) rotateY(160deg);
}
/* line 589, main.less */
.grandpa .header .nose {
width: 6px;
height: 22px;
position: absolute;
top: 105px;
left: 58px;
background: #f8bb9f;
z-index: 2;
border: 1px solid #152131;
border-radius: 50%;
}
/* line 599, main.less */
.grandpa .header .nose:after {
content: "";
position: absolute;
width: 4px;
height: 22px;
top: -5px;
left: 1px;
background: #f8bb9f;
}
/* line 609, main.less */
.grandpa .header .mouth {
border: 1px solid #152131;
z-index: 1;
width: 30px;
height: 30px;
background: #d96b6e;
position: absolute;
top: 130px;
left: 46px;
border-radius: 50%;
}
/* line 619, main.less */
.grandpa .header .mouth:after {
content: "";
width: 60px;
height: 30px;
background: #f8bb9f;
position: absolute;
top: -10px;
left: -20px;
border-radius: 50%;
}
/* line 632, main.less */
.grandpa .clothes {
background: #a5d1d2;
width: 100px;
position: absolute;
top: 200px;
height: 130px;
left: 14px;
border-radius: 50% 50% 10% 10%;
z-index: 2;
border: 1px solid #152131;
}
/* line 642, main.less */
.grandpa .clothes .cover {
border-radius: 50% 50% 10% 10%;
width: 102px;
height: 60px;
background: #a5d1d2;
position: absolute;
top: 0;
z-index: 3;
}
/* line 651, main.less */
.grandpa .clothes .collar {
border-radius: 50% 50% 10% 10%;
height: 130px;
width: 100px;
position: absolute;
z-index: 4;
background: #a5d1d2;
overflow: hidden;
}
/* line 659, main.less */
.grandpa .clothes .collar:after {
content: "";
position: absolute;
width: 40px;
height: 40px;
border-radius: 50%;
background: #a5d1d2;
left: 30px;
top: -20px;
border: 1px solid #152131;
z-index: 5;
}
/* line 673, main.less */
.grandpa .hand {
z-index: 1;
background: #a5d1d2;
border: 1px solid #152131;
border-radius: 90% 90% 50% 50%;
height: 110px;
left: -13px;
position: absolute;
top: 200px;
width: 150px;
}
/* line 685, main.less */
.grandpa .trousers {
border: 1px solid #152131;
height: 140px;
left: 16px;
position: absolute;
top: 331px;
width: 96px;
background: #6c8d6e;
}
/* line 693, main.less */
.grandpa .trousers:after {
content: "";
-webkit-transform: rotate(82deg) scale(0.825) skew(70deg) translate(0px);
-ms-transform: rotate(82deg) scale(0.825) skew(70deg) translate(0px);
transform: rotate(82deg) scale(0.825) skew(70deg) translate(0px);
width: 400px;
background: #ffef5e;
height: 100px;
left: -152px;
position: absolute;
top: 250px;
}
/* line 705, main.less */
.grandpa .footer {
width: 30px;
height: 15px;
background: #a18883;
position: absolute;
top: 473px;
}
/* line 711, main.less */
.grandpa .footer.left-footer {
width: 25px;
left: 16px;
}
/* line 715, main.less */
.grandpa .footer.right-footer {
left: 84px;
}
/* line 719, main.less */
.grandpa .shoes {
width: 45px;
height: 18px;
position: absolute;
top: 483px;
background: #555a6d;
}
/* line 725, main.less */
.grandpa .shoes.left-shoes {
border-radius: 50% 0 30% 50%;
left: -4px;
-webkit-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
transform: rotate(-10deg);
}
/* line 730, main.less */
.grandpa .shoes.right-shoes {
border-radius: 0 50% 50% 30%;
left: 84px;
-webkit-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);
}

 

<div class="face">
<div class="brow left-brow"></div>
<div class="brow right-brow"></div>
<div class="eye left-eye"></div>
<div class="eye right-eye"></div>

</div>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小丸子一家</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="main">
<div class="me">
<div class="hairs">
<div class="hair hair1"></div>
<div class="hair hair2"></div>
<div class="hair hair3"></div>
<div class="hair hair4"></div>
<div class="hair hair5"></div>
<div class="hair hair6"></div>
<div class="hair hair7"></div>
</div>

}
&.right-eye{
left: 80px;
top: 79px;
transform: rotate(-40deg) rotateY(160deg);
}
}
.nose{
width: 6px;
height: 22px;
position: absolute;
top: 105px;
left: 58px;
background: #f8bb9f;
z-index: 2;
.border;
border-radius: 50%;
&:after{
content: "";
position: absolute;
width: 4px;
height: 22px;
top: -5px;
left: 1px;
background: #f8bb9f;
}
}
.mouth{
.border;
z-index: 1;
width: 30px;
height: 30px;
background: #d96b6e;
position: absolute;
top: 130px;
left: 46px;
border-radius: 50%;
&:after{
content: "";
width: 60px;
height: 30px;
background: #f8bb9f;
position: absolute;
top: -10px;
left: -20px;
border-radius: 50%;
}
}
}

<div class="mouth"></div>
</div>

<div class="ear left-ear"></div>
<div class="ear right-ear"></div>
</div>

本文由金沙棋牌发布于金沙棋牌官方平台,转载请注明出处:CSS3制作精美的iphone电话图标,css3实现的小丸子和

关键词: