在網站開發中，動畫是增強用戶體驗的重要手段之一，而CSS3的出現大大提升了網頁動畫的表現力。今天我們來分享一種簡單而富有創意的CSS3信封動畫。

/* CSS代碼 */
.envelope {
position: relative;
width: 300px;
height: 200px;
background-color: #fff;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.envelope:after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 100%;
background-color: #f44336;
transform: translateX(100%);
transition: transform 0.2s ease-out;
}
.envelope.open:after {
transform: translateX(0);
transition-delay: 0.1s;
}
.envelope .flap {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 80px;
background-color: #f8f8f8;
transform-origin: top left;
}
.envelope .flap:before {
content: "";
position: absolute;
bottom: -1px;
right: 0;
border-left: 20px solid transparent;
border-right: 20px solid #f8f8f8;
border-bottom: 60px solid #f8f8f8;
transform: rotate(50deg);
}
.envelope .flap:after {
content: "";
position: absolute;
bottom: -1px;
left: 0;
border-right: 20px solid transparent;
border-left: 20px solid #f8f8f8;
border-bottom: 60px solid #f8f8f8;
transform: rotate(-50deg);
}
.envelope.open .flap {
transform: rotateX(-90deg);
}

這段代碼實現了一個基于CSS3的信封動畫效果，其中，信封是一個相對定位的容器，設置了它的寬度、高度和背景色。信封上半部分是一個紅色的矩形div，使用了CSS的:after偽元素，同時它的初始位置被設置為右側屏幕外，待要展開時移動回來的位置。

信封下半部分是一個翻蓋，使用了transform屬性定義了它旋轉的基準點，同時設置了兩個三角形的偽元素定義了翻蓋的上部輪廓。

至于最關鍵的展開動畫，它是通過修改信封的類名實現的。當信封容器加入.open類名時，上半部分將從右邊滑動到左邊，下半部分將從旋轉狀態翻開，這樣就完成了一個有趣的動畫效果。