想了解更多开源请访问：开源基础软件社区https://ost.51cto.com前言我在工作在鸿蒙项目上的过程中，发现H5中使用的CSS样式的一些属性在鸿蒙上是不支持的，显示效果不一样，所以做了一个卡通狮子，帮助我更好的理解CSS在鸿蒙中的用法.效果展示实现步骤1.耳朵使用clip-path属性，即裁剪创建的元素的可显示区域。区域内的部分显示，区域外的部分隐藏。传入的两个值代表其裁剪的半径。at后面的两个值分别代表crop的x轴和y轴坐标。.ear{宽度：70px;高度：70px；边界半径：40px；位置：绝对；顶部：10px；z-指数：9；剪辑路径：椭圆（100%100%at-20%-10%）；background-color:rgb(247,190,123);}同样，类似半圆的body也是通过clip-path:ellipse实现的。2.鼻子鼻子是由一个三角形组成的，也就是设置宽高为0，简单的使用border属性来完成，设置border-width来代替block的宽高，但是里面的block由四个小三角形组成，因为排列顺序是上、右、下、左，所以只需要给其中一个角指定颜色，就可以实现一个三角形。.nose{宽度：0;高度：0；位置：绝对；左：50%；顶部：50%；转换：翻译（-50%，-50%）；边框宽度：20px30px；边框样式：实心；边距顶部：80px；z-指数：30；border-color:rgb(89,60,62)transparenttransparenttransparent;}3.尾巴主要是border实现的，画一个矩形div块，让它旋转一个角度，然后就画其中一个border，然后使用border-radius:108px103px，使其弯曲。尾巴摆动动画：尾巴的力量来自于尾巴的根部，所以要从根部做一个轻微摇摆的旋转动画。所以使用了transform-origin属性，它可以让你改变一个元素变形的原点，比如root如果你想发力，那么直接设置为transform-origin:50%100%也可以这样写作为变换原点：中心底部。.tail{宽度：300px;高度：300px；边框半径：108px130px；位置：绝对；左：-230px；顶部：-130px；边框宽度：30px；(248,210,163)透明透明；动画：1s摆动ease-in-out无限交替向前；transform-origin:50%100%;}@keyframeswagging{0%{transform:rotate(125deg)translateX(0)translateY(0px);}100%{变换：旋转（130度）translateX（15px）translateY（-15px）；}}完整代码1，hml部分
