莫道桑榆晚，为霞尚满天。这篇文章主要讲述HarmonyOS纯css3版冰墩墩相关的知识，希望能为你提供帮助。
【HarmonyOS纯css3版冰墩墩】春节不停更，此文正在参加「星光计划-春节更帖活动」
作者：黄海兵
前言北京冬奥会已经圆满结束，冬奥会吉祥物冰墩墩也是火遍全网，网络上其他语言的冰墩墩层出不穷，我们这次用纯css3来实现一个动态版的冰墩墩。
效果展示：

文章图片

实现步骤根据冰墩墩的模型，布置好整体结构，结构布局如下:
1、背景、脸部轮廓与躯体主干
背景板：

< !--背景板 --> body background: rgba(72, 167, 255, 0.733); overflow: hidden; width: 100%; height: 100%; < !--调整模型位置 --> .main width: 100px; margin: 10% auto; perspective: 300px; position: absolute; top: 20%; left: 50%; < !-- 沿X轴向左平移父级50%的宽度 再整体放大2倍 --> transform: translateX(-50%) scale(2); .body width: 100px; height: 100px; < !--3D旋转 绕X轴逆时针旋转47° 再将Y轴高度放大1.6倍 --> transform: rotate3d(-1, 0, 0, 47deg) scaleY(1.6); position: relative;

脸部轮廓依次包含了眼睛、鼻子、嘴巴，代码如下：

< div class="face-round"> < div class="face"> < !--眼睛 --> < div class="eyes"> < div class="left"> < div class="ball"> < /div> < /div> < div class="right"> < div class="ball"> < /div> < /div> < /div> < !--鼻子 --> < div class="nose"> < /div> < !-- 嘴巴 --> < div class="mouth"> < div class="shape"> < /div> < /div> < /div> < /div>

css部分主要是通过transform的translate来进行2D转换和scale进行缩放缩放
脸部轮廓整体效果如下：

文章图片

css样式代码如下：

/* 脸部轮廓样式*/ .face-round left: 50%; /* 沿X轴向左平移父级50%的宽度 Y轴高度缩小为原先的70%*/ transform: translate(-50%) scaleY(.7); position: absolute; top: -5px; background: #fff; border: 1px solid rgb(255, 196, 0); width: 86px; height: 86px; padding: 3px; border-radius: 40px; box-sizing: border-box; z-index: 2;

文章图片

再画个脸部

/* 脸部 */ .face background: #fff; border: 1px solid rgb(6, 164, 255); width: 76px; height: 76px; border-radius: 40px; z-index: 2;

文章图片

接下来画眼睛

/* 眼睛 */ .face> .eyes width: 56px; display: flex; justify-content: space-between; position: absolute; top: 12px; left: 50%; /* 沿X轴向左平移父级50%的宽度*/ transform: translateX(-50%); z-index: 2; .face> .eyes> .left, .face> .eyes> .right width: 20px; height: 30px; border-radius: 50%; background: #000; /* 沿着Z轴3D旋转30度*/ transform: rotateZ(30deg); position: relative; /* 调整右眼的角度*/ .face> .eyes> .right transform: rotateZ(-30deg);

看下效果

文章图片

接下来把眼睛里的眼球补上

.face> .eyes .ball background: #000; border: 2px solid #fff; width: 10px; height: 10px; border-radius: 50%; position: absolute; top: 14%; left: 50%; /* 沿X轴向左平移父级50%的宽度*/ transform: translateX(-50%); /* 用径向渐变创建 "图像"，指定圆形的径向渐变，#fff为起始颜色，#000为终止颜色*/ background-image: radial-gradient(circle, #fff, #fff, #000, #000, #000, #000, #000, #000); /* 设置中间为径向渐变圆心的纵坐标值*/ background-position: center -10px;

效果图如下：

文章图片

接下来是鼻子：

