微信小程序自定义loading加载动画（1）
1.实现效果
【微信小程序自定义loading加载动画（1）】
文章图片
2.实现代码
sss
.ring {
position: relative;
margin: 40rpx auto;
width: 80px;
height: 80px;
text-align: center;
line-height: 80px;
font-size: 20px;
letter-spacing: 4px;
background: transparent;
border: 2px solid #3c3c3c;
border-radius: 50%;
box-shadow: 0 0 20 rgba(0, 0, 0, .5);
}
.ring::before {
content: '';
position: absolute;
z-index: 99;
top: -3px;
left: -3px;
width: 100%;
height: 100%;
border: 3px solid transparent;
border-top: 3px solid #b3205d;
border-right: 3px solid #b3205d;
border-radius: 50%;
animation: animateCircle 2s linear infinite;
/* 动画：名称 时间 速率 重复 */
}
.line{
display: block;
position: absolute;
top: calc(50% - 2px);
left: 50%;
width: 50%;
height: 4px;
background: transparent;
transform-origin: left;
/* 动画开始位置 */
animation: animate 2s linear infinite;
transform: rotate(45deg);
}
.line::before {
content: '';
position: absolute;
width: 8px;
height: 8px;
border-radius: 50%;
background: #b3205d;
top: -4px;
right: -4px;
box-shadow: 0 0 20px #b3205d;
}
@keyframes animate {
100% {
transform: rotate(405deg);
}
}
@keyframes animateCircle {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
3.更多loading加载动画 https://gitee.com/susuhhhhhh/wxmini_demo
推荐阅读
- 一个小故事，我的思考。
- 家乡的那条小河
- 一个人的碎碎念
- 野营记-第五章|野营记-第五章 讨伐梦魇兽
- 昨夜小楼听风
- 2021-02-17|2021-02-17 小儿按摩膻中穴-舒缓咳嗽
- 基于微信小程序带后端ssm接口小区物业管理平台设计
- 2019.4.18感恩日记
- 那件我们忽略的小事叫感恩
- 你有婚内虐待行为吗（）