HarmonyOS纯css3版冰墩墩

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

HarmonyOS纯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进行缩放缩放
脸部轮廓整体效果如下:
HarmonyOS纯css3版冰墩墩

文章图片

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;

HarmonyOS纯css3版冰墩墩

文章图片

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

HarmonyOS纯css3版冰墩墩

文章图片

接下来画眼睛
/* 眼睛 */ .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);

看下效果
HarmonyOS纯css3版冰墩墩

文章图片

接下来把眼睛里的眼球补上
.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;

效果图如下:
HarmonyOS纯css3版冰墩墩

文章图片

接下来是鼻子:
.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);

效果如下:
HarmonyOS纯css3版冰墩墩

文章图片

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

效果如下:
HarmonyOS纯css3版冰墩墩

文章图片

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来制作动画,效果如下:
HarmonyOS纯css3版冰墩墩

文章图片

代码如下:
/* 手臂公共样式*/ .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、腿、脚
实现效果如下:
HarmonyOS纯css3版冰墩墩

文章图片

代码如下:
< 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,最后看下整体效果:
HarmonyOS纯css3版冰墩墩

文章图片

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

文章图片

:::

    推荐阅读