使用css 动画实现,水波纹的效果

每日鸡汤:每个你想要学习的瞬间都是未来的你向自己求救

需求,实现水波纹动画效果,要求中心一个圆点,然后有3个圈,一圈一圈的向里面缩小。

说实话我第一个想到了给3个圈设置不同的宽高,然后设置动画0-100%,一次缩小宽高!

但是,我转念一想,我是不是也可以用padding设置,就是给每个圈设定一个padding, 逐渐缩小padding, 貌似也能达到相同的效果。 确实可以,但是无论用哪种方法,要想让动画变得顺滑,就需要给最外圈设置0-1的透明度的变化,要不然总是会有卡顿的感觉,你可以自己尝试一下加与不加的区别

1. 使用 padding  实现

动画实现:大圈padding缩到中圈的初始padding(同时不透明度从0-1)、中圈的padding缩到小圈的初始padding,小圈padding缩到0



  
    
    
    
    Document
    
    
  
  
    
中心

2. 使用宽高实现

动画实现:大圈宽高缩到中圈的初始尺寸(同时不透明度从0-100)、中圈宽高缩到小圈的初始尺寸,小圈缩到中心的尺寸



  
    
    
    
    Document
    
    
  
  
    
中心

你可能感兴趣的:(css,前端)