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

Question

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

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

Answer 1

EvE，不知道你应用的场景是什么；我看到你有两个页签，一个是ios，这个不会一个是小程序，这个是是前端内容，仅仅用CSS就可以实现这个效果：参考样式：.waves {&nbsp; &nbsp; position: relative;&nbsp; &nbsp; //隐藏溢出的径向渐变背景&nbsp; &nbsp; overflow: hidden;&nbsp; &nbsp; &:after {&nbsp; &nbsp; &nbsp; content: "";&nbsp; &nbsp; &nbsp; display: block;&nbsp; &nbsp; &nbsp; position: absolute;&nbsp; &nbsp; &nbsp; width: 100%;&nbsp; &nbsp; &nbsp; height: 100%;&nbsp; &nbsp; &nbsp; top: 0;&nbsp; &nbsp; &nbsp; left: 0;&nbsp; &nbsp; &nbsp; pointer-events: none;&nbsp; &nbsp; &nbsp; //设置径向渐变&nbsp; &nbsp; &nbsp; background-image: radial-gradient(circle, @deep-blue 10%, transparent 10.01%);&nbsp; &nbsp; &nbsp; background-repeat: no-repeat;&nbsp; &nbsp; &nbsp; background-position: 50%;&nbsp; &nbsp; &nbsp; transform: scale(10, 10);&nbsp; &nbsp; &nbsp; opacity: 0;&nbsp; &nbsp; &nbsp; transition: transform .3s, opacity .5s;&nbsp; &nbsp; }&nbsp; &nbsp; &:active:after {&nbsp; &nbsp; &nbsp; transform: scale(0, 0);&nbsp; &nbsp; &nbsp; opacity: .3;&nbsp; &nbsp; &nbsp; //设置初始状态&nbsp; &nbsp; &nbsp; transition: 0s;&nbsp; &nbsp; }&nbsp; }只要在最外层容器（沾满整个屏幕）添加class='wave'即可这样 <div style={width: 100vw; height: 100vh} class="waves"></div>