.face > .nose background: #000; width: 6px; height: 6px; border-radius: 50%; position: absolute; top: 30px; left: 50%; /* 沿X轴向左平移父级50%的宽度*/ transform: translateX(-50%); z-index: 4;

然后是嘴巴：

.face > .mouth background: #000; width: 20px; height: 20px; border-radius: 50%; position: absolute; top: 28px; left: 50%; /* 沿X轴向左平移父级50%的宽度*/ transform: translateX(-50%); z-index: 1; .face > .mouth > .shape background: #fff; width: 20px; height: 20px; border-radius: 50%; /* 沿Y轴向上平移2px 再放大1.2倍*/ transform: translateY(-2px) scaleX(1.2);

效果如下：

文章图片

躯体主干部分：

/* 白色躯体*/ .bg width: 100%; height: 100%; border-radius: 50%; background: #fff;

效果如下：

文章图片

2、耳朵、手臂
结构布局如下：

< div class="ears"> < div class="left"> < /div> < div class="right"> < /div> < /div> < div class="arm"> < div class="left"> < /div> < div class="right"> < div class="hand"> ? < /div> < /div> < /div>

再给耳朵和手臂加上动画效果，主要通过animation和@keyframes来制作动画，效果如下：

文章图片

代码如下：

/* 手臂公共样式*/ .arm position: absolute; top: 40px; z-index: -1; display: flex; justify-content: space-between; .arm> .left, .arm> .right border-radius: 10px; background: #000; width: 20px; height: 40px; transform-origin: center; /* 左臂*/ .arm> .left /* 沿着Z轴3D旋转35°再沿X轴向左平移10px*/ transform: rotateZ(35deg) translateX(-10px); animation: arm-left .5s linear infinite alternate; /* 右臂*/ .arm> .right transform: rotateZ(30deg) translateX(42px) translateY(-55px); /* 动画效果 关键帧名称为arm-right 1s内完成 linear匀速播放 infinite无限播放 alternate-reverse动画在奇数次反向播放，在偶数次正向播放。*/ animation: arm-right 1s linear infinite alternate-reverse; /* 左臂关键帧*/ @keyframes arm-left from transform: rotateZ(30deg) translateX(-10px); to transform: rotateZ(40deg) translateX(-10px); /* 右臂关键帧*/ @keyframes arm-right from transform: rotateZ(33deg) translateX(42px) translateY(-55px); to transform: rotateZ(37deg) translateX(42px) translateY(-55px); .arm > .right > .hand width: 10px; height: 10px; color: rgb(224, 1, 1); margin: auto; transform: translateY(-3px) scaleX(1.1) scaleY(0.8) rotateZ(10deg); /* 耳朵公共样式*/ .ears width: 40px; left: 50%; transform: translateX(-50%); position: absolute; top: 0px; z-index: -1; display: flex; justify-content: space-around; /* 左耳*/ .ears> .left background: #000; width: 20px; height: 40px; border-radius: 10px; transform: translateX(-15px) rotateZ(-25deg); animation: ears-left .5s linear infinite alternate; /*右耳*/ .ears> .right background: #000; width: 20px; height: 40px; border-radius: 10px; transform: translateX(15px) rotateZ(25deg); animation: ears-right .5s linear infinite alternate; /* 左耳动画*/ @keyframes ears-left from transform: translateX(-15px) rotateZ(-23deg); to transform: translateX(-15px) rotateZ(-38deg); /* 右耳动画*/ @keyframes ears-right from transform: translateX(15px) rotateZ(23deg); to transform: translateX(15px) rotateZ(38deg);

3、腿、脚
实现效果如下：

文章图片

代码如下：

< div class="bg"> < /div> < div class="logo"> < /div> < div class="leg"> < div class="left"> < /div> < div class="right"> < /div> < /div> < div class="foot"> < div class="left"> < /div> < div class="right"> < /div> < /div>

给腿、脚加上动画效果：

