div css3实现的小丸子和爷爷分分快三计划

作者:分分快三计划

脑洞时刻

到此处自身要么不是很满足。想到了事先的 mix-blend-mode 属性。

想了解 mix-blend-mode 那特特性,能够戳笔者看看:不可思议的颜色混合形式mix-blend-mode

假使八个圆锥渐变层级叠合,并且接纳上 mix-blend-mode 会发生什么样?好吓人的主见…

分分快三计划 1

末段捣鼓出这种分外科学幻想的效用:

分分快三计划 2

上海教室使用了 2 个半晶莹剔透的圆锥渐变,相对反向进行旋转,並且在底部使用 mix-blend-mode: overlay 叠合了三个白黑径向渐变图层。能够看看代码及职能:

CodePen Demo — conic-gradient Animation

浏览器协理:chrome, safari, firefox---------------版本越高越援救

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

十一分百分比使用

本来,大家能够更上一层楼切实的内定圆锥渐变每一段的比重,合营百分比,能够相当的轻便的达成饼图。

假如大家有如下 CSS:

{ width: 200px; height: 200px; background: conic-gradient(deeppink 0, deeppink 30%, yellowgreen 30%, yellowgreen 70%, teal 70%, teal 100%); border-radius: 50%; }

1
2
3
4
5
6
{
    width: 200px;
    height: 200px;
    background: conic-gradient(deeppink 0, deeppink 30%, yellowgreen 30%, yellowgreen 70%, teal 70%, teal 100%);
    border-radius: 50%;
}

上海图书馆,我们独家钦命了 0~30%,30%~70%,70%~100%四个区间的颜料分别为 deeppink(深红)yellowgreen(黄绿) 以及 teal(青) ,可以收获如下饼图:

分分快三计划 3

当然,上边只是比例的第一种写法,还大概有另一种写法也能落到实处:

{ background: conic-gradient(deeppink 0 30%, yellowgreen 0 70%, teal 0 100%); }

1
2
3
{
    background: conic-gradient(deeppink 0 30%, yellowgreen 0 70%, teal 0 100%);
}

此间表示 :

  1. 0-十分六 的间距使用 deeppink
  2. 0-十分之七 的距离使用 yellowgreen
  3. 0-百分之百 的间距使用 teal

与此同一时间,先定义的水彩的层叠在后定义的水彩之上。

CodePen Demo — use proportion in conic-gradient

                <div ></div>

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

在档次中接纳 conic-gradient

上边包车型地铁例子炫酷归绚烂,但是在等级次序中实用性不强。那么圆锥渐变是不是能用于职业中的?答案是早晚的。

看看下边那一个图,芝麻信用分背景渐变颜色条,不选用 JS,纯 CSS 借助 conic-gradient 怎么着画出来。

分分快三计划 4

若果大家的组织如下:

<div class="bg"> <div class="point"></div> </div>

1
2
3
<div class="bg">
    <div class="point"></div>
</div>

CSS:

