taro(react、vue) css 波纹动画

前言

想弄一个波动效果的动画~，其实主要涉及到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>