taro(react、vue) css 波纹动画

关注

原创最新推荐文章于 2026-09-14 15:01:26 发布 1k 阅读 AI 写同款· GEO 优化 ›

一个响应ping包延迟偏大的问题前段时间客户反馈一个使用pc上的命令行ping无线设备(WiFi4)时,设备平均响应时间(测试时长2小时,1秒Ping一次)相比其它机型偏慢的问题,并上传上具体的时间的Log.从log中看到,大多数包的响应还是比较快的,只是个别响应时间较长,且响应时间长的包时间几乎都是一样的100多ms.如下是部分响应时间截图. 整个2小时的测试时间里,总是时不时的出这么上102,104ms的响应时间,这直接导致了平均响应时间被拉大.于是本地测试,也发现了类似的延迟.本地测试时,现象略有... 阅读详情

前言

想弄一个波动效果的动画~，其实主要涉及到css知识点。要学会用绝对定位、相对定位

实现效果

taro版

css


.recycle_device_image {
    position: relative;
    width: 630rpx;
    height: 600rpx;
    /* padding: 40rpx 0; */
    text-align: center;
    margin: 0 auto;
    border-radius: 50%;

    background-image: url('../../../resource/my/recycle/1.png');
    background-size: 60% 60%;
    background-repeat: no-repeat;
    background-position: center center;

     background-color: #188ffe;
}


.circle {
    position: absolute;
    width: calc(100% - 20rpx); /* 减去边框的大小 */
    height: calc(100% - 20rpx);/* 减去边框的大小 */
    border-radius: 50%;
    opacity: 0;
    border: 10rpx solid #87c5fe;
}

.circle:first-child {
    animation: circle-opacity 2s infinite;
    animation-delay: .3s;
}

.circle:nth-child(2) {
    animation: circle-opacity 2s infinite;
    animation-delay: .8s;
}


@keyframes circle-opacity{
    from {
        opacity: 1;
        transform: scale(.6);
    }
    to {
        opacity: 0;
        transform: scale(1);
    }
}

jsx

<View style="margin-top: 20rpx;">

  <View className="recycle_device_image">
    <View className="circle"></View>
    <View className="circle"></View>
  </View>

  <View className="recycle_device_title">
    <Text>连接设备</Text>
  </View>

</View>

浏览器版

css

.container {
    margin: 40rpx;
}

.dot {
    position: relative;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background-color: #33ccff;
    z-index: 2;
}

.circle {
    position: absolute;
    width: calc(100% - 6px); /* 减去边框的大小 */
    height: calc(100% - 6px);/* 减去边框的大小 */
    border-radius: 50%;
    opacity: 0;
    border: 3px solid red;
}

.circle:first-child {
    animation: circle-opacity 2s infinite;
    animation-delay: .3s;
}

.circle:nth-child(2) {
    animation: circle-opacity 2s infinite;
    animation-delay: .6s;
}

/* 
.circle:nth-child(3) {
     animation: circle-opacity 2s infinite;
    animation-delay: .6s;
} */

@keyframes circle-opacity{
    from {
        opacity: 1;
        transform: scale(0);
    }
    to {
        opacity: 0;
        transform: scale(1);
    }
}

html

<View className='container'>
  <View className="dot">
    <View className="circle"></View>
    <View className="circle"></View>
    <View className="circle"></View>
  </View>
</View>

收录于