触摸显示阴影: 手指触摸的地方为起点生成阴影最后铺满整个容器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>