CSS制作一个卡通头像（笔记）_用css3来实现一个完整的卡通形象

作者：weixin_40725706 | 2024-07-24 07:09:04

踩

用css3来实现一个完整的卡通形象

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>css</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        /*通配符选择器*{}
　　　　就是一个星号，可以选中页面中的所有元素，但是其优先级是最低的*/
        /*修改CSS中的默认样式，将内外边距设置为0*/
        .wrapper {
            display: grid;
            /*设置网格布局*/
            width: 100%;
            height: 100vh;
            /*将这个大盒子撑满整个页面，height的单位vh，1vh=1%的屏幕高度，100vh即高度撑满整个页面*/
            background-color: #ffbe00;
            /* 网格布局，共三列，宽度都是自动的 */
            grid-template-columns: auto auto auto;
            /*设置三个数值表示有三列，auto表示自适应，会平均分配列宽*/
        }
        /* 在根元素选择器中定义全局变量,在任何一个选择器中都可以通过函数的方式进行调用，重复使用 */
        :root {
            --color1: #ce7253;
            --color2:#a04e3a;
            --hair:#90503a;
            --beard:#673929;
        }
        /* 绘制人的头像 */
        .head {
        /*head元素，即人物由于无论浏览器页面怎么变化都是居中显示的，所以使用固定定位*/
            position: fixed;
            left: 50%;
            top: 50%;
            width: 220px;
            /*这里的宽度是脸部不带两只耳朵的宽度*/
            height: 310px;
            /*这里的高度就是脸长*/
            background-color: var(--color1);
            transform: translate(-50%,-50%); 
            border-radius: 110px;
            /* 宽度的一半作为像素值 */
            box-shadow:inset 0 60px var(--hair),inset 0 -40px var(--beard);
            /* 制作头发和胡子。inset是为了头发是在内部，如果没有这个关键字这部分阴影就会在下面，0表示不用水平移动，60px是表示向下移动60px（第一个正值表示向右移动负值表示向左移动；第二个正值表示向下移动，负值表示向上移动），var（--hair）引用颜色 */
        }
        /* 为元素绘制脸部轮廓，以及底下的投影 */
        /* ::before伪元素选择器，在元素内部最顶部添加一个虚拟的自己 */
        .head::before{
            /* 在脸部中间添加一个盒子用来放置五官 */
            /* 伪元素默认是行内元素的加载模式，伪元素必须添加一个内容属性 ,content是用来添加伪元素里面内容的属性，里面可以什么都不写为空也可以，但是没有这个属性伪元素就会创建失败*/
            content: '';
            /* 默认是一个行内元素，要是想变成一个块元素就要设置display:block,若想定位脱标就设置一些定位的属性 */
            position: absolute;
            /* 父级是固定定位，自己是绝对定位它就会参考父级的移动 */
            left: 0;
            top: 50px;
            /* 在父级元素头发的下面，头发是60px，那就设置这个是50px */
            width: 220px;
            /* 和脸的宽度一样 */
            height: 220px;
            /* 高度要比脸部小 */
            background-color: var(--color1);
            border-radius: 60px 60px 110px 110px;
            /* 设置压盖级别 */
            z-index: 2;
            /* 以动画的效果移动元素使用transition属性 */
            transition: all 0.3s ease-in;
        }
        /*下面的阴影使用伪元素*/
        .head::after{
            content: '';
            position: absolute;
            left: 50%;
            bottom: -80px;
            width: 140px;
            height: 35px;
            border-radius: 50%;
            background-color: orange;
            transform: translate(-50%);
        }
        /* 耳朵，整体是个⚪，为了显示出半个就让脸部压盖住半个⚪，因为CSS中默认的是先写的元素会被压在下面，为了脸压在耳朵的上面，所以需要给五官的部分设置压盖层级，将耳朵定位在脸的后面，被脸遮住了 */
        /*伪元素就before和after在head这个盒子中用完了，所以需要添加子级盒子ear*/
        .ear{
            position: absolute;
            top: 127px;
            /*从head盒子的最上面往下走127px*/
            width: 55px;
            height: 55px;
            background-color: var(--color1);
            /*高宽一样所以是正方形，设置border-radius: 50%就将元素变成了圆形*/
            border-radius: 50%;
            transition: all 0.3s ease-in;
        }
        /*设置好耳朵后此时耳朵被五官部分盖住了在中间，所以让耳朵分别向左右两个方向进行移动*/
        .ear_l{
            left: -28px;
        }
        .ear_r{
            right: -28px;
            /* 命名和移动方向相同的话就用负值 */
        }
        /*用伪元素给两只耳朵添加内轮廓*/
        .ear::before{
            content: '';
            position: absolute;
            left: 50%;
            width: 26px;
            height: 26px;
            top: 12px;
            /* 从上往下走的少一些为12px那么元素就会靠上面一些 */
            transform: translate(-50%);
            /* 每次让left值为50%的时候使用tansform让它拽回来一半就行 */
            background-color: var(--color2);
            border-radius: 50%;
        }
        /*用伪元素给两只耳朵添加耳钉*/
        .ear::after{
            content: '';
            position: absolute;
            width: 8px;
            height: 8px;
            bottom: 6px;
            /* 从下往上走6px */
            background-color: white;
            border-radius: 50%;
        }
        /*让左右耳钉左右移动到正确的位置*/
        .ear_l::after{
            /* 从左往右走 */
            left: 13px;
        }
        .ear_r::after{
            /* 从右往左走 */
            right: 13px;
        }
        /* 设置整个脸部的五官区域 */
        .face {
            position: absolute;
            left: 50%;
            top: 105px;
            /* 脸部五官距离头顶向下走了105px */
            width: 110px;
            /* 内部的face占据父级宽度的一半 */
            height: 165px;
            /* 眉毛到下巴的部分 */
            transform: translate(-50%);
            /* 往回拽自身的一半 */
            z-index: 3;
            /* 让五官压盖在脸部上方 */
            transition: all 0.3s ease-in;
        }
        /* 眼睛中的眉毛 */
        .eye {
            position: absolute;
            top: 4px;
            width: 38px;
            height: 8px;
            background-color: #000;
            border-radius: 4px;
        }
        /* 分别设置两个左右为0的目的是让眉毛一个贴着左边一个贴着右边 */
        .eye_l{
            left: 0;
        }
        .eye_r{
            right: 0;
        }
        /* 伪元素做眼珠子 */
        .eye::before{
            content: '';
            position: absolute;
            left: 50%;
            /* 让它从眉毛（眉毛是眼珠的父元素）往下走18px */
            top: 18px;
            height: 16px;
            width: 16px;
            /* 眼珠子是圆形所以设置为50% */
            border-radius: 50%;
            background-color: black;
            transform: translate(-50%);
            transition: all 0.3s ease-in;
        }
        /* 鼻子 */
        .nose {
            position: absolute;
            left: 50%;
            top: 50px;
            width: 64px;
            height: 22px;
            border-radius: 11px;
            background-color: var(--color2);
            transform: translate(-50%);
            z-index: 5;
            /* 为了在向上看的过程中不会将鼻子挡住，所以要提高一个压盖层级 */
        }
        /* 使用伪元素设置鼻头 */
        .nose::before{
            content: '';
            position: absolute;
            left: 50%;
            /* 往上面走8px */
            top: -6px;
            height: 22px;
            width: 22px;
            border-radius: 50%;
            background-color: var(--color2);
            transform: translate(-50%);
        }
        /* 胡子 */
        .beard {
            position: absolute;
            /* 从五官的盒子顶部向下走80px */
            top: 80px;
            left: 50%;
            /* 宽度不会超过五官的宽度 */
            width: 90px;
            height: 120px;
            border-radius: 45px;
            background-color: #000;
            transform: translate(-50%);
            transition: all 0.3s ease-in;
        }
        /* 胡子上面的小圆 */
        .beard::before{
            content: '';
            position: absolute;
            left: 50%;
            /* 往上面走8px */
            top: -8px;
            height: 22px;
            width: 22px;
            border-radius: 50%;
            background-color: var(--color1);
            transform: translate(-50%);
        }
        /* 下巴 */
        .chin {
            position: absolute;
            /* 从胡子的盒子顶部向下走80px */
            top: 20px;
            left: 50%;
            /* 宽度不会超过胡子的宽度 */
            width: 74px;
            height: 64px;
            border-radius: 32px;
            background-color:var(--color1);
            transform: translate(-50%);
        }
        /* 嘴巴使用伪元素进行添加 */
        .chin::before {
            content: '';
            position: absolute;
            left: 50%;
            /* 嘴巴从嘴巴区域往下面走8px */
            top: 8px;
            width: 44px;
            height: 20px;
            border-radius: 0 0 22px 22px;
            background-color: white;
            transform: translate(-50%);
        }
        /* 嘴巴下边的小胡子 */
        .beard::after{
            content: '';
            position: absolute;
            left: 50%;
            /* 往下面走60px */
            top: 60px;
            height: 10px;
            width: 20px;
            border-radius: 4px;
            background-color: #000;
            transform: translate(-50%);
        }
        /* 给鼠标移上的四个方向的类名设置hover伪类状态，让元素自己自行组合 */
        .move.top:hover ~ .head::before {
            /* 往上面走了，原来脸是50px */
            top: 45px;
        }
        .move.top:hover ~ .head .face {
            /* 往上面走了，原来是105px */
            top: 90px;
        }
        .move.top:hover ~ .head .face .eye::before {
            /* 往上面走了，原来是18px */
            top: 8px;
        }
        .move.top:hover ~ .head .face .beard {
            /* 往上面走了，原来脸是80px */
            top: 74px;
        }
        .move.top:hover ~ .head .ear {
            /* 往下面走了，原来是127px */
            top: 132px;
        }



        .move.bottom:hover ~ .head::before {
            /* 往下面走了，原来脸是50px */
            top: 60px;
        }
        .move.bottom:hover ~ .head .face {
            /* 往下面走了，原来是105px */
            top: 125px;
        }
        .move.bottom:hover ~ .head .face .eye::before {
            /* 往下面走了，原来是18px */
            top: 28px;
        }
        .move.bottom:hover ~ .head .face .beard {
            /* 往下面走了，原来脸是80px */
            top: 86px;
        }
        .move.bottom:hover ~ .head .ear {
            /* 往上面走了，原来是127px */
            top: 122px;
        }



        .move.left:hover ~ .head .face {
            /* 往左面走了，原来是50% */
            left: 45%;
        }
        .move.left:hover ~ .head .face .eye::before {
            /* 往左面走了，原来是50% */
            left: 40%;
        }
        .move.left:hover ~ .head .ear_l {
            /* 往左面走了，原来是-28px */
            left: -23px;
        }
        .move.left:hover ~ .head .ear_r {
            /* 往右面走了，原来是-28px */
            right: -33px;
        }



        .move.right:hover ~ .head .face {
            /* 往右面走了，原来是50% */
            left: 55%;
        }
        .move.right:hover ~ .head .face .eye::before {
            /* 往右面走了，原来是50% */
            left: 60%;
        }
        .move.right:hover ~ .head .ear_l {
            /* 往右面走了，原来是-28px */
            left: -33px;
        }
        .move.right:hover ~ .head .ear_r {
            /* 往左面走了，原来是-28px */
            right: -23px;
        }
        </style>
</head>

<body>
    <div class="wrapper">
        <div class="move top left"></div>
        <div class="move top"></div>
        <div class="move top right"></div>
        <div class="move left"></div>
        <div class="move"></div>
        <div class="move right"></div>
        <div class="move bottom left"></div>
        <div class="move bottom"></div>
        <div class="move bottom right"></div>
        <div class="head">
            <!-- 可以使用伪元素添加一些子级 -->
            <!-- 设置公共样式，设置自己的样式 -->
            <div class="ear ear_l"></div>
            <div class="ear ear_r"></div>
            <div class="face">
                <div class="eye eye_l"></div>
                <div class="eye eye_r"></div>
                <div class="nose"></div>
                <div class="beard">
                    <div class="chin"></div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>
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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392

在这里插入图片描述

图片中的人物的眼睛，脸部会随着鼠标的移动而随之移动，页面还可以自适应页面的宽度。
思路：在页面内设置九个盒子，在每个盒子中设置hover属性，当鼠标移动在相应盒子时元素就会跟着移动。肖像的绘制就是由多个盒子元素叠加起来的。（注意在CSS中先写的元素会被压在下面，所以在构造元素的时候尽量从下往上写元素）

使用CSS中的grid布局（网格布局，可以自适应页面的宽度）：
在grid里面有两个核心：1）grid容器（父元素）2）grid项目（子元素）
类似于：

<div class="wrapper">
        <div class="move top left"></div>
        <div class="move top"></div>
        <div class="move top right"></div>
        <div class="move left"></div>
        <div class="move"></div>
        <div class="move right"></div>
        <div class="move bottom left"></div>
        <div class="move bottom"></div>
        <div class="move bottom right"></div>
    </div>
1
2
3
4
5
6
7
8
9
10
11

使用 CSS Grid布局首要的第一步，就是通过 display:grid; 来对容器声明一个网格容器，那么这个 div 元素里面对应的子元素就自动成为网格项目。当一个元素设置display值为grid的时候，此元素就会获得一个独立的渲染区域，我们可以通过在网格容器上定义网格定义行和网格定义列属性在网格项目上定义网格行和网格列为每一个网格项目定义位置和空间。所有的网格布局样式一般都是给父级设置的。
在这里设置九宫格：在父元素中添加九个盒子，将grid-template-columns设置为grid-template-columns:auto auto auto，即设置三列的网格，自适应平均分宽度，由于一行只能放置三列盒子，放不下了就会换行进行书写，而每列设置的是auto就会进行自动平分父级元素的宽度。由于网格布局会自适应窗口的变化，所以缩小放大窗口仍然是平均分的九宫格。

position:fixed固定定位：即固定于浏览器，浏览器滚动但是被固定定位的元素不动。
1）以浏览器的可视窗口为准：和父元素无关，不随滚动条滚动而滚动。
2）脱标：即不占有原来的位置。
3）要注意定位的组成：定位=定位模式（static，relative，absolute，fixed）+边偏移（top，bottom，left，right）
position:absolute绝对定位：是相对于它的祖先元素进行定位的
1）若无祖先或祖先元素无定位则以浏览器的文档对齐
2）以最近有定位的祖先元素为准进行移动
3）绝对定位会脱标，即其他元素会占有原来的位置
让元素在页面中居中显示：

			left: 50%;
            top: 50%;
            transform: translate(-50%,-50%); 
