HarmonyOS之CSS实现哆啦A梦头像原创精华

中软小助手

发布于 2022-3-18 09:50

浏览

3收藏

前言：

相信很多人的童年是看哆啦A梦一起长大的吧，小时候是真的希望能有一个自己的蓝胖子，因为蓝胖子无所不能。它伴随着我很长的一段童年生活。那么这次试着用纯css来实现一个静态版本的蓝胖子吧。

效果展示

HarmonyOS之CSS实现哆啦A梦头像-鸿蒙开发者社区

实现步骤

根据蓝胖子结构先定义好外部hml结构：

将head分解为三个部分分别为：眼睛（eyes），脸（face）和围巾（scarf）

hml代码：

<div class="container">
    <!--整体头部布局-->
    <div class="head">
        <!--      眼睛-->
        <div class="eyes"></div>
		<!--      脸部-->
		<div class="face"></div>
		<!--      围脖-->
		<div class="scarf"></div>
    </div>
</div>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

css代码部分：

.container {
    flex-direction: column;
    width: 100%;
    height: 100%;
}
/*头部样式代码*/
.head{
    width:480px;
    height:350px;
    background-color: #0093dd;
    position:relative;
    margin:20px;
    border-radius:220px;
    border:2px solid rgb(41,102,123);
    flex-direction: column;
}
/*眼睛部分样式代码*/
.eyes{
    position: relative;
    top: 34px;
    width: 208px;
    height: 120px;
    display:flex;
    justify-content: center;
    left:50%;
    transform:translateX(-50%);
}
/*脸部外层css*/
.face{
    position: relative;
    top: 10px;
    width: 280px;
    height: 260px;
    border-radius: 180px;
    border: 2px solid #000;
    background-color:#fff;
    left:50%;
    transform:translateX(-50%);
    flex-direction: column;
}
/*围脖部分的css*/
.scarf{
    position: relative;
    z-index: 10;
    top: 20px;
    width: 300px;
    height: 30px;
    left:50%;
    transform:translateX(-50%);
    border: 2px solid #000;
    border-radius: 16px;
    background-image:linear-gradient(top,rgb(195,64,20),rgb(121,13,11));
}
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.

第一步：我们来看看眼睛是如何实现的：

眼睛部分的hml代码结构：

      <div class="eyes">
<!--         左眼-->
         <div class="left-e">
<!--            左眼珠-->
            <div class="eyeball-left"></div>
         </div>
<!--         右眼-->
         <div class="right-e">
<!--            右眼珠-->
            <div class="eyeball-right"></div>
         </div>
      </div>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

眼睛部分的css代码部分：

/*眼睛部分样式代码*/
.eyes{
    position: relative;
    top: 34px;
    width: 208px;
    height: 120px;
    display:flex;
    justify-content: center;
    left:50%;
    transform:translateX(-50%);
}
/*左右眼公共的css*/
.left-e,.right-e{
    position: absolute;
    width: 100px;
    height: 110px;
    border: 2px solid black;
    border-radius: 50px;
    background-color:#fff;
    z-index: 3;
}
/*左眼定位css*/
.left-e{
    left:0;
}
/*右眼定位css*/
.right-e{
    right:0;
}
/*黑色的眼球部分的css*/
.eyeball-left,.eyeball-right{
    position: absolute;
    top: 70px;
    background-color:#000;
    width: 20px;
    height: 20px;
    border-radius: 10px;
}
/*左眼球css*/
.eyeball-left{
    right:10px;
    top: 62px;
}
/*右眼球css*/
.eyeball-right{
    left: 10px;
    top: 62px;
}
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.

此时的效果图为：

HarmonyOS之CSS实现哆啦A梦头像-鸿蒙开发者社区

第二步：我们来看看脸是如何实现的

脸（face）的部分可分解为：鼻子（nose），胡须（whiskers），中间的对称线（symmetric-line），嘴巴(mouth)

脸部分hml代码：

      <div class="face">
		<!--鼻子-->
         <div class="nose"></div>
		<!--胡须-->
         <div class="whiskers">
		<!--左胡须-->
            <div class="whiskers-left">
		<!--上胡须-->
               <div class="wlfirst"></div>
		<!--中间胡须 -->
               <div class="wlsecond"></div>
		<!--下胡须-->
               <div class="wlthree"></div>
            </div>
		<!--右胡须-->
            <div class="whiskers-right">
		<!--上胡须-->
               <div class="wrfirst"></div>
		<!--中间胡须-->
               <div class="wrsecond"></div>
		<!--下胡须-->
               <div class="wrthree"></div>
            </div>
         </div>
		<!--中轴线-->
         <div class="symmetric-line"></div>
		<!--嘴巴-->
         <div class="mouth">
            <div class="smile"></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.

脸部分的css代码：

