云顶娱乐-云顶娱乐游戏平台官网
做最好的网站
当前位置: 云顶娱乐 > 云顶娱乐 > 正文

卡通优化,5种你未必知道的JavaScript和CSS交互作用

时间:2019-11-23 17:58来源:云顶娱乐
用JavaScript获取伪成分(pseudo-element)属性 世家都通晓怎么通过二个因素的 style 个性获取它的CSS样式值,但能赢得伪元素(pseudo-element)的属性值吗?可以的,使用JavaScript也足以访谈页面中的

用JavaScript获取伪成分(pseudo-element)属性

世家都通晓怎么通过二个因素的style个性获取它的CSS样式值,但能赢得伪元素(pseudo-element)的属性值吗?可以的,使用JavaScript也足以访谈页面中的伪元素。

JavaScript

// Get the color value of .element:before var color = window.getComputedStyle( document.querySelector('.element'), ':before' ).getPropertyValue('color'); // Get the content value of .element:before var content = window.getComputedStyle( document.querySelector('.element'), ':before' ).getPropertyValue('content');

1
2
3
4
5
6
7
8
9
// Get the color value of .element:before
var color = window.getComputedStyle(
document.querySelector('.element'), ':before'
).getPropertyValue('color');
 
// Get the content value of .element:before
var content = window.getComputedStyle(
document.querySelector('.element'), ':before'
).getPropertyValue('content');

瞧见了呢,小编能访谈伪成分里的content属性值。若是你想成立八个动态的,风格别致的网址,那是生机勃勃种特别平价的工夫!

应用CSS3画出一个小叮当

2015/08/03 · CSS · 1 评论 · CSS3

初藳出处: 郭锦荣   

刚上学了那些案例,然后以为比较有意思,就演练了一下。然后发现其实也轻巧,假使你常常应用PS或许Flash的话,应该就能够领悟画个Doraemon是超级轻易的事,最少本人是如此感到。可是,用CSS3画出来确实是率先次接触,所以很愿意去品尝一下,对于笔者这种新手,确实是帮扶广大,最少通晓什么去画二个回顾的人物形象出来,再加上一些卡通效果,就活了,那就更加有趣了!OK,开端在此以前,先把职能图晒一下:

图片 1

PS:说真的,小编觉着挺可爱的,小时候不经常看多啊A梦,猛然以为很贴心,很纯真,须臾间青春了好多,哈哈!图片 2

首先,先把HTML结构搭建好:

XHTML

<div class="wrapper"> <!--Doraemon全体--> <div class="doraemon"> <!--头部--> <div class="head"> <!--眼睛--> <div class="eyes"> <div class="eye left"> <!--眼珠--> <div class="black bleft"></div> </div> <div class="eye right"> <div class="black bright"></div> </div> </div> <!--脸部--> <div class="face"> <!--煤黑脸底--> <div class="white"></div> <!--鼻子--> <div class="nose"> <!--鼻子眼弓蛔虫病部分--> <div class="light"></div> </div> <!--鼻子的竖线--> <div class="nose_line"></div> <!--嘴巴--> <div class="mouth"></div> <!--胡须--> <div class="whiskers"> <div class="whisker rTop r160"></div> <div class="whisker rMiddle"></div> <div class="whisker rBottom r20"></div> <div class="whisker lTop r20"></div> <div class="whisker lMiddle"></div> <div class="whisker lBottom r160"></div> </div> </div> </div> <!--脖子和铃铛--> <div class="choker"> <!--铃铛--> <div class="bell"> <div class="bell_line"></div> <div class="bell_circle"></div> <div class="bell_under"></div> <div class="bell_light"></div> </div> </div> <!--身体--> <div class="bodys"> <!--肚子--> <div class="body"></div> <!--肚兜--> <div class="wraps"></div> <!--口袋--> <div class="pocket"></div> <!--遮住50%口袋,使其表现半圆--> <div class="pocket_mask"></div> </div> <!--右手--> <div class="hand_right"> <!--手臂--> <div class="arm"></div> <!--手掌--> <div class="circle"></div> <!--遮住手臂和躯体交接处的线--> <div class="arm_rewrite"></div> </div> <!--左手--> <div class="hand_left"> <div class="arm"></div> <div class="circle"></div> <div class="arm_rewrite"></div> </div> <!--脚--> <div class="foot"> <div class="left"></div> <div class="right"></div> <!--两条腿之间的裂缝--> <div class="foot_rewrite"></div> </div> </div> </div>

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
78
79
80
81
82
83
84
<div class="wrapper">
    <!--叮当猫整体-->
    <div class="doraemon">
        <!--头部-->
        <div class="head">
            <!--眼睛-->
            <div class="eyes">
                <div class="eye left">
                    <!--眼珠-->
                    <div class="black bleft"></div>
                </div>
                <div class="eye right">
                    <div class="black bright"></div>
                </div>
            </div>
            <!--脸部-->
            <div class="face">
                <!--白色脸底-->
                <div class="white"></div>
                <!--鼻子-->
                <div class="nose">
                    <!--鼻子高光部分-->
                    <div class="light"></div>
                </div>
                <!--鼻子的竖线-->
                <div class="nose_line"></div>
                <!--嘴巴-->
                <div class="mouth"></div>
                <!--胡须-->
                <div class="whiskers">
                    <div class="whisker rTop r160"></div>
                    <div class="whisker rMiddle"></div>
                    <div class="whisker rBottom r20"></div>
                    <div class="whisker lTop r20"></div>
                    <div class="whisker lMiddle"></div>
                    <div class="whisker lBottom r160"></div>
                </div>
            </div>
        </div>
        <!--脖子和铃铛-->
        <div class="choker">
            <!--铃铛-->
            <div class="bell">
                <div class="bell_line"></div>
                <div class="bell_circle"></div>
                <div class="bell_under"></div>
                <div class="bell_light"></div>
            </div>
        </div>
        <!--身体-->
        <div class="bodys">
            <!--肚子-->
            <div class="body"></div>
            <!--肚兜-->
            <div class="wraps"></div>
            <!--口袋-->
            <div class="pocket"></div>
            <!--遮住一半口袋,使其呈现半圆-->
            <div class="pocket_mask"></div>
        </div>
        <!--右手-->
        <div class="hand_right">
            <!--手臂-->
            <div class="arm"></div>
            <!--手掌-->
            <div class="circle"></div>
            <!--遮住手臂和身子交接处的线-->
            <div class="arm_rewrite"></div>
        </div>
        <!--左手-->
        <div class="hand_left">
            <div class="arm"></div>
            <div class="circle"></div>
            <div class="arm_rewrite"></div>
        </div>
        <!--脚-->
        <div class="foot">
            <div class="left"></div>
            <div class="right"></div>
             <!--双脚之间的缝隙-->
            <div class="foot_rewrite"></div>
        </div>
    </div>
</div>

最佳先把小叮当的全体布局致密研讨一下,那对之后想要自身入手画别的人物形象很有赞助,思路会比较明朗。

接下来,大家根据底部,脖子,身体,脚部分别展开自己要作为轨范遵守规则。首先将容器wrapper和机器猫全部做一些中央的体裁,Doraemon全体doraemon 设置position为relative,首若是为了方便 子成分/后代成分进行稳固。

CSS

.wrapper{ margin: 50px 0 0 500px; } .doraemon{ position: relative; }

1
2
3
4
5
6
.wrapper{
    margin: 50px 0 0 500px;
}
.doraemon{
    position: relative;
}

头部head的样式,因为Doraemon的底部不是正圆,所以宽高有某个差错,然后选取border-radius将底部从矩形形成圆柱形,然后再使用径向渐变从右上角给背景来个放射性渐变,然后在加个影子,使其更有立体感,background:#07bbee;是为了同盟低版本浏览器:

CSS

