CSS3彩帶飄動是一種很酷炫的效果，可以使網頁更加生動有趣。下面就來介紹一下如何實現這個效果。

.ribbon {
position: absolute;
top: 30px;
left: -50px;
z-index: -1;
padding: 10px 70px;
color: #fff;
text-align: center;
font-weight: bold;
font-size: 20px;
text-shadow: 0px 2px 3px rgba(0,0,0,0.3); 
background: #ad5389; /* Old browsers */
background: -moz-linear-gradient(top, #ad5389 0%, #3c1053 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #ad5389 0%,#3c1053 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #ad5389 0%,#3c1053 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.ribbon:before {
content: "";
position: absolute;
left: 0px;
top: 100%;
z-index: -1;
border-top: 50px solid #3c1053;
border-right: 50px solid transparent;
}
.ribbon:after {
content: "";
position: absolute;
right: 0px;
top: 100%;
z-index: -1;
border-top: 50px solid #ad5389;
border-left: 50px solid transparent;
}
@-webkit-keyframes ribbon {
0% {
-webkit-transform: rotate(-10deg);
}
50% {
-webkit-transform: rotate(10deg);
}
100% {
-webkit-transform: rotate(-10deg);
}
}
.ribbon {
-webkit-animation-name: ribbon;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
}

以上是實現CSS3彩帶飄動的代碼，我們可以將其添加到網頁的樣式表中。實現這個效果的主要原理是利用CSS3的動畫效果，通過旋轉來實現飄動的效果，具體的細節可以通過代碼來進行修改和調整。