纯css三个点加载动画

最新推荐文章于 2024-03-20 17:18:51 发布

花笙_

最新推荐文章于 2024-03-20 17:18:51 发布

阅读量1.1k

点赞数 2

分类专栏： css 文章标签： css css3 前端

本文链接：https://blog.csdn.net/wang_59881/article/details/130320420

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

效果图
在这里插入图片描述
wxml

<view style="display: flex;background: #fff;padding: 25rpx;align-items: center;">
     <view class="dot1"> </view>
     <view class="dot2"></view>
     <view class="dot3"></view>
</view>

css


.dot1, .dot2, .dot3 {
    width: 10rpx;
    height: 10rpx;
    border-radius: 50%;
    margin: 10rpx;
}

.dot1 {
    animation: jump 1.6s -0.32s linear infinite;
    background: #ccc;
}
.dot2 {
    animation: jump 1.6s -0.16s linear infinite;
    background: #ccc;
}
.dot3 {
    animation: jump 1.6s linear infinite;
    background: #ccc;
}

@keyframes jump {
    0%, 80%, 100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    } 
    40% {
          -webkit-transform: scale(2.0);
          transform: scale(2.0);
      }
}