翻译

实现理念

1.首先，通过HTML CSS实现加载动画的静态效果；

2.根据需求为每个动画设计不同的动画效果。

例如，第一个加载图标的静态绘图

1.首先，确定动画框的宽度和高度；

2.设置框中每个矩形的宽度和高度并定位(注意：这里需要将矩形的旋转中心点移动到矩形右侧的端点，以便于以后在这个点旋转。);

3.通过矩形框的伪元素设置显示矩形的背景、宽度和高度，同时定位。

4.由于第二步已经移动了旋转中心，这里我们直接旋转每个框中的矩形(注意：旋转角度=360/框中的矩形数)。圆形线{ width: 100px高度： 100像素；display:内联块；相对位置：}.圆圈线文本{ display:块；宽度：50%；height: 5pxopacity:7绝对位置：top : calc(50%-2.5px)；left: 0pxtransform-origin:右中；}.{ content : }之前的圆圈线文本：“”；display:块；宽度： 15px；height: 5px绝对位置：top : 0；right: 10px背景-颜色：蓝色；}.圆形线文本： th-child(1){ transform : rotate(0 deg)；}.圆形线文本： th-child(2){ transform : rotate(45)；}.圆形线文本： th-child(3){ transform : rotate(90 deg)；}.圆形线文本： th-child(4){ transform : rotate(135)；}.圆形线文本： th-child(5){ transform : rotate(180 deg)；}.圆形线文本： th-child(6){ transform : rotate(225)；}.圆形线文本： th-child(7){ transform : rotate(270 deg)；}.圆形线文本： th-child(8){ transform : rotate(315)；}动画制作

观察到动画只改变每个矩形的透明度，所以动画从0.05到0.9循环变化。

@关键帧圆{ 0% { opa city 3360 0.05；} 100% { opa city 3360 0.9；}}用于动画绑定。圆-线文字{ animation:圆1.5s线性无限；}动画绑定完成后，发现整个图标全部显示消失在一起，缺少对单个个体的动画处理，动画时间延迟使其逐渐变化。

单一动画处理。圆-线文本： th-child(1){ animation-delay : 0.2s；}.圆-线文本： th-child(2){ animation-delay : 0.4s；}.圆-线文本： th-child(3){ animation-delay : 0.6s；}.圆-线文本： th-child(4){ animation-delay : 0.8s；}.圆形线文本： th-child(5){ animation-delay : 1s；}.圆-线文本： th-child(6){ animation-delay : 1.2s；}.圆-线文本： th-child(7){ animation-delay : 1.4s；}.圆-线文本： th-child(8){ animation-delay : 1.6s；}注意：单个动画的延迟时间一定要超过动画的总执行时间，才能防止一个动画在执行后出现卡顿。

摘要

以上是边肖介绍的实现自定义加载图标功能的微信小程序，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！