HarmonyOS的CSS实现哆啦A梦头像

时间：2023-03-12 16:42:35 科技观察

更多内容请访问：与华为官方共建的鸿蒙技术社区https://ost.51cto.com前言：相信很多人都成长了小时候看哆啦A梦。小时候的他们，非常希望能有一个属于自己的蓝胖子，因为蓝胖子是无所不能的。在我的童年时代，它已经陪伴了我很长时间。所以这次尝试用纯css来实现一个静态版的蓝胖子。效果展示实现步骤根据蓝胖子的结构定义外部hml结构：将头部分解成三部分：眼睛（eyes）、脸（face）和围巾（scarf）。Hml代码：

css代码部分:.container{flex-direction:column;宽度：100%；height:100%;}/*头部样式代码*/.head{width:480px;高度：350px；背景色：#0093dd；职位：相对；边距：20px；边界半径：220px；边框：2px实心rgb（41,102,123）；flex-direction:column;}/*眼部样式代码*/.eyes{position:relative;顶部：34px；宽度：208px；高度：120px；显示：弹性；证明内容：居中；左：50%；transform:translateX(-50%);}/*facecss*/.face{position:relative;顶部：10px；宽度：280px；高度：260px；边界半径：180px；边框：2px实心#000；或：#fff；左：50%；变换：翻译X（-50%）；flex-direction:column;}/*围兜部分的css*/.scarf{position:relative;z-指数：10；顶部：20px；宽度：300px；高度：30px；左：50%；转换：translateX(-50%)；边框：2px实心#000；边界半径：16px；background-image:linear-gradient(top,rgb(195,64,20),rgb(121,13,11));}第一步：先看看眼睛是如何实现的：hml代码结构眼睛：

眼睛部分css代码部分：/*眼睛部分样式代码*/.eyes{position:relative;顶部：34px；宽度：208px；高度：120px；显示：弹性；证明内容：居中；左：50%；transform:translateX(-50%);}/*左右眼publiccss*/.left-e,.right-e{position:absolute;宽度：100px；高度：110px；边框：2px纯黑色；边界半径：50px；背景色：#fff；z-index:3;}/*左眼定位css*/.left-e{left:0;}/*右眼定位css*/.right-e{right:0;}/*黑眼球部分css*/.eyeball-left,.eyeball-right{position:absolute;顶部：70px；背景色：#000；宽度：20px；高度：20px；border-radius:10px;}/*左眼球css*/.eyeball-left{right:10px;top:62px;}/*右眼球css*/.eyeball-right{left:10px;top:62px;}此时的效果图是：第二步：看看人脸是如何实现的人脸（face）的部分可以分解为：鼻子（nose）、胡须（whiskers）、中间对称线（对称线），嘴巴（嘴巴）面部部分hml代码：

人脸部分的css代码：/*facecss*/.face{position:relative;top:10px;width:280px;height:260px;border-radius:180px;border:2pxsolid#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:2pxsolid#000;border-radius:20px;background-color:red;z-index:4;}/*cssforwhiskers*/.whiskers{position:relative;top:20px;left:50%;transform:translateX(-50%);width:200px;height:50px;}/*left胡须*/.whiskers-left{position:absolute;left:0;flex-direction:column;}/*rightbeard*/.whiskers-right{position:absolute;right:0;flex-direction:column;}/*第一个胡子的css*/.wlfirst,.wrfirst{width:60px;height:4px;background-color:#000;margin-bottom:10px;}/*中间胡子的css*/.wlscond,.wrsecond{宽度：58px；高度：4px；背景色：#000;}/*css*/.wlthree,.wrthree{宽度：60px;高度：4px；背景颜色：#000；margin-top:10px;}/*左边胡须的旋转*/.wlfirst{transform-origin:50px0;transform:rotate(30deg);}/*侧面胡须的旋转*/。wrfirst{transform-origin:10px0;transform:rotate(-30deg);}/*左下胡须的旋转*/.wlthree{transform-origin:50px0;transform:rotate(-30deg);}/*右下胡子的旋转*/.wrthree{transform-origin:10px0;transform:rotate(30deg);}/*最中间的对称线css*/.symmetric-line{position:relative;顶部：-40px；高度：160px；宽度：3px；背景色：#000；左：50%；transform:translateX(-50%);}/*嘴最外层的css*/.mouth{width:200px;高度：52px；位置：绝对；左：50%；转换：translateX(-50%)；顶部：142px；背景色：#000；border-radius:200px200px4px4px;}/*嘴巴部分的css*/.smile{position:absolute;宽度：200px；H八：52px；边框半径：200px200px00；背景色：#fff；左：50%；变换：翻译X（-50%）；号码布的下一部分是号码布的代码。号码布分为号码布和铃铛两部分hml代码：

/div>

css部分代码：/*围兜部分的css*/.围巾{位置：相对；z-指数：10；顶部：20px；宽度：300px；高度：30px；左：50%；变换：翻译X（-50%）；边框：2px实心#000；边界半径：16px；背景图像：线性渐变（顶部，rgb（195,64,20），rgb（121,13,11））;}/*bellcss*/.bell{position:relative;顶部：10px；宽度：40px；高度：40px；边框：2px实心#000；边界半径：40px；背景色：#CD7F32；左：50%；(-50%)；flex-direction:column;}.bell-1,.bell-2,.bell-3,.bell-4{position:relative;background-color:#000;}/*第一行css*/.bell-1{top:4px;宽度：100%；height:4px;}/*第二行css*/.bell-2{top:6px;宽度：100%；高度：4px；}/*铃css上的孔*/.bell-3{left:50%;变换：翻译X（-50%）；顶部：8px；宽度：16px；高度：16px；border-radius:8px;}/*铃孔下方的黑线css*/.bell-4{top:2px;高度：100%；宽度：4px；左：50%；transform:translateX(-50%);}最终效果图如下：总结以上就是所有代码，初步预览如上图效果图。其实这样写并不难，主要是调试起来比较麻烦，而且不像普通的css样式。鸿蒙系统中有相当多的css样式。不支持。主要是需要调试position和css3transform属性的应用。欢迎广大开发者共同探讨研究。希望这次分享对大家的学习有所帮助。更多信息请访问：与华为官方共建的鸿蒙技术社区https://ost.51cto.com

上一篇：sx：快速、强大且易于使用的现代网络扫描器

下一篇：2023年高级威胁攻击趋势预测

HarmonyOS的CSS实现哆啦A梦头像相关文章