雷达扫描效果(背景换成纯色渐变了):
<view class="top flex">
<view class="radar">
<view class="wave-box u-flex u-row-center u-col-center">
<test></test>
</view>
<view class="test-btn c-fff">
一键巡检
</view>
</view>
</view>
.top {
width: 100%;
height: 720rpx;
// 上到下渐变
background-image: linear-gradient(#28BC3E, rgba(50,215,75,0.6));
// background-image: url(/static/intelligentThunder/2_1_Compress.gif);
// background-repeat: no-repeat;
// background-size:100% 720rpx;
.device-status {
width: 290rpx;
height: 290rpx;
border-radius: 50%;
background-color: rgba(255,229,193,0.4);
}
.radar {
width: 290rpx;
height: 290rpx;
border-radius: 50%;
font-size: 28rpx;
background-color: rgba(255,229,193,0.4);
position: relative;
.wave-box {
width: 290rpx;
height: 290rpx;
}
.test-btn {
// width: 156rpx;
// height: 56rpx;
// border-radius: 28rpx;
// background-color: #fff;
position: absolute;
left: 50%;
bottom: 15%;
transform: translate(-50%,-50%);
}
}
.radar::before {
content: '';
position: absolute;
width: calc(290rpx / 2);
height: calc(290rpx / 2);
background: linear-gradient(
45deg,
rgba(0, 0, 0, 0) 50%,
rgba(255, 255, 255, 1) 100%
);
border-radius: 100% 0 0 0;
// 增加转动效果
animation: scanning 5s linear infinite;
transform-origin: 100% 100%;
}
// 增加转动效果
@keyframes scanning {
to {
transform: rotate(360deg);
}
}
}
波浪移动动画效果
第一种:
<view class="wave">
<view class="wave1"></view>
<view class="wave2"></view>
<view class="wave3"></view>
</view>
.wave{
position: relative;
// border: 1px solid silver;
// 颜色节点均匀分布的径向渐变:
background-image: radial-gradient(#fff, rgba($color:#32D74B, $alpha:0.6));
width: 200rpx;
height: 200rpx;
border-radius: 50%;
line-height: 100rpx;
margin: 0 auto;
font-size: 28rpx;
text-align: center;
overflow: hidden;
animation: water-wave linear infinite;
}
.wave1{
position: absolute;
top: 60%;
left: -25%;
background: #32D74B;
opacity: .7;
width: 200%;
height: 200%;
border-radius: 40%;
animation: inherit;
animation-duration: 7s;
}
.wave2{
position: absolute;
top: 60%;
left: -35%;
background: #32D74B;
opacity: .7;
width: 200%;
height: 200%;
border-radius: 35%;
animation: inherit;
animation-duration: 9s;
}
.wave3{
position: absolute;
top: 60%;
left: -35%;
background: #32D74B;
opacity: .3;
width: 200%;
height: 200%;
border-radius: 33%;
animation: inherit;
animation-duration: 15s;
}
@keyframes water-wave{
0% {transform: rotate(0deg);}
50% {transform: rotate(180deg);}
100% {transform: rotate(360deg);}
}
第二种(有待改进,后续再补)
<template>
<view class="">
<view class="wave">
<view class="wave1"></view>
<view class="wave2"></view>
<view class="wave3"></view>
<!-- <view class="wave4"></view>
<view class="wave5"></view>
<view class="wave6"></view> -->
</view>
</view>
</template>
<script>
export default {
name:'test'
}
</script>
<style lang="scss" scoped>
.wave{
position: relative;
// border: 1px solid silver;
// 颜色节点均匀分布的径向渐变:
background-image: radial-gradient(#fff, rgba($color:#32D74B, $alpha:0.6));
width: 200rpx;
height: 200rpx;
border-radius: 50%;
line-height: 100rpx;
margin: 0 auto;
font-size: 28rpx;
text-align: center;
overflow: hidden;
// animation: water-wave linear infinite;
}
.wave1{
position: absolute;
top: 60%;
left: -15%;
background: #28BC3E;
// opacity: .7;
width: 50%;
height: 50%;
border-radius: 40%;
animation: w1 3s linear infinite;
// animation-duration: 7s;
}
.wave2{
position: absolute;
top: 60%;
left: 25%;
background: #28BC3E;
// opacity: .7;
width: 50%;
height: 50%;
border-radius: 40%;
animation: w2 linear infinite;
animation-duration: 3s;
}
.wave3{
position: absolute;
top: 60%;
left: 60%;
background: #28BC3E;
// opacity: .3;
width: 50%;
height: 50%;
border-radius: 40%;
animation: w3 linear infinite;
animation-duration: 3s;
}
.wave4{
position: absolute;
top: 68%;
left: -5%;
background: #28BC3E;
// opacity: .7;
width: 50%;
height: 50%;
border-radius: 50%;
animation: w4 linear infinite;
animation-duration: 3s;
}
.wave5{
position: absolute;
top: 68%;
left: 25%;
background: #28BC3E;
// opacity: .7;
width: 50%;
height: 50%;
border-radius: 50%;
animation: w5 linear infinite;
animation-duration: 3s;
}
.wave6{
position: absolute;
top: 68%;
left: 50%;
background: #28BC3E;
// opacity: .3;
width: 50%;
height: 50%;
border-radius: 50%;
animation: w6 linear infinite;
// animation:inherit;
animation-duration: 3s;
}
@keyframes water-wave{
0% {transform: rotate(0deg);}
50% {transform: translateX(100rpx) rotate(180deg);}
100% {transform: translateX(200rpx) rotate(360deg);}
}
@keyframes w1 {
0% {transform: rotate(0deg);}
50% {transform: translateX(0rpx) rotate(180deg);}
100% {transform: translateX(30rpx) rotate(360deg);}
}
@keyframes w2{
0% {transform: rotate(0deg);}
50% {transform: translateX(0rpx) rotate(180deg);}
100% {transform: translateX(30rpx) rotate(360deg);}
}
@keyframes w3{
0% {transform: rotate(0deg);}
50% {transform: translateX(0rpx) rotate(180deg);}
100% {transform: translateX(30rpx) rotate(360deg);}
}
@keyframes w4{
0% {transform: rotate(0deg);}
100% {transform: translateX(30rpx) rotate(360deg);}
}
@keyframes w5{
0% {transform: rotate(0deg);}
100% {transform: translateX(30rpx) rotate(360deg);}
}
@keyframes w6{
0% {transform: rotate(0deg);}
100% {transform: translateX(30rpx) rotate(360deg);}
}
</style>