HarmonyOS之CSS实现哆啦A梦头像 原创 精华
中软小助手
发布于 2022-3-18 09:50
浏览
3收藏
作者：郑瑶
前言：
相信很多人的童年是看哆啦A梦一起长大的吧，小时候是真的希望能有一个自己的蓝胖子，因为蓝胖子无所不能。它伴随着我很长的一段童年生活。那么这次试着用纯css来实现一个静态版本的蓝胖子吧。
效果展示
实现步骤
根据蓝胖子结构先定义好外部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>
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));
}
第一步：我们来看看眼睛是如何实现的：
眼睛部分的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>
眼睛部分的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;
}
此时的效果图为：
第二步：我们来看看脸是如何实现的
脸（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>
脸部分的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;
}
此时效果图:
第三步：实现围脖
接下来就是围脖这部分的代码了，围脖部分分为了两个部分：围脖，铃铛
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>
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%);
}
最终的效果图如下：
总结
以上就是所有的代码，最初的预览也如最上面的效果图的展示。其实写这个不难，主要是调试起来麻烦，而且也不像普通的css样式一样，在鸿蒙系统中存在着相当一部分的css样式不支持。主要是需要调试好position和css3transform属性的应用上。欢迎各位开发者一起讨论与研究，本次分享希望对大家的学习有所帮助。
更多原创内容请关注：中软国际 HarmonyOS 技术团队
入门到精通、技巧到案例，系统化分享HarmonyOS开发技术，欢迎投稿和订阅，让我们一起携手前行共建鸿蒙生态。
©著作权归作者所有，如需转载，请注明出处，否则将追究法律责任
分类
赞
5
收藏 3
回复
相关推荐
哆啦A梦确实是童年梦想伙伴了，感谢老师分享实现方法
哆啦A梦！谢谢老师~
哆啦A梦，变成熟了
斯国一