/* 腿公共样式*/ leg position: absolute; bottom: -8px; /* 左腿*/ .leg > .left width: 40px; height: 50px; background: #fff; display: inline-block; transform: translateX(4px) rotateZ(-3deg); /* 右腿*/ .leg > .right width: 40px; height: 50px; background: #fff; display: inline-block; transform: translateX(12px) rotateZ(3deg); /* 脚公共样式*/ .foot position: absolute; bottom: 2px; display: flex; justify-content: space-between; /* 左脚*/ .foot > .left width: 40px; height: 16px; border-radius: 0 0 10px 10px; background: #000; transform: translateX(5px) rotateZ(0deg) translateY(20px); animation: foot-left .5s linear infinite alternate; /* 右脚*/ .foot > .right width: 40px; height: 16px; border-radius: 0 0 10px 10px; background: #000; transform: translateX(16px) rotateZ(0deg) translateY(20px); animation: foot-right .5s linear infinite alternate-reverse; /* 左脚动画*/ @keyframes foot-left from transform: translateX(5px) rotateZ(0deg) translateY(18px); to transform: translateX(5px) rotateZ(0deg) translateY(20px); /* 右脚动画*/ @keyframes foot-right from transform: translateX(16px) rotateZ(0deg) translateY(18px); to transform: translateX(16px) rotateZ(0deg) translateY(20px);

4、最后效果展示
再加上底部和logo，最后看下整体效果：

文章图片

总结本文主要是讲解如何用css实现一个动态版的冰墩墩，主要的技术用到了css里的transform和animation， 欢迎各位开发者一起讨论与研究，本次分享希望对大家的学习有所帮助。
更多原创内容请关注：中软国际 HarmonyOS 技术团队入门到精通、技巧到案例，系统化分享HarmonyOS开发技术，欢迎投稿和订阅，让我们一起携手前行共建鸿蒙生态。
想了解更多关于鸿蒙的内容，请访问：
51CTO和华为官方合作共建的鸿蒙技术社区
https://harmonyos.51cto.com/#bkwz
::: hljs-center

文章图片

:::

推荐阅读

• 

  海门大桥
• 

  胃癌|胃癌偏爱这4类人，若你在其中，做好这5点，或许能幸免！
• 

  王者荣耀下载最新版安卓，王者荣耀助手安卓版下载
• 

  电商怎么做 粮油电商是什么意思，粮油是啥
• 

  弈星重塑啦！从围棋的对弈体验入手，天才少年的成长的关键词是：以身入局，____ 王者荣耀8月5日每日一题答案
• 

  安卓 强制前台,手机回收模式下安卓应用如何继续在后台运行?
• 

  电脑调哪几个设置可以让电脑变快速度 电脑调哪几个设置可以让电脑变快
• 

  老款5角硬币图片 「新款5元硬币」
• 

  西瓜汁放冰箱可以保存多久
• 

  qqbot源码分析,nginx源码分析
• 

  梦见抱着男孩
• 

  雨隐村曾经有几位首领 火影忍者手游10月28日每日一题答案
• 

  你看过最好看的美剧是什么？
• 

  php长数据发送 php传输数据的方式
• 

  行政处罚的种类包括人身罚行为罚财产罚和申诫罚 行政处罚的种类
• 

  mysql批量查询语句 mysql查询批量替换
• 

  六月黄吃到什么时候
• 

  小森生活游戏介绍 小森生活好玩吗
• 

  鸡丸的做法大全 鸡丸怎么做
• 

  秦时明月世界怎么转职 秦时明月世界转职业

• k8s1.20.15 部署ingress-nginx 与测试
• Python按符号分组连续元素
• Python使用Tkinter的GUI日历示例
• Python电影推荐系统的实现
• Python输入方法的竞争编程
• Python如何以及在哪里应用特征缩放（）
• Python如何动态更改Checkbutton的文本（）
• Python内部函数用法完整指南
• Python Itertool模块用法完整指南