纯CSS实现加载动效:一个小程序的加载页面(emmm….简单可依赖)
HTML实现代码
<view class='onloadPic'>
<view></view>
<view></view>
<view></view>
</view>
css实现代码
用块状元素设置布局,画三个像加载图标的圆点,用animation实现过渡动画
.onloadPic{
width: 84rpx;
height: 36rpx;
margin: 30rpx auto;
}
.onloadPic view{
width: 10rpx;
height: 10rpx;
line-height: 36rpx;
display: inline-block;
margin: .19em;
background: #ccc;
border-radius: .6em;
-webkit-animation: loading .5s infinite alternate;
animation: loading .5s infinite alternate;
}
.onloadPic view:nth-of-type(2) {
background: #ccc;
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.onloadPic view:nth-of-type(3) {
background: #ccc;
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
@-webkit-keyframes loading {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes loading {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}