/*脸部外层css*/
.face{
    position: relative;
    top: 10px;
    width: 280px;
    height: 260px;
    border-radius: 180px;
    border: 2px solid #000;
    background-color:#fff;
    left:50%;
    transform:translateX(-50%);
    flex-direction: column;
}
/*鼻子部分的css*/
.nose{
    position: relative;
    left:50%;
    transform:translateX(-50%);
    top:0px;
    width: 40px;
    height: 40px;
    border: 2px solid #000;
    border-radius: 20px;
    background-color:red;
    z-index:4;
}
/*胡须部分的css*/
.whiskers{
    position: relative;
    top: 20px;
    left:50%;
    transform:translateX(-50%);
    width: 200px;
    height: 50px;
}
/*左胡须*/
.whiskers-left{
    position: absolute;
    left: 0;
    flex-direction: column;
}
/*右胡须*/
.whiskers-right{
    position: absolute;
    right: 0;
    flex-direction: column;
}
/*第一个胡须的css*/
.wlfirst,.wrfirst{
    width: 60px;
    height: 4px;
    background-color:#000;
    margin-bottom: 10px;
}
/*中间胡须的css*/
.wlsecond,.wrsecond{
    width: 58px;
    height: 4px;
    background-color:#000;
}
/*下边的胡须的css*/
.wlthree,.wrthree{
    width: 60px;
    height: 4px;
    background-color:#000;
    margin-top: 10px;
}
/*左边上胡须的旋转*/
.wlfirst{
    transform-origin:50px 0;
    transform: rotate(30deg);
}
/*有边上胡须的旋转*/
.wrfirst{
    transform-origin: 10px 0;
    transform: rotate(-30deg);
}
/*左边下胡须的旋转*/
.wlthree{
    transform-origin: 50px 0;
    transform: rotate(-30deg);
}
/*右边下胡须的旋转*/
.wrthree{
    transform-origin: 10px 0;
    transform: rotate(30deg);
}
/*最中间的那个对称线css*/
.symmetric-line{
    position: relative;
    top: -40px;
    height: 160px;
    width: 3px;
    background-color:#000;
    left:50%;
    transform:translateX(-50%);
}
/*嘴巴最外层部分的css*/
.mouth{
    width: 200px;
    height: 52px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 142px;
    background-color: #000;
    border-radius: 200px 200px 4px 4px;
}
/*嘴巴部分的css*/
.smile{
    position: absolute;
    width: 200px;
    height: 52px;
    border-radius: 200px 200px 0 0;
    background-color: #fff;
    left: 50%;
    transform:translateX(-50%);
    top:-4px;
}
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.

此时效果图:

HarmonyOS之CSS实现哆啦A梦头像-鸿蒙开发者社区

第三步：实现围脖

接下来就是围脖这部分的代码了，围脖部分分为了两个部分：围脖，铃铛

hml代码：

<div class="scarf">
<!--         铃铛-->
         <div class="bell">
<!--            第一根横线-->
            <div class="bell-1"></div>
         <!--            第二根横线-->
            <div class="bell-2"></div>
         <!--            铃铛上的圆-->
            <div class="bell-3"></div>
         <!--            铃铛下的线-->
            <div class="bell-4"></div>
         </div>
      </div>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

css部分代码：

/*围脖部分的css*/
.scarf{
    position: relative;
    z-index: 10;
    top: 20px;
    width: 300px;
    height: 30px;
    left:50%;
    transform:translateX(-50%);
    border: 2px solid #000;
    border-radius: 16px;
    background-image:linear-gradient(top,rgb(195,64,20),rgb(121,13,11));
}
/*铃铛部分css*/
.bell{
    position: relative;
    top: 10px;
    width: 40px;
    height: 40px;
    border: 2px solid #000;
    border-radius: 40px;
    background-color:#CD7F32;
    left:50%;
    transform:translateX(-50%);
    flex-direction: column;
}
.bell-1,.bell-2,.bell-3,.bell-4{
    position: relative;
    background-color:#000;
}
/*第一个线条css*/
.bell-1{
    top: 4px;
    width: 100%;
    height: 4px;
}
/*第二个线条css*/
.bell-2{
    top: 6px;
    width: 100%;
    height: 4px;
}
/*铃铛上的孔css*/
.bell-3{
    left:50%;
    transform:translateX(-50%);
    top: 8px;
    width: 16px;
    height: 16px;
    border-radius: 8px;
}
/*铃铛孔下面的黑线css*/
.bell-4{
    top: 2px;
    height: 100%;
    width: 4px;
    left:50%;
    transform:translateX(-50%);
}
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.

最终的效果图如下：

HarmonyOS之CSS实现哆啦A梦头像-鸿蒙开发者社区

总结

以上就是所有的代码，最初的预览也如最上面的效果图的展示。其实写这个不难，主要是调试起来麻烦，而且也不像普通的css样式一样，在鸿蒙系统中存在着相当一部分的css样式不支持。主要是需要调试好position和css3transform属性的应用上。欢迎各位开发者一起讨论与研究，本次分享希望对大家的学习有所帮助。