微信开发者工具+css3波纹扩散特效

html

  
  
  

css
.body{
  height: 100vh;
  background-color: #F5F6F7;
  position: relative;
}
.circle{
  position: absolute;
  left:250rpx;
  top:250rpx;
  width: 250rpx;
  height: 250rpx;
  border-radius: 50%;
  background:-webkit-linear-gradient(top,#6DFB93,#3EDF90);
  opacity: 1;
}
.circle1{
  position: absolute;
  left:225rpx;
  top:225rpx;
  width: 300rpx;
  height: 300rpx;
  border-radius: 50%;
  background:-webkit-linear-gradient(top,#6DFB93,#3EDF90);
  opacity: 0.6;
  animation:myfirst1 5s infinite linear 
}
.circle2{
  position: absolute;
  left:200rpx;
  top:200rpx;
  width: 350rpx;
  height: 350rpx;
  border-radius: 50%;
  background:-webkit-linear-gradient(top,#6DFB93,#3EDF90);
  opacity: 0.3;
  animation:myfirst2 5s infinite linear; 
  animation-delay:5s; 
}
@keyframes myfirst1{
  0%   {opacity: 0.5;scale: 1;}
  50%   {opacity: 0.4;scale: 1.5; 
  100%   {opacity: 0.3;scale: 2;}
}
@keyframes myfirst2{
  0%   {opacity: 0.2;scale: 1.75;}
  50%   {opacity: 0.1;scale: 1.9;}
  100%   {opacity: 0;scale: 2.15 ;}
}
//在微信开发者工具模拟器上是图下这个效果，但是在真机模拟上出现了误差，最终发现问题是。scale的问题，最终解决是如下
@keyframes myfirst1{
  0%   {opacity: 0.5; transform:scale(1) ;}
  50%   {opacity: 0.4;transform:scale( 1.5);}
  100%   {opacity: 0.3;transform:scale( 2);}
}
@keyframes myfirst2{
  0%   {opacity: 0.2;transform:scale(1.75);}
  50%   {opacity: 0.1;transform:scale(1.9);}
  100%   {opacity: 0;transform:scale(2.15);}
}
这样的话，微信开发者工具模拟器和真机调试的效果就一样 了

效果图