.bg { position: relative; margin: 50px auto; width: 400px; height: 400px; border-radius: 50%; background: conic-gradient(#f1462c 0%, #fc5d2c 12.4%, #fff 12.5%, #fff 12.5%, #fc5d2c 12.5%, #fba73e 24.9%, #fff 24.9%, #fff 25%, #fba73e 25%, #e0fa4e 37.4%, #fff 37.4%, #fff 37.5%, #e0fa4e 37.5%, #12dd7e 49.9%, #fff 49.9%, #fff 50%, #12dd7e 50%, #0a6e3f 62.4%, #fff 62.4%, #fff 62.5%); transform: rotate(-112.5deg); transform-origin: 50% 50%; } .bg::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 370px; height: 370px; border-radius: 50%; background: #fff; } .bg::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(#fff 0%, #fff 25%, transparent 25%, transparent 100%), conic-gradient(#f1462c 0 12.5%, #fba73e 0 25%, #e0fa4e 0 37.5%, #12dd7e 0 50%, #0a6e3f 0 62.5%, #fff 0 100%); } .point { position: absolute; width: 30px; height: 30px; transform: translate(-50%, -50%); left: 50%; top: 50%; background: radial-gradient(#467dc6 0%, #a4c6f3 100%); border-radius: 50%; z-index: 999; } .point::before { content: ""; position: absolute; width: 5px; height: 350px; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(0); border-radius: 100% 100% 5% 5%; background: linear-gradient( 180deg, #9bc7f6 0, #467dc6 50%, transparent 50%, transparent 100% ); animation: rotate 3s cubic-bezier(.93, 1.32, .89, 1.15) infinite; } @keyframes rotate { 50% { transform: translate(-50%, -50%) rotate(150deg); } 100% { transform: translate(-50%, -50%) rotate(150deg); } }

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
.bg {
    position: relative;
    margin: 50px auto;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: conic-gradient(#f1462c 0%, #fc5d2c 12.4%, #fff 12.5%, #fff 12.5%, #fc5d2c 12.5%, #fba73e 24.9%, #fff 24.9%, #fff 25%, #fba73e 25%, #e0fa4e 37.4%, #fff 37.4%, #fff 37.5%, #e0fa4e 37.5%, #12dd7e 49.9%, #fff 49.9%, #fff 50%, #12dd7e 50%, #0a6e3f 62.4%, #fff 62.4%, #fff 62.5%);
    transform: rotate(-112.5deg);
    transform-origin: 50% 50%;
}
 
.bg::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 370px;
    height: 370px;
    border-radius: 50%;
    background: #fff;
}
 
.bg::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background:
        radial-gradient(#fff 0%, #fff 25%, transparent 25%, transparent 100%),
        conic-gradient(#f1462c 0 12.5%, #fba73e 0 25%, #e0fa4e 0 37.5%, #12dd7e 0 50%, #0a6e3f 0 62.5%, #fff 0 100%);
        
}
 
.point {
    position: absolute;
    width: 30px;
    height: 30px;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
    background: radial-gradient(#467dc6 0%, #a4c6f3 100%);
    border-radius: 50%;
    z-index: 999;
}
 
.point::before {
    content: "";
    position: absolute;
    width: 5px;
    height: 350px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(0);
    border-radius: 100% 100% 5% 5%;
    background: linear-gradient(
        180deg,
        #9bc7f6 0,
        #467dc6 50%,
        transparent 50%,
        transparent 100%
    );
    animation: rotate 3s cubic-bezier(.93, 1.32, .89, 1.15) infinite;
}
 
@keyframes rotate {
50% {
transform: translate(-50%, -50%) rotate(150deg);
}
100% {
transform: translate(-50%, -50%) rotate(150deg);
}
}

为了展现 conic-gradient 的实用性,简单将双方合两为一,模拟了一下。看看效果,马到成功,所以说 conic-gradient 照旧有用武之地的:

分分快三计划 5

CodePen 德姆o — 使用 conic-gradient 达成表盘信用分示例

            background:-moz-linear-gradient(0 0 0deg,#e8e8e8 0%, #f5f5f5 100%);

 

有关小编:chokcoco

分分快三计划 6

经不住小运似水,逃可是此间少年。 个人主页 · 小编的小说 · 63 ·    

分分快三计划 7

            text-shadow:#000 0px 3px 4px;

</div>

与线性渐变及圆锥渐变的异同

那正是说它和其余八个渐变的区分在何地吗?

  • linear-gradient 线性渐变的自由化是一条直线,能够是其余角度
  • radial-gradient通向渐变是从圆心点以正方形状向外扩散

而从可行性上的话,圆锥渐变的势头是这么的:

分分快三计划 8

划重点:

从图中得以见到,圆锥渐变的渐变方向和初叶点。开始点是图片主题,然后以顺时针方向绕核心完结渐变效果

        .wrapper .wrapper1 .text.B {

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

奇妙的 conic-gradient 圆锥渐变

2017/06/26 · CSS · 圆锥渐变

正文小编: 伯乐在线 - chokcoco 。未经小编许可,禁止转发!
应接加入伯乐在线 专辑小编。

感谢 LeaVerou 大神,让我们得以提前接纳上如此能够的性质。

conic-gradient 是个怎么样?提起 conic-gradient ,就不得不提的它的别的七个男子:

  • linear-gradient : 线性渐变
    分分快三计划 9
  • radial-gradient : 径向渐变
    分分快三计划 10

说那七个应该依然有为数相当多人询问而且使用过的。CSS3 新添的线性渐变及径向渐变给 CSS 世界带来了相当大的转变。

而 conic-gradient ,表示圆锥渐变,其余一种渐变方式,给 CSS 世界带来了越来越多可能。

上边踏入正文,本文中享有示例,请在高版本 Chrome 内核下预览。

            transform: rotate | scale | skew | translate ;

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

使用 conic-gradient 完毕颜色表盘

从地点驾驭了 conic-gradient 最简易的用法,我们使用它完毕三个最简便的颜色表盘。

conic-gradient 不独有只是从一种颜色渐变到另一种颜色,与另外多少个渐变同样,能够达成多颜色的连结渐变。

经过,想到了彩虹,我们得以依次列出 赤橙黄绿青蓝紫 八种颜色:

  • conic-gradient: (red, orange, yellow, green, teal, blue, purple)

地点表示,在圆锥渐变的长河中,颜色从设定的第一个 red 开始,渐变到 orange ,再到 yellow ,一贯到最后设定的 purple 。而且每三个区间是等分的。

我们再给加上 border-radius: 50% ,若是大家的 CSS 如下,

{ width: 200px; height: 200px; border-radius: 50%; background: conic-gradient(red, orange, yellow, green, teal, blue, purple); }

1
2
3
4
5
6
{
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: conic-gradient(red, orange, yellow, green, teal, blue, purple);
}

走访效果:

分分快三计划 11

wow,已经有了启幕形状了。然则,总认为何地比相当的小自然。同理可得,浑身难熬 分分快三计划 12

嗯?难题出在哪儿呢?一是颜色远远不足丰裕相当不足清楚,二是发轫处与结尾处衔接非常不够自然。让作者再稍微调解一下。

笔者们清楚,表示颜色的措施,除了 rgb() 颜色表示法之外,还恐怕有 hsl() 表示法。

hsl() 被定义为色相-饱和度-明度(Hue-saturation-lightness)

  • 色相(H)是色彩的基性情情,正是平日所说的颜料名称,如藏石青、深灰蓝等。
  • 饱和度(S)是指色彩的纯度,越高色彩越纯,低则日益变灰,取0-百分百的数值。
  • 明度(V),亮度(L),取0-100%。

那边,大家通过改换色相获得四个较为驾驭完整的颜色色系。

也正是利用那样一个连片 hsl(0%, 100%, 50%) –> hsl(100%, 100%, 50%),中间只变动色相,生成 20 个对接状态。借助 SCSS ,CSS 语法如下:

$colors: (); $totalStops:20; <a href="; $i from 0 through $totalStops{ $colors: append($colors, hsl($i *(360deg/$totalStops), 100%, 50%), comma); } .colors { width: 200px; height: 200px; background: conic-gradient($colors); border-radius: 50%; }

1
2
3
4
5
6
7
8
9
10
11
12
13
$colors: ();
$totalStops:20;
 
<a href="http://www.jobbole.com/members/lowkey2046">@for</a> $i from 0 through $totalStops{
    $colors: append($colors, hsl($i *(360deg/$totalStops), 100%, 50%), comma);
}
 
.colors {
    width: 200px;
    height: 200px;
    background: conic-gradient($colors);
    border-radius: 50%;
}

获得如下效果图,此番的功力很好:

分分快三计划 13

CodePen Demo — conic-gradinet colors

            border-radius:0 0 0 200px;

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

最后

名目好多 CSS 小说汇总在自己的 Github 。

好了,本文到此结束,希望对你有救助 :)

假定还也会有何样疑难依然建议,能够多多调换,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

打赏扶助自个儿写出越多好作品,感激!

打赏作者

            right:4px;

@-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);
}

配合 background-size 使用

应用了百分比调节了距离,再同盟使用 background-size 就足以兑现各样贴图啦。

咱俩先是落实贰个基础圆锥渐变图形如下:

{ width: 250px; height: 250px; margin: 50px auto; background: conic-gradient(#000 12.5%, #fff 0 37.5%, #000 0 62.5%, #fff 0 87.5%, #000 0); }

1
2
3
4
5
6
{
    width: 250px;
    height: 250px;
    margin: 50px auto;
    background: conic-gradient(#000 12.5%, #fff 0 37.5%, #000 0 62.5%, #fff 0 87.5%, #000 0);
}

效果图:

分分快三计划 14

再加上 background-size: 50px 50px;,也就是:

{ width: 250px; height: 250px; margin: 50px auto; background: conic-gradient(#000 12.5%, #fff 0 37.5%, #000 0 62.5%, #fff 0 87.5%, #000 0); background-size: 50px 50px; }

1
2
3
4
5
6
7
{
    width: 250px;
    height: 250px;
    margin: 50px auto;
    background: conic-gradient(#000 12.5%, #fff 0 37.5%, #000 0 62.5%, #fff 0 87.5%, #000 0);
    background-size: 50px 50px;
}

得到:

分分快三计划 15

CodePen Demo — conic-gradient wallpaper

            width:100px;

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

打赏帮忙自身写出更加多好文章,多谢!

任选一种支付情势

分分快三计划 16 分分快三计划 17

1 赞 1 收藏 评论

            top: 42px;

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

圆锥渐变 conic-gradient polyfill 垫片库

观察这里,想必读者们都尝试这么美妙的习性。

不过,遵照规矩,这种 “高科技(science and technology)” 平时包容性都微微滴。conic-gradient 包容性又何以呢?

可怜悲凉,CSS 官方对其的陈诉是:

  • 远在修正阶段的模块(Modules in the revising phase)

处在立异阶段的模块没有处在改良阶段的模块稳定。平时它们的语法还索要详细审核,说不定还有一点都不小的变通,何况不保险和后边的非常。代替的语法常常通过测量检验并已经完成。

侥幸的是,在小说伊始小编也涉及了,谢谢 LeaVerou 大神,让大家得以提前选拔上如此美好的属性。

LeaVerou 提供了多少个垫片库,根据本文上述的语法,加多那一个垫影片仓库,就能够欢畅的应用起来啦。

你须要增多如下的 JS ,垫片库会依照 CSS 语法,生成对应的圆锥渐变图案,而且转化为 BASE64 代码:

<script src="//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"/> <script src="//leaverou.github.io/conic-gradient/conic-gradient.js"/>

1
2
<script src="//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"/>
<script src="//leaverou.github.io/conic-gradient/conic-gradient.js"/>

因为垫片库的功能是将大家的 CSS 语法转化成为 BASE64 代码替换 background-image: url() 中的内容,所以,上线后是无需再加多那多少个库的。

            height:100px;

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

双重圆锥渐变 repaeting-conic-gradient

与线性渐变及径向渐变同样,圆锥渐变也是存在重复圆锥渐变 repaet-conic-gradient 的。

我们即便希望不停重复的一对是 0~30° 的一个有的,它的 CSS 代码是 conic-gradient(deeppink 0 15deg, yellowgreen 0 30deg) 。

分分快三计划 18

那么,使用了 repaeting-conic-gradient 之后,会自动填充满整个区域,CSS 代码如下:

{ width: 200px; height: 200px; background: repeating-conic-gradient(deeppink 0 15deg, yellowgreen 0 30deg); border: 1px solid #000; }

1
2
3
4
5
6
{
    width: 200px;
    height: 200px;
    background: repeating-conic-gradient(deeppink 0 15deg, yellowgreen 0 30deg);
    border: 1px solid #000;
}

分分快三计划 19

CodePen Demo — repeating-conic-gradient

        .wrapper .wrapper1 .wrapper2 {

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

参谋文献

CSS conic-gradient() polyfill

 

less代码

API

看看它最简易的 API:

{ /* Basic example */ background: conic-gradient(deeppink, yellowgreen); }

1
2
3
4
{
    /* Basic example */
    background: conic-gradient(deeppink, yellowgreen);
}

分分快三计划 20

            width:365px;

.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);
}
}
}

圆锥渐变动画

骨干的片段用法驾驭完了,看看使用圆锥渐变能够玩出什么花来。

借助 SCSS 的精锐,大家能够制作出部分不胜绚烂的背景展板。

采取 SCSS ,我们随意生成一个多颜色的圆锥渐变图案:

要是我们的 HTML 结构如下:

<div></div>

1
<div></div>

CSS/SCSS 代码如下:

@function randomNum($max, $min: 0, $u: 1) { <a href='; ($min random($max)) * $u; } @function randomConicGradient() { $n: random(30) 10; $list: (); <a href='; $i from 0 to $n { $list: $list, rgb(randomNum(255), randomNum(255), randomNum(255)); } <a href='; conic-gradient($list, nth($list, 1)); } div { width: 100vw; height: 100vh; background: randomConicGradient(); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
@function randomNum($max, $min: 0, $u: 1) {
    <a href='http://www.jobbole.com/members/wx1409399284'>@return</a> ($min random($max)) * $u;
}
@function randomConicGradient() {
    $n: random(30) 10;
    $list: ();
    
    <a href='http://www.jobbole.com/members/lowkey2046'>@for</a> $i from 0 to $n {
        $list: $list, rgb(randomNum(255), randomNum(255), randomNum(255));
    }
        
    <a href='http://www.jobbole.com/members/wx1409399284'>@return</a> conic-gradient($list, nth($list, 1));
}
div {
    width: 100vw;
    height: 100vh;
    background: randomConicGradient();
}

简易解释下方面的 SCSS 代码,

  • randomNum() 用于转移随机数,randomNum(255) 相当于自由生成 1~255 的随便数;
  • randomConicGradient() 用于转移整个 conic-gradient() 内的参数,也正是每一距离的颜色;
  • vw 和 vh 是相比较新的 CSS 单位,叁个页面来讲,它的视窗的万丈正是100vh,宽度就是 100vw 。

OK,刷新页面,获得如下效果图:

分分快三计划 21

卧槽,很炫人眼目,bling bling 闪闪发光的以为到啊!並且是随机生成的种种颜色,所以每一趟刷新都有新体验有木有!!

分分快三计划 22

还没完,接下去给它助长旋转动画,蹬蹬蹬,旋转起来大致是如此:

分分快三计划 23

鉴于 GIF 图大小的范围,只看 GIF 无法感受到全屏下这种科学幻想眩晕的以为到,墙裂提议您戳进去看看:

CodePen Demo — conic-gradient Animation

 

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

    </script>

HTML代码

            box-shadow: #000 0px 0px 1px;

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

 

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

            transform: rotate(-54deg) scaleX(1.5);

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

            </div>

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

            <span >B</span>

 CSS代码

            width:100px;

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

            border:1px solid #d3d3d3;

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

            -webkit-transform: rotate | scale | skew | translate ;

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

            border-right:1px solid #00284b;

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

            margin-top:7px;

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

            border-right:1px solid #55595c;

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

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

        .wrapper .wrapper1 .text {

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

            box-shadow:#282b30 1px 1px 1px;

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;

            top: 42px;

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

            -ms-transform:scaleX(1.3);

 

            border-radius:200px 0 0 0;

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

        <div >

            */

            width:217px;

            font-weight:bold;

</head>

            <span >W</span>

            position:absolute;

            border-left:1px solid #c4eefe;

            border-bottom:1px solid #00284b;

            margin-top:62.5px;

            border-radius:365px;

        }

            border-bottom:1px solid #55565a;

            border-radius:0 200px 0 0;

            background:-moz-linear-gradient(0 0 0deg,#f3f3f3 0%,#b0b1b5 50%,#f3f3f3 100%);

代码:

            font-size:72px;

            width:100px;

            transform: rotate(51deg) scaleX(1.1);

            -ms-transform: rotate(51deg) scaleX(1.1);

            background: -webkit-gradient(linear, 0 0, 100% 100%, from(#f3f3f3), to(#f3f3f3));

            margin-left:7px;

            right:4px;

            background: -webkit-gradient(linear, 100% 100%, 0 0, from(#fff), to(#818181));

            background: -webkit-gradient(linear, 0 100%, 100% 0, from(#e8e8e8), to(#f5f5f5));

即便如此web端对CSS3的支撑还应该有相当多包容性难题,不过本身很愿意相信web端更加的富了,越来越活跃了。 

            bottom:4px;

            top:5px;

            right: 32px;

            -webkit-transform: rotate(51deg) scaleX(1.1);

            background:-moz-linear-gradient(0 0 0deg,#44c2e8 0%, #0e5c9c 100%);

        .wrapper .wrapper1 {

        .wrapper .wrapper1 .wrapper2 .arc2 {

        }

            width:100px;

    <div >

            <div >

            <span >M</span>

            background: -webkit-gradient(linear, 0 0, 100% 100%, from(#bee5ea), to(#2ba4eb));

            background:-moz-linear-gradient(0 0 -60deg,#aaa 0%, #000 100%);

            -o-transform: rotate(51deg) scaleX(1.1);

            position:relative;

            position:absolute;

    </style>

            border-bottom:1px solid #55565a;

            background:-moz-linear-gradient(0 0 90deg,#fff 100%, #818181 0%);

            border-right:1px solid #1a91c9;

            -o-transform: rotate(-54deg) scaleX(1.5);

            border-top:1px solid #d1ded7;

 <html><head>

下边是本人用CSS3绘制的一个BMW的标记。

            background:-moz-linear-gradient(0 0 0deg,#e8e8e8 0%, #f5f5f5 100%);

            border-top:1px solid #c4eefe;

            box-shadow:#015486 1px 1px 2px;

            width:351px;

 

        }

            position:absolute;

            left: 38px;

            -ms-transform: rotate | scale | skew | translate ;

        .wrapper .wrapper1 .wrapper2 .arc3 {

            border-radius:0 0 200px 0;

            border-left:1px solid #fffffd;

            border-top:1px solid #ffffff;

            height:100px;

 分分快三计划 24

        }

            -webkit-transform: rotate(-54deg) scale(1);

            left: 148px;

            border-radius:217px;

            height:351px;

                <div ></div>

            background: -webkit-gradient(linear, 0 0, 100% 100%, from(#44c2e8), to(#0e5c9c));

    <script type="text/javascript">

        .wrapper {

            background: -webkit-gradient(linear, 0 0, 50% 100%, from(#aaa), to(#000));

            height:217px;


            border-right:1px solid #55595c;

        }

            -o-transform:scaleX(1.3);

        

            top: -10px;

        .wrapper .wrapper1 .text.W {

        }

            background:-moz-linear-gradient(0 0 0deg,#bee5ea 0%, #2ba4eb 100%);

            border:1px solid #0f0f0f;

   </div>

 

        .wrapper .wrapper1 .wrapper2 .arc4 {

            -webkit-transform:scaleX(1.3);

            -o-transform: rotate | scale | skew | translate ;

        }

        }

<body>

 

            left:5px;

            border-left:1px solid #d0eaeb;

            -webkit-transform: rotate(-54deg) scaleX(1.5);

            border-radius:351px;

            position:absolute;

            height:100px;

        .wrapper .wrapper1 .text.M {

        .wrapper .wrapper1 .wrapper2 .arc1 {

            bottom:4px;

    <style type="text/css">

        } 

运转截图:

        </div>

<!DOCTYPE html>

            border-bottom:1px solid #1a91c9;

            color:#fbfbfb;

            position:absolute;

            left:4px;

            font-family:Arial, Helvetica, sans-serif;

            position:relative;

</body></html>

            box-shadow: #000 0px 0px 5px;

那是自家对她们的求学更是有意思味了。

            /*-moz-transform: rotate | scale | skew | translate ;

            -ms-transform: rotate(-54deg) scaleX(1.5);

            border:4px solid #000;

            box-shadow:#282b30 1px 2px 1px;

炎炎的活动互连网让自身看到了HTML5,CSS3的远大前景。

            height:365px;

            height:100px;

            background: -webkit-gradient(linear, 0 0, 100% 100%, from(#e8e8e8), to(#f5f5f5));

            top:3px;

            box-shadow:#015486 2px 2px 1px;

                <div ></div>

            margin-left:62.5px;

        }

            transform:scaleX(1.3);

本文由分分快三计划发布,转载请注明来源

关键词: 分分快三计划 HTML5 HTML CSS web前端