之前用animate動畫都是寫一寫樣式，要不連續讓圖片旋轉，要不就是hover時，讓元素從邊緣緩慢飄到中央。

今天，寫一個讓類似輪播圖上下翻轉的樣式。

頁面程式碼：

<!-- danmu -->
    <div class="danmu">
        <span class="danmuOne">吳女士已經預約成功 3秒前</span><br>
        <span class="danmuOne">趙女士已經預約成功 10秒前</span><br>
        <span class="danmuOne">錢先生已經預約成功 12秒前</span><br>
        <span class="danmuOne">孫女士已經預約成功 15秒前</span><br>
        <span class="danmuOne">李先生已經預約成功 18秒前</span><br>
        <span class="danmuOne">胡先生已經預約成功 21秒前</span><br>
        <span class="danmuOne">王女士已經預約成功 30秒前</span><br>
    </div>
 

樣式程式碼：

/* danmu */
.danmu{
    width: 750/75rem;
    padding: 40/75rem 0;
    margin:0 auto;
    position:fixed;
    bottom:98/75rem;
    left:0;
    right:0;
    z-index: 9999;
}
.danmu .danmuOne{
    display: inline-block;
    height: 60/75rem;
    font-size: 30/75rem;
    color:#ffffff;
    background: rgba(0,0,0,0.8);
    border-radius: 30/75rem;
    padding: 0/75rem 60/75rem 0/75rem 30/75rem;
    line-height: 60/75rem;
    position: absolute;
    bottom:0%;
    opacity: 0;
}
.danmu .danmuOne.donghua{
    animation: theanimation 3s  alternate;
    -webkit-animation: theanimation 3s  alternate ;
    -moz-animation: theanimation 3s  alternate ;
    -o-animation: theanimation 3s  alternate ;
    -ms-animation: theanimation 3s  alternate ;
}
@keyframes theanimation{
  0% {bottom:0%;opacity:0;}
  10% {bottom:15%;opacity:0.5;}
  20% {bottom:30%;opacity:0.8;}
  40% {bottom:40%;opacity:1;}
  50% {bottom:40%;opacity:1;}
  60% {bottom:40%;opacity:1;}
  70% {bottom:40%;opacity:1;}
  80% {bottom:40%;opacity:1;}
  100% {bottom:100%;opacity:0;}
}
@-webkit-keyframes theanimation{
  0% {bottom:0%;opacity:0;}
  10% {bottom:15%;opacity:0.5;}
  20% {bottom:30%;opacity:0.8;}
  40% {bottom:40%;opacity:1;}
  50% {bottom:40%;opacity:1;}
  60% {bottom:40%;opacity:1;}
  70% {bottom:40%;opacity:1;}
  80% {bottom:40%;opacity:1;}
  100% {bottom:100%;opacity:0;}
}
@-moz-keyframes theanimation{
  0% {bottom:0%;opacity:0;}
  10% {bottom:15%;opacity:0.5;}
  20% {bottom:30%;opacity:0.8;}
  40% {bottom:40%;opacity:1;}
  50% {bottom:40%;opacity:1;}
  60% {bottom:40%;opacity:1;}
  70% {bottom:40%;opacity:1;}
  80% {bottom:40%;opacity:1;}
  100% {bottom:100%;opacity:0;}
}
@-o-keyframes theanimation{
  0% {bottom:0%;opacity:0;}
  10% {bottom:15%;opacity:0.5;}
  20% {bottom:30%;opacity:0.8;}
  40% {bottom:40%;opacity:1;}
  50% {bottom:40%;opacity:1;}
  60% {bottom:40%;opacity:1;}
  70% {bottom:40%;opacity:1;}
  80% {bottom:40%;opacity:1;}
  100% {bottom:100%;opacity:0;}
}
@-ms-keyframes theanimation{
  0% {bottom:0%;opacity:0;}
  10% {bottom:15%;opacity:0.5;}
  20% {bottom:30%;opacity:0.8;}
  40% {bottom:40%;opacity:1;}
  50% {bottom:40%;opacity:1;}
  60% {bottom:40%;opacity:1;}
  70% {bottom:40%;opacity:1;}
  80% {bottom:40%;opacity:1;}
  100% {bottom:100%;opacity:0;}
}
 

邏輯層：

// danmu
function myFunction() {
    var danmu = 0;
    var danmu_timer = null;
    var danmuList = $(".danmu .danmuOne");
    danmu_timer = setInterval(function(){
        danmu++;
        if(danmu>danmuList.length) danmu = 0;
        danmuList.eq(danmu).addClass('donghua').siblings().removeClass('donghua');
    }, 3500)
}
myFunction();
 

效果：從圖中 0 位置過渡到 1 位置。