CSS微信紅包特效是一種常見(jiàn)的Web開(kāi)發(fā)技術(shù)，可以讓網(wǎng)頁(yè)元素展現(xiàn)出跳動(dòng)的、有趣的效果。使用CSS微信紅包特效，可以讓頁(yè)面看起來(lái)更加生動(dòng)、有趣，增加用戶的體驗(yàn)。下面我們來(lái)看一下如何使用CSS實(shí)現(xiàn)微信紅包特效。

/* CSS代碼 */
.bomb {
position: relative;
display: inline-block;
cursor: pointer;
animation: shake 2s ease-in-out infinite;
}
.bomb:before {
content: "";
position: absolute;
top: -10px;
left: -10px;
bottom: -10px;
right: -10px;
background: radial-gradient(circle at center, #f5a20f, #e54b4b);
opacity: 0;
z-index: -1;
transition: opacity ease 0.3s;
}
.bomb:hover:before {
opacity: 0.5;
}
@keyframes shake {
0% {
transform: rotate(0) translate(0, 0);
}
20% {
transform: rotate(-10deg) translate(-2px, 0);
}
40% {
transform: rotate(10deg) translate(2px, 0);
}
60% {
transform: rotate(-5deg) translate(-1px, 0);
}
80% {
transform: rotate(5deg) translate(1px, 0);
}
100% {
transform: rotate(0) translate(0, 0);
}
}

通過(guò)上面這段CSS代碼，我們可以把鼠標(biāo)移動(dòng)到元素（class為bomb）上時(shí)，元素開(kāi)始晃動(dòng)，并出現(xiàn)一個(gè)紅色的發(fā)光的背景，就像微信紅包被點(diǎn)中時(shí)的效果。這么小巧有趣的效果，值得我們好好學(xué)習(xí)體驗(yàn)?zāi)亍?/p>