.doraemon .head { position:relative; width: 320px; height: 300px; border-radius: 150px; background: #07bbee; background: -webkit-radial-gradient(right top,#fff 10%,#07bbee 20%,#10a6ce 75%,#000); background: -moz-radial-gradient(right top,#fff 10%,#07bbee 20%,#10a6ce 75%,#000); background: -ms-radial-gradient(right top,#fff 10%,#07bbee 20%,#10a6ce 75%,#000); border:2px solid #555; box-shadow:-5px 10px 15px rgba(0,0,0,0.45); }

1
2
3
4
5
6
7
8
9
10
11
12
.doraemon .head {
            position:relative;
            width: 320px;
            height: 300px;
            border-radius: 150px;
            background: #07bbee;
            background: -webkit-radial-gradient(right top,#fff 10%,#07bbee 20%,#10a6ce 75%,#000);
            background: -moz-radial-gradient(right top,#fff 10%,#07bbee 20%,#10a6ce 75%,#000);
            background: -ms-radial-gradient(right top,#fff 10%,#07bbee 20%,#10a6ce 75%,#000);          
            border:2px solid #555;
            box-shadow:-5px 10px 15px rgba(0,0,0,0.45);
}

拜访效果到底怎么:

图片 3

图片 4 shenmgui ,这么丑,别急,慢慢让它活过来:

CSS

/*脸部*/ .doraemon .face { position: relative; /*让具备脸部成分可随机一定*/ z-index: 2; /*脸在头顶背景下边*/ } /*暗青脸底*/ .doraemon .face .white { width: 265px; /*安装宽高*/ height: 195px; border-radius: 150px; position: absolute; /*扩充相对定位*/ top: 75px; left: 25px; background: #fff; /*此放射渐变也是使脸的左下角暗一些,看上去更诚实*/ background: -webkit-radial-gradient(right top,#fff 75%,#eee 80%,#999 90%,#444); background: -moz-radial-gradient(right top,#fff 75%,#eee 80%,#999 90%,#444); background: –ms-radial-gradient(right top,#fff 75%,#eee 80%,#999 90%,#444); } /*鼻子*/ .doraemon .face .nose{ width:30px; height:30px; border-radius:15px; background:#c93300; border:2px solid #000; position:absolute; top:110px; left:140px; z-index:3; /*鼻头在鲜黄脸底下边*/ } /*鼻头上的高光*/ .doraemon .face .nose .light { width:10px; height:10px; border-radius: 5px; box-shadow: 19px 8px 5px #fff; /*由此阴影达成强光*/ } /*鼻头下的线*/ .doraemon .face .nose_line{ width:3px; height:100px; background:#333; position:absolute; top:143px; left:155px; z-index:3; } /*嘴巴*/ .doraemon .face .mouth{ width:220px; height:400px; /*因此底部框加上圆角模拟微笑嘴巴*/ border-bottom:3px solid #333; border-radius:120px; position:absolute; top:-160px; left:45px; } /*眼睛*/ .doraemon .eyes { position: relative; z-index: 3; /*肉眼在木色脸底上边*/ } /*肉眼协同的体裁*/ .doraemon .eyes .eye{ width:72px; height:82px; background:#fff; border:2px solid #000; border-radius:35px 35px; position:absolute; top:40px; } /*卡通优化,5种你未必知道的JavaScript和CSS交互作用的点子。眼珠*/ .doraemon .eyes .eye .black{ width:14px; height:14px; background:#000; border-radius:7px; position:absolute; top:40px; } .doraemon .eyes .left{ left:82px; } .doraemon .eyes .right { left: 156px; } .doraemon .eyes .eye .bleft { left: 50px; } .doraemon .eyes .eye .bright { left: 7px; }

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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
/*脸部*/
         .doraemon .face {
             position: relative; /*让所有脸部元素可自由定位*/
             z-index: 2;    /*脸在头部背景上面*/
         }
        /*白色脸底*/
        .doraemon .face .white {
            width: 265px;       /*设置宽高*/
            height: 195px;
            border-radius: 150px;
            position: absolute; /*进行绝对定位*/
            top: 75px;
            left: 25px;
            background: #fff;
            /*此放射渐变也是使脸的左下角暗一些,看上去更真实*/
            background: -webkit-radial-gradient(right top,#fff 75%,#eee 80%,#999 90%,#444);
            background: -moz-radial-gradient(right top,#fff 75%,#eee 80%,#999 90%,#444);
            background: –ms-radial-gradient(right top,#fff 75%,#eee 80%,#999 90%,#444);        
         }
        /*鼻子*/
         .doraemon .face .nose{
             width:30px;
             height:30px;
             border-radius:15px;
             background:#c93300;
             border:2px solid #000;
             position:absolute;
             top:110px;
             left:140px;
             z-index:3;   /*鼻子在白色脸底下面*/
         }
        /*鼻子上的高光*/
        .doraemon .face .nose .light {
            width:10px;
            height:10px;
            border-radius: 5px;
            box-shadow: 19px 8px 5px #fff;  /*通过阴影实现高光*/
        }
         /*鼻子下的线*/
         .doraemon .face .nose_line{
             width:3px;
             height:100px;
             background:#333;
             position:absolute;
             top:143px;
             left:155px;
             z-index:3;
         }
         /*嘴巴*/
         .doraemon .face .mouth{
             width:220px;
             height:400px;
             /*通过底边框加上圆角模拟微笑嘴巴*/
             border-bottom:3px solid #333;
             border-radius:120px;
             position:absolute;
             top:-160px;
             left:45px;
         }
         /*眼睛*/
        .doraemon .eyes {
            position: relative;
            z-index: 3; /*眼睛在白色脸底下面*/
        }
        /*眼睛共同的样式*/
        .doraemon .eyes .eye{
            width:72px;
            height:82px;
            background:#fff;
            border:2px solid #000;
            border-radius:35px 35px;
            position:absolute;
            top:40px;
        }
        /*眼珠*/
        .doraemon .eyes .eye .black{
            width:14px;
            height:14px;
            background:#000;
            border-radius:7px;
            position:absolute;
            top:40px;
        }
        .doraemon .eyes .left{
            left:82px;
        }
        .doraemon .eyes .right {
            left: 156px;
        }
        .doraemon .eyes .eye .bleft {
            left: 50px;
        }
 
        .doraemon .eyes .eye .bright {
            left: 7px;
        }

写了如此多种式,结果是什么的吧:

图片 5

图片 6 怎么看都是为别别扭扭,哦!还差胡须须和反动脸底的边框呢,咱给补上:

CSS

/*胡须背景,首要用来挡住嘴巴的豆蔻梢头局地,不要显得太长*/ .doraemon .whiskers{ width:220px; height:80px; background:#fff; border-radius:15px; position:absolute; top:120px; left:45px; z-index:2; /*在鼻子和肉眼前面*/ } /*装有胡子的公用样式*/ .doraemon .whiskers .whisker { width: 60px; height: 2px; background: #333; position: absolute; z-index: 2; } /*右上胡子*/ .doraemon .whiskers .rTop { left: 165px; top: 25px; } /*右中胡子*/ .doraemon .whiskers .rMiddle { left: 167px; top: 45px; } /*右下胡子*/ .doraemon .whiskers .rBottom { left: 165px; top: 65px; } /*左上胡子*/ .doraemon .whiskers .lTop { left: 0; top: 25px; } /*左中胡子*/ .doraemon .whiskers .lMiddle { left: -2px; top: 45px; } /*左下胡子*/ .doraemon .whiskers .lBottom { left: 0; top: 65px; } /*胡子旋转角度*/ .doraemon .whiskers .r160 { -webkit-transform: rotate(160deg); -moz-transform: rotate(160deg); -ms-transform: rotate(160deg); -o-transform: rotate(160deg); transform: rotate(160deg); } .doraemon .whiskers .r20 { -webkit-transform: rotate(200deg); -moz-transform: rotate(200deg); -ms-transform: rotate(200deg); -o-transform: rotate(200deg); transform: rotate(200deg); }

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
/*胡须背景,主要用于挡住嘴巴的一部分,不要显得太长*/
        .doraemon .whiskers{
            width:220px;
            height:80px;
            background:#fff;
            border-radius:15px;
            position:absolute;
            top:120px;
            left:45px;
            z-index:2;   /*在鼻子和眼睛下面*/
        }
        /*所有胡子的公用样式*/
        .doraemon .whiskers .whisker {
            width: 60px;
            height: 2px;
            background: #333;
            position: absolute;
            z-index: 2;
        }
        /*右上胡子*/
        .doraemon .whiskers .rTop {
            left: 165px;
            top: 25px;
        }
        /*右中胡子*/
        .doraemon .whiskers .rMiddle {
            left: 167px;
            top: 45px;
        }
        /*右下胡子*/
        .doraemon .whiskers .rBottom {
            left: 165px;
            top: 65px;
        }
        /*左上胡子*/
        .doraemon .whiskers .lTop {
            left: 0;
            top: 25px;
        }
        /*左中胡子*/
        .doraemon .whiskers .lMiddle {
            left: -2px;
            top: 45px;
        }
        /*左下胡子*/
        .doraemon .whiskers .lBottom {
            left: 0;
            top: 65px;
        }
        /*胡子旋转角度*/
        .doraemon .whiskers .r160 {
            -webkit-transform: rotate(160deg);
            -moz-transform: rotate(160deg);
            -ms-transform: rotate(160deg);
            -o-transform: rotate(160deg);
            transform: rotate(160deg);
        }
        .doraemon .whiskers .r20 {
            -webkit-transform: rotate(200deg);
            -moz-transform: rotate(200deg);
            -ms-transform: rotate(200deg);
            -o-transform: rotate(200deg);
            transform: rotate(200deg);
        }

图片 7

图片 8 那样就对了,望着多舒服啊!当务之急,做脖子和肉体:

CSS

/*围脖*/ .doraemon .choker { width: 230px; height: 20px; background: #c40; /*线性渐变 让围脖看上去更自然*/ background: -webkit-gradient(linear,left top,left bottom,from(#c40),to(#800400)); background: -moz-linear-gradient(center top,#c40,#800400); background: -ms-linear-gradient(center top,#c40,#800400); border: 2px solid #000; border-radius: 10px; position: relative; top: -40px; left: 45px; z-index: 4; } /*铃铛*/ .doraemon .choker .bell { width: 40px; height: 40px; _overflow: hidden; /*IE6 hack*/ border: 2px solid #000; border-radius: 50px; background: #f9f12a; background: -webkit-gradient(linear, left top, left bottom, from(#f9f12a),color-stop(0.5, #e9e11a), to(#a9a100)); background: -moz-linear-gradient(top, #f9f12a, #e9e11a 75%,#a9a100); background: -ms-linear-gradient(top, #f9f12a, #e9e11a 75%,#a9a100); box-shadow: -5px 5px 10px rgba(0,0,0,0.25); position: absolute; top: 5px; left: 90px; } /*双横线*/ .doraemon .choker .bell_line { width: 36px; height: 2px; background: #f9f12a; border: 2px solid #333; border-radius: 3px 3px 0 0; position: absolute; top: 10px; } /*黑点*/ .doraemon .choker .bell_circle{ width:12px; height:10px; background:#000; border-radius:5px; position:absolute; top:20px; left:14px; } /*黑点下的线*/ .doraemon .choker .bell_under{ width: 3px; height:15px; background:#000; position:absolute; left: 18px; top:27px; } /*铃铛红眼病*/ .doraemon .choker .bell_light{ width:12px; height:12px; border-radius:10px; box-shadow:19px 8px 5px #fff; position:absolute; top:-5px; left:5px; opacity:0.7; } /*身子*/ .doraemon .bodys { position: relative; top: -310px; } /*肚子*/ .doraemon .bodys .body { width: 220px; height: 165px; background: #07beea; background: -webkit-gradient(linear,right top,left top,from(#07beea),color-stop(0.5, #0073b3),color-stop(0.75,#00b0e0), to(#0096be)); background: -moz-linear-gradient(right center,#07beea,#0073b3 50%,#00b0e0 75%,#0096be 100%); background: -ms-linear-gradient(right center,#07beea,#0073b3 50%,#00b0e0 75%,#0096be 100%); border:2px solid #333; position:absolute; top:265px; left:50px; } /*金棕肚兜*/ .doraemon .bodys .wraps { width: 170px; height: 170px; background: #fff; background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.75,#fff),color-stop(0.83,#eee),color-stop(0.90,#999),color-stop(0.95,#444), to(#000)); background: -moz-linear-gradient(right top,#fff,#fff 75%,#eee 83%,#999 90%,#444 95%,#000); background: -ms-linear-gradient(right top,#fff,#fff 75%,#eee 83%,#999 90%,#444 95%,#000); border: 2px solid #000; border-radius: 85px; position: absolute; left: 72px; top: 230px; } /*口袋*/ .doraemon .bodys .pocket { width: 130px; height: 130px; border-radius: 65px; background: #fff; background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.70,#fff),color-stop(0.75,#f8f8f8),color-stop(0.80,#eee),color-stop(0.88,#ddd), to(#fff)); background: -moz-linear-gradient(right top, #fff, #fff 70%,#f8f8f8 75%,#eee 80%,#ddd 88%, #fff); background: -ms-linear-gradient(right top, #fff, #fff 70%,#f8f8f8 75%,#eee 80%,#ddd 88%, #fff); border: 2px solid #000; position:absolute; top: 250px; left: 92px; } /*屏蔽口袋二分一*/ .doraemon .bodys .pocket_mask { width: 134px; height: 60px; background:#fff; border-bottom: 2px solid #000; position:absolute; top: 259px; left: 92px; }

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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
/*围脖*/
        .doraemon .choker {
            width: 230px;
            height: 20px;
            background: #c40;
            /*线性渐变 让围巾看上去更自然*/
            background: -webkit-gradient(linear,left top,left bottom,from(#c40),to(#800400));
            background: -moz-linear-gradient(center top,#c40,#800400);
            background: -ms-linear-gradient(center top,#c40,#800400);
            border: 2px solid #000;
            border-radius: 10px;
            position: relative;
            top: -40px;
            left: 45px;
            z-index: 4;
        }
        /*铃铛*/
        .doraemon .choker .bell {
            width: 40px;
            height: 40px;
            _overflow: hidden; /*IE6 hack*/
            border: 2px solid #000;
            border-radius: 50px;
            background: #f9f12a;
            background: -webkit-gradient(linear, left top, left bottom, from(#f9f12a),color-stop(0.5, #e9e11a), to(#a9a100));
            background: -moz-linear-gradient(top, #f9f12a, #e9e11a 75%,#a9a100);
            background: -ms-linear-gradient(top, #f9f12a, #e9e11a 75%,#a9a100);
            box-shadow: -5px 5px 10px rgba(0,0,0,0.25);
            position: absolute;
            top: 5px;
            left: 90px;
        }
        /*双横线*/
        .doraemon .choker .bell_line {
            width: 36px;
            height: 2px;
            background: #f9f12a;
            border: 2px solid #333;
            border-radius: 3px 3px 0 0;
            position: absolute;
            top: 10px;
        }
        /*黑点*/
        .doraemon .choker .bell_circle{
            width:12px;
            height:10px;
            background:#000;
            border-radius:5px;
            position:absolute;
            top:20px;
            left:14px;
        }
        /*黑点下的线*/
        .doraemon .choker .bell_under{
            width: 3px;
            height:15px;
            background:#000;
            position:absolute;
            left: 18px;
            top:27px;
        }
        /*铃铛高光*/
        .doraemon .choker .bell_light{
            width:12px;
            height:12px;
            border-radius:10px;
            box-shadow:19px 8px 5px #fff;
            position:absolute;
            top:-5px;
            left:5px;
            opacity:0.7;
        }
        /*身子*/
        .doraemon .bodys {
            position: relative;
            top: -310px;
        }
        /*肚子*/
        .doraemon .bodys .body {
            width: 220px;
            height: 165px;
            background: #07beea;
            background: -webkit-gradient(linear,right top,left top,from(#07beea),color-stop(0.5, #0073b3),color-stop(0.75,#00b0e0), to(#0096be));
            background: -moz-linear-gradient(right center,#07beea,#0073b3 50%,#00b0e0 75%,#0096be 100%);
            background: -ms-linear-gradient(right center,#07beea,#0073b3 50%,#00b0e0 75%,#0096be 100%);
            border:2px solid #333;
            position:absolute;
            top:265px;
            left:50px;
        }
        /*白色肚兜*/
            .doraemon .bodys .wraps {
                width: 170px;
                height: 170px;
                background: #fff;
                background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.75,#fff),color-stop(0.83,#eee),color-stop(0.90,#999),color-stop(0.95,#444), to(#000));
                background: -moz-linear-gradient(right top,#fff,#fff 75%,#eee 83%,#999 90%,#444 95%,#000);
                background: -ms-linear-gradient(right top,#fff,#fff 75%,#eee 83%,#999 90%,#444 95%,#000);
                border: 2px solid #000;
                border-radius: 85px;
                position: absolute;
                left: 72px;
                top: 230px;
            }
            /*口袋*/
            .doraemon .bodys .pocket {
                width: 130px;
                height: 130px;
                border-radius: 65px;
                background: #fff;
                background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.70,#fff),color-stop(0.75,#f8f8f8),color-stop(0.80,#eee),color-stop(0.88,#ddd), to(#fff));
                background: -moz-linear-gradient(right top, #fff, #fff 70%,#f8f8f8 75%,#eee 80%,#ddd 88%, #fff);
                background: -ms-linear-gradient(right top, #fff, #fff 70%,#f8f8f8 75%,#eee 80%,#ddd 88%, #fff);
                border: 2px solid #000;
                position:absolute;
                top: 250px;
                left: 92px;
            }
            /*挡住口袋一半*/
            .doraemon .bodys .pocket_mask {
                width: 134px;
                height: 60px;
                background:#fff;
                border-bottom: 2px solid #000;
                position:absolute;
                top: 259px;
                left: 92px;
           }

好吧,脖子和肉体皆有哇!上海体育地方:

图片 9

方今看起来有一点像安放品,可是笑容依旧那么单纯,好了,赶紧把手脚做出来:

CSS

/*左右手*/ .doraemon .hand_right, .doraemon .hand_left { height: 100px; width: 100px; position: absolute; top: 272px; left: 248px; } /*左手*/ .doraemon .hand_left { left: -10px; } /*手臂公共部分*/ .doraemon .arm { width:80px; height:50px; background: #07beea; background: -webkit-gradient(linear, left top, left bottom, from(#07beea),color-stop(0.85,#07beea), to(#555)); background: -moz-linear-gradient(center top, #07BEEA, #07BEEA 85%, #555); background: -ms-linear-gradient(center top, #07BEEA, #07BEEA 85%, #555); border: 1px solid #000000; box-shadow: -10px 7px 10px rgba(0, 0, 0, 0.35); z-index: -1; position: relative; } /*左边手臂*/ .doraemon .hand_right .arm { top: 17px; -webkit-transform: rotate(35deg); -moz-transform: rotate(35deg); -ms-transform: rotate(35deg); -o-transform: rotate(35deg); transform: rotate(35deg); } /*右臂臂*/ .doraemon .hand_left .arm { top: 17px; background: #0096be; /*背阴一面利用纯色,使其有立体感*/ box-shadow: 5px -7px 10px rgba(0, 0, 0, 0.25); -webkit-transform: rotate(145deg); -moz-transform: rotate(145deg); -ms-transform: rotate(145deg); -o-transform: rotate(145deg); transform: rotate(145deg); } /*圆形手掌公共部分*/ .doraemon .circle { width: 60px; height: 60px; border-radius: 30px; border: 2px solid #000; background: #fff; background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.5,#fff),color-stop(0.70,#eee),color-stop(0.8,#ddd), to(#999)); background: -moz-linear-gradient(right top, #fff, #fff 50%, #eee 70%, #ddd 80%,#999); background: -ms-linear-gradient(right top, #fff, #fff 50%, #eee 70%, #ddd 80%,#999); position: absolute; } /*右手掌*/ .doraemon .hand_right .circle { left: 40px; top: 32px; } /*左边手手掌*/ .doraemon .hand_left .circle { left: -20px; top: 32px; } /*手臂和身体结合处,使用背景遮住边框*/ .doraemon .arm_rewrite { height: 45px; width: 5px; background: #07beea; position: relative; } /*入手结合处*/ .doraemon .hand_right .arm_rewrite { top: -45px; left: 22px; } /*左边手结合处*/ .doraemon .hand_left .arm_rewrite { top: -45px; left: 60px; background: #0096be; /*同理,背光一面利用纯色,使其有立体感*/ } /*脚部*/ .doraemon .foot { width: 280px; height: 40px; position: relative; top: 55px; left: 20px; } /*左右腿协作样式*/ .doraemon .foot .left, .doraemon .foot .right { width: 125px; height: 30px; background: #fff; background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.75,#fff),color-stop(0.85,#eee), to(#999)); background: -moz-linear-gradient(right top, #fff, #fff 75%, #eee 85%, #999); background: -ms-linear-gradient(right top, #fff, #fff 75%, #eee 85%, #999); border: 2px solid #333; border-radius: 80px 60px 60px 40px; box-shadow: -6px 0 10px rgba(0, 0, 0, 0.35); position: relative; } .doraemon .foot .left { left: 8px; top: 65px; } .doraemon .foot .right { top: 31px; left: 141px; } /*两脚中间的裂缝,加阴影使用立体感*/ .doraemon .foot .foot_rewrite { width: 20px; height: 10px; background: #fff; background: -webkit-gradient(linear, right top, left bottom, from(#666),color-stop(0.83,#fff), to(#fff)); background: -moz-linear-gradient(right top, #666, #fff 83%, #fff); background: -ms-linear-gradient(right top, #666, #fff 83%, #fff); /*制作半圆效果*/ border: 2px solid #000; border-bottom: none; border-radius: 40px 40px 0 0; position: relative; top: -11px; left: 130px; _left: 127px; }

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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
/*左右手*/
            .doraemon .hand_right, .doraemon .hand_left {
                height: 100px;
                width: 100px;
                position: absolute;
                top: 272px;
                left: 248px;
            }
            /*左手*/
            .doraemon .hand_left {
                left: -10px;
            }
            /*手臂公共部分*/
            .doraemon .arm {
                width:80px;
                height:50px;
                background: #07beea;
                background: -webkit-gradient(linear, left top, left bottom, from(#07beea),color-stop(0.85,#07beea), to(#555));
                background: -moz-linear-gradient(center top, #07BEEA, #07BEEA 85%, #555);
                background: -ms-linear-gradient(center top, #07BEEA, #07BEEA 85%, #555);
                border: 1px solid #000000;
                box-shadow: -10px 7px 10px rgba(0, 0, 0, 0.35);
                z-index: -1;
                position: relative;
            }
            /*右手手臂*/
            .doraemon .hand_right .arm {
                top: 17px;
                -webkit-transform: rotate(35deg);
                -moz-transform: rotate(35deg);
                -ms-transform: rotate(35deg);
                -o-transform: rotate(35deg);
                transform: rotate(35deg);
            }
            /*左手手臂*/
            .doraemon .hand_left .arm {
                top: 17px;
                background: #0096be;   /*背光一面使用纯色,使其有立体感*/
                box-shadow: 5px -7px 10px rgba(0, 0, 0, 0.25);
                -webkit-transform: rotate(145deg);
                -moz-transform: rotate(145deg);
                -ms-transform: rotate(145deg);
                -o-transform: rotate(145deg);
                transform: rotate(145deg);
            }
            /*圆形手掌公共部分*/
            .doraemon .circle {
                width: 60px;
                height: 60px;
                border-radius: 30px;
                border: 2px solid #000;
                background: #fff;
                background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.5,#fff),color-stop(0.70,#eee),color-stop(0.8,#ddd), to(#999));
                background: -moz-linear-gradient(right top, #fff, #fff 50%, #eee 70%, #ddd 80%,#999);
                background: -ms-linear-gradient(right top, #fff, #fff 50%, #eee 70%, #ddd 80%,#999);
                position: absolute;
            }
            /*右手手掌*/
            .doraemon .hand_right .circle {
                left: 40px;
                top: 32px;
            }
            /*左手手掌*/
            .doraemon .hand_left .circle {
                left: -20px;
                top: 32px;
            }
            /*手臂和身体结合处,使用背景遮住边框*/
            .doraemon .arm_rewrite {
                height: 45px;
                width: 5px;
                background: #07beea;
                position: relative;
            }
            /*右手结合处*/
            .doraemon .hand_right .arm_rewrite {
                top: -45px;
                left: 22px;
            }
            /*左手结合处*/
            .doraemon .hand_left .arm_rewrite {
                top: -45px;
                left: 60px;
                background: #0096be; /*同理,背光一面使用纯色,使其有立体感*/
            }
            /*脚部*/
            .doraemon .foot {
                width: 280px;
                height: 40px;
                position: relative;
                top: 55px;
                left: 20px;
            }
            /*左右脚共同样式*/
            .doraemon .foot .left, .doraemon .foot .right {
                width: 125px;
                height: 30px;
                background: #fff;
                background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.75,#fff),color-stop(0.85,#eee), to(#999));
                background: -moz-linear-gradient(right top, #fff, #fff 75%, #eee 85%, #999);
                background: -ms-linear-gradient(right top, #fff, #fff 75%, #eee 85%, #999);
                border: 2px solid #333;
                border-radius: 80px 60px 60px 40px;
                box-shadow: -6px 0 10px rgba(0, 0, 0, 0.35);
                position: relative;
            }
            .doraemon .foot .left {
                left: 8px;
                top: 65px;
            }
 
            .doraemon .foot .right {
                top: 31px;
                left: 141px;
            }
            /*双脚之间的缝隙,加阴影使用立体感*/
            .doraemon .foot .foot_rewrite {
                width: 20px;
                height: 10px;
                background: #fff;
                background: -webkit-gradient(linear, right top, left bottom, from(#666),color-stop(0.83,#fff), to(#fff));
                background: -moz-linear-gradient(right top, #666, #fff 83%, #fff);
                background: -ms-linear-gradient(right top, #666, #fff 83%, #fff);
                /*制作半圆效果*/
                border: 2px solid #000;  
                border-bottom: none;
                border-radius: 40px 40px 0 0;
                position: relative;
                top: -11px;
                left: 130px;
                _left: 127px;
            }

好了,最终完整结果:

图片 10

看一下,效果是或不是和风流洒脱上马的如出大器晚成辙呢 图片 11 ,就算做好了,但是依旧得以让它动起来的,比方眼睛,我们能够给它加个动画效果,让眼睛打转起来:

CSS

/*眼珠*/ .doraemon .eyes .eye .black { width: 14px; height: 14px; background: #000; border-radius: 7px; position: absolute; top: 40px; -webkit-animation: eyemove 3s linear infinite; -moz-animation: eyemove 3s linear infinite; -ms-animation: eyemove 3s linear infinite; -o-animation: eyemove 3s linear infinite; animation: eyemove 3s linear infinite; } /*让眼睛动起来*/ @-webkit-keyframes eyemove { 70%{ margin:0 0 0 0; } 80% { margin: -22px 0 0 0; } 85% { margin: -22px 0 0 5px; } 90% { margin: -22px 10px 0 0; } 93% { margin: -22px 0 0 0; } 96% { margin: 0 0 0 0; } } @-moz-keyframes eyemove { 70% { margin: 0 0 0 0; } 80% { margin: -22px 0 0 0; } 85% { margin: -22px 0 0 5px; } 90% { margin: -22px 10px 0 0; } 93% { margin: -22px 0 0 0; } 96% { margin: 0 0 0 0; } } @-o-keyframes eyemove { 70% { margin: 0 0 0 0; } 80% { margin: -22px 0 0 0; } 85% { margin: -22px 0 0 5px; } 90% { margin: -22px 10px 0 0; } 93% { margin: -22px 0 0 0; } 96% { margin: 0 0 0 0; } } @keyframes eyemove { 70% { margin: 0 0 0 0; } 80% { margin: -22px 0 0 0; } 85% { margin: -22px 0 0 5px; } 90% { margin: -22px 10px 0 0; } 93% { margin: -22px 0 0 0; } 96% { margin: 0 0 0 0; } }

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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
/*眼珠*/
        .doraemon .eyes .eye .black {
            width: 14px;
            height: 14px;
            background: #000;
            border-radius: 7px;
            position: absolute;
            top: 40px;
            -webkit-animation: eyemove 3s linear infinite;
            -moz-animation: eyemove 3s linear infinite;
            -ms-animation: eyemove 3s linear infinite;
            -o-animation: eyemove 3s linear infinite;
            animation: eyemove 3s linear infinite;
        }
 
        /*让眼睛动起来*/
        @-webkit-keyframes eyemove {
            70%{
                margin:0 0 0 0;
            }
            80% {
                margin: -22px 0 0 0;
            }
 
            85% {
                margin: -22px 0 0 5px;
            }
 
            90% {
                margin: -22px 10px 0 0;
            }
 
            93% {
                margin: -22px 0 0 0;
            }
 
            96% {
                margin: 0 0 0 0;
            }
        }
 
        @-moz-keyframes eyemove {
            70% {
                margin: 0 0 0 0;
            }
 
            80% {
                margin: -22px 0 0 0;
            }
 
            85% {
                margin: -22px 0 0 5px;
            }
 
            90% {
                margin: -22px 10px 0 0;
            }
 
            93% {
                margin: -22px 0 0 0;
            }
 
            96% {
                margin: 0 0 0 0;
            }
        }
 
        @-o-keyframes eyemove {
            70% {
                margin: 0 0 0 0;
            }
 
            80% {
                margin: -22px 0 0 0;
            }
 
            85% {
                margin: -22px 0 0 5px;
            }
 
            90% {
                margin: -22px 10px 0 0;
            }
 
            93% {
                margin: -22px 0 0 0;
            }
 
            96% {
                margin: 0 0 0 0;
            }
        }
        @keyframes eyemove {
            70% {
                margin: 0 0 0 0;
            }
 
            80% {
                margin: -22px 0 0 0;
            }
 
            85% {
                margin: -22px 0 0 5px;
            }
 
            90% {
                margin: -22px 10px 0 0;
            }
 
            93% {
                margin: -22px 0 0 0;
            }
 
            96% {
                margin: 0 0 0 0;
            }
        }

OK,这样,眼睛就可以动了,风野趣的能够试一下,这里就不能够展现了。不过要是您有怎么着越来越好的动漫效果也足以尝试,那么那么些案例就截至了。

PS:就算如此那只是多个案例,但是真的帮忙本身开阔思维,并且实际做三个这么的意义,可能会费用超级多时光,起码对本人的话近年来实乃那样子,首要难点依然布局一定和颜料的合理搭配,才具使形象更加的绘身绘色涉笔成趣!大概也许有人对PS大概Flash等图形管理软件不是很熟,对用CSS3画出一些职员只怕别的职能相比较未有眉目,那么就能够去部分网址参谋设计员们的规划构图,图形分解等连锁规划学问,扶持大家更加好地领略,这里推荐多少个网址:

站酷网

闪吧

网页设计师联盟

鲜绿理想

2 赞 4 收藏 1 评论

图片 12

内部存款和储蓄器占用

接纳GPU动漫须要发送多张渲染层的图像给GPU,GPU也须要缓存它们以便于继续动漫的运用。

贰个渲染层,要求有个别内部存款和储蓄器占用?为了方便明白,举一个回顾的事例;壹个宽、高都以300px的纯色图像供给多少内部存款和储蓄器?

300 300 4 = 360000字节,即360kb。这里乘以4是因为,每一种像素供给七个字节Computer内部存款和储蓄器来描述。

假诺大家做三个轮播图组件,轮播图有10张图纸;为了贯彻图片间平滑对接的相互;为每一个图像增多了will-change:transform。那将荣升图像为复合层,它将多要求19mb的空中。800 600 4 * 10 = 1920000。

只是是一个轮播图组件就须要19m的附加空间!

在chrome的开垦者工具中开荒setting——》Experiments——》layers能够看来各种层的内部存款和储蓄器占用。如图所示:

图片 13

图片 14

总结


首先种方法应用 border 属性 hack 出三角形,并因而对多少个因素实行拼接最后完结了平行四边形;而第三种办法则经过 transform: skew 来获得平行四边形。总体来讲,第三种艺术相对于第大器晚成种代码量小得多,并且也很好精晓。唯黄金年代的供应满足不了要求是回天乏术协会像本站的分页中所使用的梯形。希望本文对各位有所协助。

2 赞 5 收藏 1 评论

图片 15

Autoprefixer:一个以最佳的措施管理浏览器前缀的后管理程序

2014/08/26 · CSS · CSS

原稿出处: css-tricks   译文出处:三桂   

Autoprefixer解析CSS文件同不经常间增加浏览器前缀到CSS准则里,使用Can I Use的数据来支配如何前缀是需求的。

怀有你要求做的便是把它增添到你的能源创设筑工程具(举个例子 Grunt卡塔 尔(阿拉伯语:قطر‎并且能够完全忘记有CSS前缀那东西。固然依据最新的W3C标准来平常书写你的CSS而无需浏览器前缀。像这么:

CSS

a{ transition :transform 1s }

1
2
3
a{
     transition :transform 1s
}

Autoprefixer使用贰个数据库依照当下浏览器的普遍度以致品质扶持提要求您前缀:

CSS

a{ -webkit-transition :-webkit-transform 1s; transition :-ms-transform 1s; transition :transform 1s }

1
2
3
4
5
a{
     -webkit-transition :-webkit-transform 1s;
     transition :-ms-transform 1s;
     transition :transform 1s
}

问题

 

本来大家能够手写浏览器前缀,不过这显得干瘪以至易错。

大家也能够行使相同Prefixr那样的劳动以至编辑器插件,但那仍旧乏于跟一批重复的代码打交道。

大家能够运用象Compass之于Sass以及nib之于Stylus之类的预微电脑提供的mixin库。它们得以化解绝大部分难题,但还要又引进了其他主题材料。

它们强制大家应用新的语法。它们迭代慢于今世浏览器,所以当牢固版发布时会发生过多没有要求的前缀,不时大家须求创设本人的mixins。

Compass实际上并从未为你屏蔽前缀,因为您依旧亟待调控好些个主题材料,比方:笔者索要为 border-radius 写二个mixin吗?作者急需用逗号分割 +transition 的参数吗?

Lea Verou的-prefix-free大致解决了那几个标题,可是接收顾客端库并不是个好注意,当你把最后客户品质考虑进来的话。为了卫戍反复做相近的政工,最佳是在财富构建大概项目揭穿时再次创下设三遍CSS。

揭秘

Autoprefixer是叁个后处理程序,不象Sass以至Stylus之类的预微机。它适用于见惯不惊的CSS而不选用一定的语法。能够轻易跟Sass以致Stylus集成,由于它在CSS编写翻译后启动。

Autoprefixer基于Rework,一个得以用来编排你自个儿的CSS后管理程序的框架。Rework解析CSS成有用Javascript结构经过你的拍卖后导回给CSS。

Autoprefixer的每一种版本都饱含生机勃勃份最新的 Can I Use 数据:

  • 当前浏览器列表以致它们的遍布度。
  • 新CSS属性,值和抉择器前缀列表。

Autoprefixer暗许将扶助主流浏览器近期2个版本,那一点类似Google。不过你能够在团结的品类中通过名称可能情势举办分选:

  • 主流浏览器近期2个版本用“last 2 versions”;
  • 全世界计算有当先1%的使用率使用“>1%”;
  • 仅新本子用“ff>20”或”ff>=20″.

然后Autoprefixer计算哪些前缀是内需的,哪些是早已晚点的。

当Autoprefixer增加前缀到你的CSS,还不会遗忘修复语法出入。这种艺术,CSS是基于最新W3C标准发生:

CSS

a { background : linear-gradient(to top, black, white); display : flex } ::placeholder { color : #ccc }

1
2
3
4
5
6
7
a {
     background : linear-gradient(to top, black, white);
     display : flex
}
::placeholder {
     color : #ccc
}

编译成:

CSS

a { background : -webkit-linear-gradient(bottom, black, white); background : linear-gradient(to top, black, white); display : -webkit-box; display : -webkit-flex; display : -moz-box; display : -ms-flexbox; display : flex } :-ms-input-placeholder { color : #ccc } ::-moz-placeholder { color : #ccc } ::-webkit-input-placeholder { color : #ccc } ::placeholder { color : #ccc }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
a {
    background : -webkit-linear-gradient(bottom, black, white);
    background : linear-gradient(to top, black, white);
    display : -webkit-box;
    display : -webkit-flex;
    display : -moz-box;
    display : -ms-flexbox;
    display : flex
}
:-ms-input-placeholder {
    color : #ccc
}
::-moz-placeholder {
    color : #ccc
}
::-webkit-input-placeholder {
    color : #ccc
}
::placeholder {
    color : #ccc
}

Autoprefixer 相近会清理超时的前缀(来自遗留的代码或周边 Bootstrap CSS库卡塔尔,由此下边包车型大巴代码:

CSS

a { -webkit-border-radius : 5px; border-radius : 5px }

1
2
3
4
a {
    -webkit-border-radius : 5px;
    border-radius : 5px
}

编译成:

CSS

a { border-radius : 5px }

1
2
3
a {
    border-radius : 5px
}

因为通过Autoprefixer管理,CSS将仅蕴涵实际的浏览器前缀。Fotorama从Compass切换到Autoprefixer之后,CSS大小减少了将近20%。

演示

假如你还未有用过任何工具来自动化创设你的静态能源,必需求品尝下Grunt,我猛烈推荐你从头利用创设筑工程具。那将开启您任何语法糖世界,高效的mixin库以致实用的图形管理工科具。全部开辟者的神速方法用来节省大批量活力以至时光(自由采取语言,代码性格很顽强在荆棘丛生或巨大压力面前不屈用,使用第三方库的力量卡塔 尔(英语:State of Qatar)现将都适用于前端开辟人员。

让大家创制多少个门类目录以致在style.css中写些轻易的CSS:

style.css

{ }

在此个例子中,大家将接纳Grunt。首先要求动用npm安装 grunt-autoprefixer :

npm install grunt-cli grunt-contrib-watch grunt-autoprefixer

接下来大家必要创建 Gruntfile.js 文件以至启用Autoprefixer:

JavaScript

Gruntfile.js module.exports = function (grunt) { grunt .initConfig ({ autoprefixer : { dist : { files : { 'build/style.css' : 'style.css' } } }, watch : { styles : { files : ['style.css' ], tasks : ['autoprefixer' ] } } }); grunt.loadNpmTasks('grunt-autoprefixer' ); grunt.loadNpmTasks('grunt-contrib-watch' );};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Gruntfile.js
module.exports = function (grunt) {
     grunt .initConfig ({
          autoprefixer : {
               dist : {
                    files : { 'build/style.css' : 'style.css' } } },
                    watch : {
                         styles : {
                              files : ['style.css' ],
                              tasks : ['autoprefixer' ]
                         }
                    }
               });
grunt.loadNpmTasks('grunt-autoprefixer' );
grunt.loadNpmTasks('grunt-contrib-watch' );};

此布局文件能够让Autoprefixer编写翻译 style.css 到 build/style.css. 相同我们将用 grunt-contrib-watch``来监听style.css文件变化重新编写翻译build/style.css。

启用Grunt的Watch功能:

./node_modules/.bin/grunt watch

近日大家抬高中二年级个CSS3表明式到style.css并保留:

style.css

JavaScript

a { width : calc(50% - 2em) }

1
2
3
a {
     width : calc(50% - 2em)
}

接下去是见证神迹的时刻,今后自己有了build/style.css文件,Grunt监测到style.css文件爆发变化并启用Autoprefixer职分。

Autoprefixer发现了calc() 值单元须要Safari 6的浏览器前缀。

build/style.css

CSS

a { width : -webkit-calc(50% - 2em); width : calc(50% - 2em) }

1
2
3
4
a {
     width : -webkit-calc(50% - 2em);
     width : calc(50% - 2em)
}

大家再添增添一丢丢繁缛的CSS3到style.css并保留:

style.css

CSS

a { width : calc(50% - 2em); transition : transform 1s }

1
2
3
4
a {
     width : calc(50% - 2em);
     transition : transform 1s
}

Autoprefixer已知Chrome,Safari 6以及Opera 15需要为transitiontransform 添加前缀。但IE9也急需为transform增多前缀,作为transition的值。

build/style.css

CSS

a { width : -webkit-calc(1% + 1em); width : calc(1% + 1em); -webkit-transition : -webkit-transform 1s; transition : -ms-transform 1s; transition : transform 1s }

1
2
3
4
5
6
7
a {
     width : -webkit-calc(1% + 1em);
     width : calc(1% + 1em);
     -webkit-transition : -webkit-transform 1s;
     transition : -ms-transform 1s;
     transition : transform 1s
}

Autoprefixer为完结你具备脏活而规划。它会依据Can I Use数据库,写入全数需求的前缀并且近似清楚标准之间的分别,招待来现今的CSS3 – 不再有浏览器前缀!

下一步?

1、Autoprefixer支持Ruby on Rails,Middleman,Mincer,Grunt,Sublime Text。明白更加多关于怎么样在你的情形中使用的文档。

2、若是您的条件还不帮衬Autoprefixer,请报告给自己。

3、关注@autoprefixer获取更新以致新特征消息。

赞 收藏 评论

图片 16

加载CSS文件

延期加载图片、JSON、脚本等是用来加速页面突显速度的好措施。大家可以动用curl.js等这么JavaScript加载器来延缓加载那些外界能源,可您知道CSS样式表也能够推迟加载吗,何况在加载成功后回调函数会赋予通报。

JavaScript

curl( [ "namespace/MyWidget", "css!namespace/resources/MyWidget.css" ], function(MyWidget) { // 你能够对MyWidget实行操作 // 这里没有对这一个CSS文件援引,因为不供给; // 大家只要求它已经加载到页面上了 } });

1
2
3
4
5
6
7
8
9
10
11
curl(
[
"namespace/MyWidget",
"css!namespace/resources/MyWidget.css"
],
function(MyWidget) {
// 你可以对MyWidget进行操作
// 这里没有对这个CSS文件引用,因为不需要;
// 我们只需要它已经加载到页面上了
}
});

本网站使用的PrismJS语法高亮脚本正是延迟加载的。当全体的财富都加载后,回调函数就能够触发,小编可在回调函数里加载它。极其管用!

制止隐式合成

  • 维持动漫的指标的z-index尽可能的高。理想的,这几个成分应该是body成分的直接子成分。当然,那不是总大概的。所以您能够仿造贰个要素,把它献身body成分下独自是为着做动画。
  • 将成分上设置will-change CSS属性,成分上有了那几个性子,浏览器会提高这一个因素变为三个复合层(不是接连卡塔 尔(阿拉伯语:قطر‎。那样动漫就足以平滑的上马三保终结。不过实际不是滥用那天天性,不然会大大扩展内部存款和储蓄器消耗。

先是种格局:利用border


三个矩形拼接四个三角最后创立出七个平行四边形。为啥使用border能够生出三角形呢?先来探望一张图片:

图片 17

看了图中的八个小图形的转换进程,你应当已经明白了六分之三。其实 hack 出三角形只需求三个规范,第生龙活虎,成分自己的长度宽度为0;其次,将无需的一些通过 border-color 来设置隐瞒。通过相通的法子,你仍然是能够创制出梯形,上海教室中的几个图形的代码如下。(另附 CodePen 示例)

CSS

#first { width: 20px; height: 20px; border-width: 10px; border-style: solid; border-color: red green blue brown; } #second { width: 0; height: 0; border-width: 10px; border-style: solid; border-color: red green blue brown; } #third { width: 0; height: 0; border-width: 10px; border-style: solid; border-color: red transparent transparent transparent; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#first {
  width: 20px;
  height: 20px;
  border-width: 10px;
  border-style: solid;
  border-color: red green blue brown;
}
 
#second {
  width: 0;
  height: 0;
  border-width: 10px;
  border-style: solid;
  border-color: red green blue brown;
}
 
#third {
  width: 0;
  height: 0;
  border-width: 10px;
  border-style: solid;
  border-color: red transparent transparent transparent;
}

接下去将在思忖什么拼接出二个平行四边形了。在border法中,它由三片段组成,分别是左三角形、矩形、右三角形。倘使每一次绘制平行四边形都要开创四个因素分明过于劳碌了,所以在这里地:before:after伪成分是个不错的选取。上边大家落实一下那样的效应:

图片 18

为了将三角形与矩形无缝拼接到一同,多处属性要保持意气风发致,所以利用相通 Less, Sass, Stylus 等 CSS 预微处理器来写这段代码会更易于有限帮助,下边给出 Scss 版本的代码。(另附 CodePen 链接)

Sass

//三角形的宽高 $height: 24px; $width: 12px; //对平行四边形三片段的水彩实行赋值 @mixin parallelogram-color($color) { background: $color; &:before { border-color: transparent $color $color transparent; } &:after { border-color: $color transparent transparent $color; } } //单个三角的体制 @mixin triangle() { content: ''; display: block; width: 0; height: 0; position: absolute; border-style: solid; border-width: $height/2 $width/2; top: 0; } //平行四边形的体制 .para { display: inline-block; position: relative; padding: 0 10px; height: $height; line-height: $height; margin-left: $width; color: #fff; &:after { @include triangle(); right: -$width; } &:before { @include triangle(); left: -$width; } @include parallelogram-color(red); }

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
//三角形的宽高
$height: 24px;
$width: 12px;
 
//对平行四边形三部分的颜色进行赋值
@mixin parallelogram-color($color) {
  background: $color;
  &:before { border-color: transparent $color $color transparent; }
  &:after { border-color: $color transparent transparent $color; }
}
 
//单个三角形的样式
@mixin triangle() {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  border-style: solid;
  border-width: $height/2 $width/2;
  top: 0;
}
 
//平行四边形的样式
.para {
  display: inline-block;
  position: relative;
  padding: 0 10px;
  height: $height;
  line-height: $height;
  margin-left: $width;
  color: #fff;
 
  &:after {
    @include triangle();
    right: -$width;
  }
 
  &:before {
    @include triangle();
    left: -$width;
  }
 
  @include parallelogram-color(red);
}

 

必要专心的是,假诺由此 $height$width 设置的三角形斜率太小或太大皆有超级大可能引致渲染出锯齿,所以使用起来要多多测量检验一下差别的宽高所拿到的视觉效果如何。

CSS鼠标指针事件

CSS鼠标指针事件pointer-events特性极其的有趣,它的功效极度像JavaScript,当你把那几个个性设置为none时,它能有效的遏止禁止那么些成分,你也许会说“那又怎么?”,但实际上,它是不许了那么些成分上的任何JavaScript事件或回调函数!

JavaScript

.disabled { pointer-events: none; }

1
.disabled { pointer-events: none; }

点击那一个因素,你会开掘任何你放置在此个成分上的监听器都不会接触任何事件。叁个美妙的功效,真的——你不在供给为了防范有个别事件会被触发而去检查有个别css类是还是不是留存。

正是那5给您大概还从未意识的CSS和JavaScript交互作用的艺术。你还只怕有新的意识呢?分享出去!

赞 1 收藏 评论

图片 19

隐式合成

还记得刚才a成分和b成分动漫的例证吗?现在大家将b成分做动漫,a成分静止不动。

图片 20

和刚刚的例子不一样,现在b成分将有着四个独门复合层;然后它们将被GPU合成。不过因为a成分要在b成分的方面(因为a成分的z-index比b成分高卡塔尔国,那么浏览器会做哪些?浏览器会将a成分也单身做一个复合层!

故而我们前不久有三个复合层a成分所在的复合层、b元素所在的复合层、别的内容及背景层。

一个或五个尚未和谐复合层的因素要出新在有复合层成分的上边,它就能够有所协和的复合层;这种气象被称得上隐式合成。

浏览器将a元素进步为贰个复合层有相当多样缘由,上面罗列了大器晚成部分:

  • 3d或透视转变css属性,举个例子translate3d,translateZ等等(js平常经过这种措施,使成分获得复合层卡塔尔国
  • <video><iframe><canvas><webgl>等元素。
  • 混合插件(如flash卡塔 尔(阿拉伯语:قطر‎。
  • 要素本人的 opacity和transform 做 CSS 动漫。
  • 享有css过滤器的因素。
  • 使用will-change属性。
  • position:fixed。
  • 要素有三个 z-index 非常低且带有二个复合层的男子儿成分(换句话说正是该因素在复合层上边渲染)

这看起来css动漫的属性瓶颈是在重绘上,可是真实的主题素材是在内存上:

第三种格局:利用transform


使用transform来促成平行四边形的方式是自己在逛去啊的时候看到的,效果大致是以此样子:

图片 21

总的来看以往感觉好神奇啊,原本还足以只有平行四边形的外籍轮船廓。(因为方法二头能成立填充效果的平行四边形卡塔尔国完成起来特简单,首倘诺依附了transform: skew(...),下边就来看看源码吧。

<style> .city { display: inline-block; padding: 5px 20px; border: 1px solid #44a5fc; color: #333; transform: skew(-20deg); } </style> <div class="city">上海</div>

1
2
3
4
5
6
7
8
9
10
11
<style>
.city {
  display: inline-block;
  padding: 5px 20px;
  border: 1px solid #44a5fc;
  color: #333;
  transform: skew(-20deg);
}
</style>
 
<div class="city">上海</div>

于是乎大家获取了如此的作用:

图片 22

看见图片的您肯定是这么想的:

图片 23

别发急嘛,我们真正是把任何 div 实行了点窜,引致中间的文字也是偏斜的,而那明摆着不是我们所要的成效。所以大家必要加多少个内层成分,并对内层元素做二次逆向的点窜,进而赢得大家想要的作用:

图片 24

 

兑今世码如下,另附 CodePen 示例

<style> .city { display: inline-block; padding: 5px 20px; border: 1px solid #44a5fc; color: #333; transform: skew(-20deg); } .city div { transform: skew(20deg); } </style> <div class="city"> <div>上海</div> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
.city {
  display: inline-block;
  padding: 5px 20px;
  border: 1px solid #44a5fc;
  color: #333;
  transform: skew(-20deg);
}
 
.city div {
  transform: skew(20deg);
}
</style>
 
<div class="city">
  <div>上海</div>
</div>

 

一向对样式表举办增多和删除样式准则

小编们都分外熟知使用element.style.propertyName来改良样式,使用JavaScript能支持我们做到那些,但您了解哪些新扩充或修三个共处的CSS样式法规吧?其实特别的简易。

JavaScript

function addCSSRule(sheet, selector, rules, index) { if(sheet.insertRule) { sheet.insertRule(selector + "{" + rules + "}", index); } else { sheet.addRule(selector, rules, index); } } // Use it! addCSSRule(document.styleSheets[0], "header", "float: left");

1
2
3
4
5
6
7
8
9
10
11
function addCSSRule(sheet, selector, rules, index) {
if(sheet.insertRule) {
sheet.insertRule(selector + "{" + rules + "}", index);
}
else {
sheet.addRule(selector, rules, index);
}
}
 
// Use it!
addCSSRule(document.styleSheets[0], "header", "float: left");

这种措施平日是用来创立一个新的体制法则,但即使你想改良贰个存世的平整,也得以这么做。

卡通中只利用transform和opacity

如上所说,transform和opacity保险了成分属性的生成不影响文书档案流、也不受文书档案流影响;並且不会诱致repaint。有些时候你只怕想要改动其余的css属性,作为动漫。举例:你恐怕想行使background属性退换背景:

CSS

<div class="bg-change"></div> .bg-change { width: 100px; height: 100px; background: red; transition: opacity 2s; } .bg-change:hover { background: blue; }

1
2
3
4
5
6
7
8
9
10
<div class="bg-change"></div>
.bg-change {
  width: 100px;
  height: 100px;
  background: red;
  transition: opacity 2s;
}
.bg-change:hover {
  background: blue;
}

在这里个例子中,在动漫的每一步;浏览器都会举办一回重绘。大家得以应用二个复层在此个成分上边,何况独自调换opacity属性:

XHTML

<div class="bg-change"></div> <style> .bg-change { width: 100px; height: 100px; background: red; } .bg-change::before { content: ''; display: block; width: 100%; height: 100%; background: blue; opacity: 0; transition: opacity 20s; } .bg-change:hover::before { opacity: 1; } </style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div class="bg-change"></div>
<style>
.bg-change {
  width: 100px;
  height: 100px;
  background: red;
}
.bg-change::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: blue;
  opacity: 0;
  transition: opacity 20s;
}
.bg-change:hover::before {
  opacity: 1;
}
</style>

用 CSS 达成三角形与平行四边形

2015/08/18 · CSS · 1 评论 · CSS3

原稿出处: 邹润阳(@jerry蛋蛋哥)   

最近在逛有个别技能网址的时候,感到文章主要词上的体裁好炫耀啊。于是作者将这种写法照搬到了自家的博客中,可能近些日子逛过我博客的朋侪已经意识了它出未来何方了——分页的体裁。来张截图:

图片 25

你在首页的底部也足以旁观这么叁个分页栏;是否看上去还不易?下边就来探视那是哪些落实的啊~

编辑:云顶娱乐 本文来源:卡通优化,5种你未必知道的JavaScript和CSS交互作用

关键词: