效果图
来自鸿蒙的开机效果
所需要的技术点
filter 和 clip-path 两块核心技术在团队中已经做过分享，那么这里就不再展开了。transform 和 animation 大家平时用的也非常多，我呢也就提点一下不做过度的解读，就提点一下主要的属性。
我的分享希望像游戏里升级打怪，先通过升等级，打装备，然后再去挑战大boos，有种一个一个台阶上升的趋势感知。本次的开机动画也之前几个系列的“最终章”。
变换属性 CSS3 transform
Transform 属性应用于元素的 2D 或 3D 转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。
transform 语法
transform: none|transform-functions
| 值 | 描述 |
|---|---|
| none | 定义不进行转换。 |
| translate(x,y) | 定义 2D 转换。 |
| scale(x,y) | 定义 2D 缩放转换。 |
| rotate(angle) | 定义 2D 旋转，在参数中规定角度。 |
| skew(x,y) [skjuː] | 定义沿着 X 和 Y 轴的 2D 倾斜转换。 |
CSS3 animation（动画） 属性
animation 语法
animation: name duration timing-function delay iteration-count direction fill-mode play-state
| 属性 | 说明 |
|---|---|
animation-name | 指定要绑定到选择器的关键帧的名称 |
animation-duration | 动画指定需要多少秒或毫秒完成 |
animation-timing-function | 设置动画将如何完成一个周期 |
animation-delay | 设置动画在启动前的延迟间隔。 |
| animation-iteration-count | 定义动画的播放次数。 |
| animation-direction | 指定是否应该轮流反向播放动画。 |
animation-fill-mode | 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。 |
| animation-play-state | 指定动画是否正在运行或已暂停。 |
圆圈圈动画分析
第一种
一大一小两个半圆，小半圆的背景色保持与页面背景色一致的颜色，然后盖在大半圆上(就像日环食那样)，这样看起来就像是个圆环啦
第二种
先写出来个半圆，不给加背景色，只给加边框，最后把下边框去掉，于是看起来就是个半圆环啦
第三种
直接写个圆，然后写上边框，圆环外套个容器，外层容器高度为圆的一半，最后 overflow: hidden;隐藏掉露在外面那半部分
第四种
把第三种的overflow: hidden;换成clip-path,效果图和第三种一样
确定方案
最终还是选择了overflow: hidden;，因为用它来做圆环升起的效果很合适，把露在外面的那部分圆隐藏掉，然后控制圆的位置，看起来就像是一轮空心的明月从海面上升起来了一样
接下来再把两个半圆环拼接到一起去就可以了
去掉为了向大家展示原理的那些杂七杂八的动画之后
〇有一个外发光的效果
首先我们可以看到这个〇有一个外发光的效果，在黑色背景的衬托下显得格外明亮。CSS 的外发光效果其实很好做，就是在黑色背景下用 box-shadow 给元素添加一个适当模糊的白色阴影。
此时溢出隐藏overflow: hidden这个方案的缺点就会被暴露出来，由于我们的阴影部分面积在上下左右四个方向已经超出了外面盒子的宽高，所以被隐藏掉了，我们只好为外面的盒子加入内边距padding来解决掉这个缺陷。
我们也把我们的〇变白变粗，但仔细看又会发现新的问题：那就是 box-shadow 默认只会在元素的外部添加阴影，我们〇这个圆圈的内部却没有阴影，好在 box-shadow 是支持多重阴影和内阴影的
少了点什么，优化一下
现在看起来已经不错了，但还是少了点什么，少的就是圆环倒映在水面上的模糊效果。要知道在日常生活中，倒映在水面上的图案通常会比真正的视图稍稍模糊一点：
他这水波的纹理搞得跟指纹一样… 如果要咱们写出这样的一个滤镜的话还是非常困难的，但好在鸿蒙的开场动画并没有能够看到水波的纹理，所以咱们就可以用模糊效果filter: blur(2px)
