纯css三个点加载动画

最新推荐文章于 2025-05-22 11:21:33 发布

花笙_

最新推荐文章于 2025-05-22 11:21:33 发布

阅读量1.5k

点赞数 2

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/wang_59881/article/details/130320420

css 专栏收录该内容

8 篇文章

订阅专栏

这篇文章展示了如何使用WXML结构和CSS样式来创建一个动画效果，具体是三个圆点跳动的特效。通过定义不同的关键帧动画，分别为不同的圆点设置不同的延迟时间，实现了连续的动态视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图
在这里插入图片描述
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);
      }
}