CSS 紅包動畫是一種非常有趣且常用的動畫效果。使用 CSS 編寫的紅包動畫可以用于線上活動、節日慶祝、營銷推廣等方面，給用戶帶來獨特的體驗和視覺效果。

.red-envelope {
position: relative;
width: 80px;
height: 80px;
background: #f0283a;
border-radius: 50%;
padding: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
overflow: hidden;
cursor: pointer;
}
.red-envelope:hover .envelope {
animation: open-envelope 1s ease forwards;
}
.envelope {
position: absolute;
display: block;
top: 50%;
left: 50%;
width: 0%;
height: 0%;
background: #fff;
border-radius: 50%;
transform-origin: top left;
transform: translate(-50%, -50%);
}
.text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-size: 18px;
font-weight: bold;
}
@keyframes open-envelope {
from {
width: 0%;
height: 0%;
transform: translate(-50%, -50%) rotate(0deg);
}
to {
width: 120%;
height: 120%;
transform: translate(-50%, -50%) rotate(360deg);
}
}

以上是 CSS 紅包動畫的代碼示例。可以看到，通過動態控制 envelope 的 width、height 和 transform 實現了紅包撕開的動畫效果，同時也可以根據需求加入文字等其他元素。

CSS 紅包動畫除了以上一種實現方式，還有許多其它的方法和變化，需要根據實際情況進行具體的設置和調試。當設計師和開發工程師搭配使用時，CSS 紅包動畫可以有效地提升頁面的趣味性和用戶的參與度，是一項非常有價值的技術。