莫道桑榆晚，为霞尚满天。这篇文章主要讲述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

文章图片

:::

推荐阅读

• 

  肤色暗黄怎么去角质
• 

  移动plus会员是什么意思 plus会员是什么意思
• 

  王者荣耀亚瑟最强出装是什么？只要攻击性型的不要防御的？
• 

  对纸飞机头哈气 纸飞机哈气什么意思
• 

  游戏大全小游戏益智，益智小游戏排名
• 

  jquery页面延时加载，jquery设置延时动画
• 

  南阳卧龙岗2021春节门票价格 南阳卧龙岗2023年春节游玩攻略
• 

  梦见准备买房子 梦见准备买房子是什么预兆呢
• 

  按日期分组查询oracle 按日期分组mysql
• 

  单反夜景怎么拍
• 

  猕猴桃寒性还是热性的，猕猴桃温性还是寒性还是平性
• 

  手机怎么自动刷新图片格式，手机网页怎么自动刷新
• 

  英文微信名男生简单气质 英文微信名男
• 

  有关保险诈骗罪的相关解释包括哪些规定
• 

  ios开发自用软件免费吗，苹果开发的软件不是说免费吗
• 

  党参和当归的区别介绍
• 

  1个穿云箭主播能挣多少 快手一个穿云箭多少钱
• 

  mysql中的约束有哪些 mysql如何用语句约束
• 

  排骨大酱汤的做法 排骨大酱煲怎么做
• 

  qq找回

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