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