CSS紅旗飄動效果

.flag {
position: relative;
height: 400px;
width: 600px;
background-color: #fff;
border: 1px solid #000;
}
.flag::before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 0;
width: 0;
border-top: 200px solid red;
border-bottom: 200px solid red;
border-right: 80px solid transparent;
}
.flag::after {
content: "";
position: absolute;
top: 170px;
left: 0;
height: 60px;
width: 600px;
background-color: yellow;
transform: skew(-20deg);
z-index: -1;
}
@keyframes flag-waving {
0% {
transform: rotate(0);
}
50% {
transform: rotate(10deg);
}
100% {
transform: rotate(0);
}
}
.flag::before {
animation: flag-waving 2s infinite;
}

這是一段使用CSS實現的紅旗飄動效果的代碼。這個效果通過利用CSS的偽元素::before和::after來實現。其中::before用來繪制紅旗，::after用來繪制黃色斜條。

紅旗和黃色斜條都設置了絕對定位，來覆蓋在flag類的父元素位置。紅旗的左側使用80px傾斜的透明邊框之后，展示了一個三角形。通過CSS關鍵幀動畫flag-waving，旗幟可以以相同的速度來回旋轉。

這個紅旗飄動效果可以用于慶祝國家或者組織的事件，非常簡單而美觀。