觸摸目標(biāo)容器, 讓目標(biāo)容器增加背景色.長按時: 手指起點處開始是一個小圓形的背景色, 隨著時間推移, 圓圈逐漸擴大, 直到最后鋪滿整個目標(biāo)容器.短按時: 開始還是圓圈背景, 但是瞬間就會鋪滿整個目標(biāo)容器.求思路!如下圖:
1 回答
翻翻過去那場雪
TA貢獻2065條經(jīng)驗 獲得超14個贊
EvE，不知道你應(yīng)用的場景是什么；
我看到你有兩個頁簽，一個是ios，這個不會
一個是小程序，這個是是前端內(nèi)容，僅僅用CSS就可以實現(xiàn)這個效果：
參考樣式：
.waves {
position: relative;
//隱藏溢出的徑向漸變背景
overflow: hidden;
&:after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
//設(shè)置徑向漸變
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;
//設(shè)置初始狀態(tài)
transition: 0s;
}
}
只要在最外層容器（沾滿整個屏幕）添加class='wave'即可
這樣 <div style={width: 100vw; height: 100vh} class="waves"></div>
- 1 回答
- 0 關(guān)注
- 885 瀏覽
添加回答
舉報
0/150
提交
取消