触摸显示阴影: 手指触摸的地方为起点生成阴影最后铺满整个容器div

Question

触摸目标容器, 让目标容器增加背景色.

长按时: 手指起点处开始是一个小圆形的背景色, 随着时间推移, 圆圈逐渐扩大, 直到最后铺满整个目标容器.
短按时: 开始还是圆圈背景, 但是瞬间就会铺满整个目标容器.
求思路!
如下图:

Answer 1

EvE，不知道你应用的场景是什么；

我看到你有两个页签，一个是ios，这个不会
一个是小程序，这个是是前端内容，仅仅用CSS就可以实现这个效果：

参考样式：

.waves {
    position: relative;
    //隐藏溢出的径向渐变背景
    overflow: hidden;
    &:after {
      content: "";
      display: block;
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      pointer-events: none;
      //设置径向渐变
      background-image: radial-gradient(circle, @deep-blue 10%, transparent 10.01%);
      background-repeat: no-repeat;
      background-position: 50%;
      transform: scale(10, 10);
      opacity: 0;
      transition: transform .3s, opacity .5s;
    }
    &:active:after {
      transform: scale(0, 0);
      opacity: .3;
      //设置初始状态
      transition: 0s;
    }
  }

只要在最外层容器（沾满整个屏幕）添加class='wave'即可
这样 <div style={width: 100vw; height: 100vh} class="waves"></div>