贤妻和健康是一个男子最宝贵的财富。——斯珀吉翁 分享一个蓄力出拳的特效 这个效果放到了codepen里 123456789101112131415161718<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>蓄力发射拳头</title><link rel="stylesheet" href="style.css"></head><body><div id="rocket-container"> <div id="rocket">✊</div> <div id="shockwave" style="display: none;"></div> <!-- 新增冲击波元素 --></div><button id="launch-button">出拳</button><script src="script.js"></script></body></html> css 1234567891011121314151617181920212223242526272829303132333435363738394041424344body, html { height: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column;}#rocket-container { position: relative; /* 容器相对定位 */}#rocket { font-size: 50px; opacity: 1;}#shockwave { position: absolute; width: 100px; height: 100px; border-radius: 50%; background: rgba(255, 255, 0, 0.5); /* 模拟冲击波颜色 */ top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); /* 初始化变换 */ display: none; /* 初始不显示 */}@keyframes charge { from { opacity: 1; transform: translateY(0); } to { opacity: 0.5; transform: translateY(50px); }}@keyframes launch { from { opacity: 0.5; transform: translateY(50px); } to { opacity: 1; transform: translateY(-100px); }}@keyframes shockwaveAnimation { from { transform: translate(-50%, -50%) scale(0); opacity: 1; } to { transform: translate(-50%, -50%) scale(4); opacity: 0; }} javascript 1