1
2
3

要注意left: 50%; top: 50%;是让元素的左顶点在水平和垂直方向分别走也页面的50%，顶点在页面的中间但是，整个元素不一定在页面的中间。为了让整个元素在页面居中要将元素拽回自身的一般，即向左，向上再走自身的一般。这个时候需要transform: translate(-50%,-50%);
translate()函数是css3的新特性.在不知道自身宽高的情况下，可以利用它来进行水平垂直居中.。
transform: translateY(-50%)垂直居中：让div 沿Y轴平移自身高度的一半。
同理，transform: translateX(-50%)为水平居中。
transform:translate(-50%,-50%)水平垂直居中：
当使用：top: 50%;left: 50%;，是以左上角为原点，往上（x轴）,左（y轴）移动自身长宽的 50%，故不处于中心位置。

CSS中的:root{}和var():

:root是一个伪类，表示文档根元素，非IE及ie8及以上浏览器都支持，在:root中声明相当于全局属性，只要当前页面引用了:root segment所在文件，都可以使用var()来引用
2)var()在属性里面使用如：var(–color1);

border-radius：边框圆角属性
属性值：px:拐角两侧指定的像素宽度变成圆角；%：参考怨怒是border及以内宽高的百分比
如上图：以px为单位的，比如10px就在元素宽和高的10px处变成圆角。以%为单位的就以宽和高的百分之多少处变成圆角，如50%就将宽高的一半处变成圆角。
border-radius中：
一个值：四个角；
两个值：左上角和右下角右上角和左下角；
三个值：左上角右上角和左下角右下角；
四个值：左上角右上角右下角左下角
box-shadow:盒影CSS属性在元素的框架周围添加阴影效果。您可以设置由逗号分离的多个效果。框阴影由 X 和 Y 偏移相对于元素、模糊和扩散半径以及颜色进行描述。
如果加头发的时候直接写移动数，没有inset，那么就会直接从盒子的最下面开始往下移动，但是加了inset之后就会从盒子的最上面开始往下移动，这样头发就在元素的内部了，胡子也一样。
伪元素选择器：伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构
两个重要的伪元素选择器：
1）::before 在元素内部的前面插入内容。
2）::after 在元素内部的后面插入内容
注意：
1）before和after创建一个元素，但是属于行内元素
2)新创建的这个元素在文档树中是找不到的，所以我们称为伪元素
3）语法：element::before
4）before和after必须右content属性，为空也可以
5）before在父元素内容的前面创建元素，after在父元素内容的后面插入元素
6）伪元素选择器和标签选择器一样，权重为1，当标签选择器和伪元素选择器叠加之后权重变为2，如div::before
7)after的后面指的是div里面的元素里的后面，如果，div里什么元素都没有他就是前面了

虽然before，after伪元素是在div元素的前面和后面，但是也是可以通过定位改变位置的。

hover后跟~：
注意hover后面一帮都是控制子元素
hover更改同级（兄弟）元素属性：
更改兄弟元素又分两种情况：

（1）需要更改的兄弟元素是当前元素的相邻元素，也就是说紧接着当前元素。那么写法如下：

.item-1:hover +.item-2{
    background-color:#50ff00;
}

1
2
3
4

（2）需要改变的兄弟元素不是当前元素的邻接元素（如上面演示图中的 item-1 和 item-3）。
这种情况就需要改一下写法，用上面的 “+” 就行不通了，得用 “~”。写法如下：

.item-1:hover ~.item-3>.item-3-child{
    background-color:#50ff00;
}

1
2
3
4

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/873427