js点击特效 物理水滴

牡丹君

物理水滴的效果： 利用内阴影和外发光模拟真实水面的折射，速度较慢，有厚重感。
适用： 宁静风格的页面、背景是实景照片的页面。
不影响性能，复制网页中直接用，不需要样式id，放心食用。

1. <script>
   
2. (function() {
   
3.     const css = `
   
4.         .physical-water-ripple {
   
5.             position: absolute;
   
6.             width: 50px;
   
7.             height: 50px;
   
8.             border-radius: 50%;
   
9.             background: transparent;
   
10.             pointer-events: none;
    
11.             box-shadow: inset 0 0 20px rgba(255,255,255,0.5), 0 0 15px rgba(255,255,255,0.3);
    
12.             transform: translate(-50%, -50%);
    
13.             animation: ripple-anim 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    
14.             z-index: 2147483647;
    
15.         }
    
16.         @keyframes ripple-anim {
    
17.             0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0.8; }
    
18.             50% { opacity: 0.5; }
    
19.             100% { transform: translate(-50%, -50%) scale(15); opacity: 0; }
    
20.         }
    
21.     `;
    
22. 
    
23.     const style = document.createElement('style');
    
24.     style.innerHTML = css;
    
25.     document.head.appendChild(style);
    
26. 
    
27.     document.addEventListener('click', function(e) {
    
28.         const ripple = document.createElement('div');
    
29.         ripple.className = 'physical-water-ripple';
    
30.         
    
31.         const x = e.pageX;
    
32.         const y = e.pageY;
    
33. 
    
34.         ripple.style.left = x + 'px';
    
35.         ripple.style.top = y + 'px';
    
36. 
    
37.         document.body.appendChild(ripple);
    
38. 
    
39.         setTimeout(() => {
    
40.             ripple.remove();
    
41.         }, 1500);
    
42.     });
    
43. })();
    
44. </script>

复制代码

2628937009

感谢分享，抢个沙发。

孤山居士

感谢分享

墨染殇雪

感谢分享

MW

感谢分享

蛀牙の小蓝

感谢大佬分享

腐烂猫

感谢分享

꧁莫♡名꧂

看看

ceo1076

感谢分享