当前位置：首页 > news >正文

UI小姐姐要求有“Duang~Duang”的效果怎么办？

news 2026/6/1 9:32:50

UI小姐姐说：“我要这个按钮点下去有 Duang~Duang 的效果！”

2025 年了，你再回她“加个 scale(1.1) 就行了”，她会直接把你拉黑。

下面直接甩 2025 年最硬核、最丝滑、最让设计师尖叫的 5 套「Duang~Duang」方案，按逼格排序，直接复制粘贴就能用，设计师看了会给你发红包。

逼格	方案名称	一句话描述	代码（直接抄）
★★★★★	果冻震动 + 音效 + 微交互	像 iOS 图标长按那种果冻抖动 + 轻微音效	```css
@keyframes duang { 0%,100% { transform: scale(1) rotate(0); } 20% { transform: scale(1.15) rotate(-6deg); } 40% { transform: scale(0.95) rotate(5deg); } 60% { transform: scale(1.08) rotate(-3deg); } 80% { transform: scale(0.98) rotate(2deg); } } .btn-duang { animation: duang 0.6s cubic-bezier(0.2,.8,.2,1); } .btn-duang:active { transform: scale(0.94); } ```+ JS 播放音效	“啊啊啊太爽了！！”
★★★★☆	磁吸吸附 + 回弹	像小米 MIX Fold 展开那种磁吸感	```css
.btn-magnet { transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } .btn-magnet:active { transform: translateY(2px) scale(0.96); box-shadow: 0 4px 12px rgba(0,0,0,0.2); } .btn-magnet:not(:active) { transform: translateY(-2px) scale(1.02); } ```	“高级！有质感！”
★★★★☆	波纹 + 光晕 + 呼吸灯	像 Apple Pay 那种扩散光环	```css
.btn-ripple { position: relative; overflow: hidden; } .btn-ripple:after { content: “”; position: absolute; width: 0; height: 0; border-radius: 50%; background: rgba(255,255,255,0.4); transform: translate(-50%,-50%); animation: ripple 0.8s ease-out; } @keyframes ripple { to { width: 300px; height: 300px; opacity: 0; } } ```	“哇！跟苹果一样！”
★★★☆☆	3D 翻转 + 阴影跳动	像华为 Mate X 展开那种立体感	```css
.btn-3d { transform: perspective(800px) rotateX(0); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); box-shadow: 0 8px 20px rgba(0,0,0,0.2); } .btn-3d:active { transform: perspective(800px) rotateX(12deg) translateY(4px); box-shadow: 0 2px 8px rgba(0,0,0,0.15); } ```	“立体感拉满！”
★★☆☆☆	经典 scale + 音效（保底）	设计师说不出来要啥时，拿这个救命	```css
.btn-classic { transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .btn-classic:active { transform: scale(0.94); filter: brightness(1.1); } ```+ 音效	“嗯……还行吧”

2025 年设计师最爱的终极组合（我现在所有项目默认套餐）

<buttonclass="btn-duang-jelly"><spanclass="btn-text">确认支付</span><spanclass="ripple"></span><audioid="duang-sound"src="/sounds/duang.mp3"></audio></button>

.btn-duang-jelly{position:relative;overflow:hidden;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border:none;border-radius:20px;padding:16px 40px;color:white;font-size:18px;font-weight:bold;box-shadow:0 8px 25pxrgba(102,126,234,0.4);transition:all 0.4scubic-bezier(0.34,1.56,0.64,1);}.btn-duang-jelly:active{transform:scale(0.94)rotate(-2deg);animation:jelly 0.6scubic-bezier(0.2,0.8,0.2,1);box-shadow:0 4px 12pxrgba(0,0,0,0.3);}@keyframesjelly{0%, 100%{transform:scale(1)rotate(0);}20%{transform:scale(1.15,0.9)rotate(-6deg);}40%{transform:scale(0.9,1.1)rotate(5deg);}60%{transform:scale(1.08,0.95)rotate(-3deg);}80%{transform:scale(0.98,1.02)rotate(2deg);}}

// 加个轻微音效（设计师听了会原地高潮）document.querySelectorAll('.btn-duang-jelly').forEach(btn=>{btn.addEventListener('click',()=>{constaudio=btn.querySelector('audio')||document.getElementById('duang-sound');audio?.cloneNode().play();});});