久草视频在线观看,亚洲欧美日韩在线不卡,国产一级精品无码免费视频

技術(shù)頻道 - html技術(shù)

仿breaking news，純CSS實現(xiàn)的走馬燈動畫效果

作者:admin 時間:2023-7-7 13:4:6 瀏覽:

本文介紹一個仿breaking news，純CSS實現(xiàn)的走馬燈動畫效果。

效果圖

仿breaking news，純CSS實現(xiàn)的走馬燈動畫效果

demo download

示例介紹

仿breaking news，純CSS實現(xiàn)的走馬燈動畫效果。

走馬燈文字從右向左，無限滾動，每隔30s滾動一次，“30s”時間可在css定義。

HTML代碼

<div id="just_in">
  <div id="just_in_header">
    <h5>最新消息</h5>
  </div>
  <div id="news_latest">
    <div id="news_latest_text">
      純CSS實現(xiàn)走馬燈動畫效果，30s（在css定義）滾動一次。
    </div>
  </div>
</div>

滾動文字容器有兩個div，其中外層div的class屬性值為news_latest，內(nèi)層div的class屬性指為news_latest_text。

CSS代碼

*{
    box-sizing: border-box;
}

/* breaking news template */
#just_in{
    display: inline-block;
    width: 100%;
    height: 42px;
}
#just_in #just_in_header{
    background-color: red;
    margin: auto;
    display: inline-block;
    height: 42px;
    width: 2rem;
    position: absolute;
    z-index: 1;
    -webkit-clip-path: polygon(0 0, 100% 0, 77% 100%, 0% 100%);
    clip-path: polygon(0 0, 100% 0, 86% 100%, 0% 100%);
    box-shadow: 0px 2px 4px #a8a4a4;
    padding: 12px 8px;
    animation: right_move_1 1.2s cubic-bezier(0.01, -0.03, 0.19, 0.88) forwards;
}
#just_in h5{
    font-size: 16px;
    color: white;
    display: inline;
    position: relative;
    opacity: 0;
    animation: right_move_2 800ms 410ms cubic-bezier(0.01, -0.03, 0.19, 0.88) forwards;
}
#just_in #news_latest{
    background-color: rgba(36, 33, 33, 0.69);
    position: relative;
    height: 42px;
    width: 100%;
    overflow-x: hidden;
    white-space: nowrap;
    animation: fade_in 1.25s ease-in;
}
#just_in #news_latest #news_latest_text{
    justify-content: center;
    overflow-x: hidden;
    white-space: nowrap;
    top: 25%;
    left: 240%;
    position: relative;
    animation: left_move 30s 700ms linear forwards infinite; /* 30s 滾動一次 */
    color: white;
}
#just_in #news_latest #news_latest_text h3{
    display: inline-block;
    font-size: 17px;
    margin: 12px 75px;
    color: white;
}
@keyframes right_move_1{
    0%{
        width: 2rem;
    }
    100%{
        width: 8rem;
    }
}
@keyframes right_move_2{
    0%{
        right: 10px;
        left: 0px;
        opacity: 0;
    }
    100%{
        right: 0px;
        opacity: 1;
        left: 15px;
    }
}
@keyframes fade_in{
    0%{
        opacity: 0;
    }
    100%{
        opacity:1;
    }
}
@keyframes left_move{
    0%{
        left: 105%;
    }
    100%{
        left: -210%;
    }
}

我們可以在 #news_latest_text 定義文字滾動間隔時間，這里是30s。同時，這個時間值也定義了滾動的速度，值越大，速度越慢。

#just_in #news_latest #news_latest_text{
    justify-content: center;
    overflow-x: hidden;
    white-space: nowrap;
    top: 25%;
    left: 240%;
    position: relative;
    animation: left_move 30s 700ms linear forwards infinite; /* 30s 滾動一次 */
    color: white;
}

css的animation屬性起了關(guān)鍵作用。你可以通過以下文章了解更多有關(guān)animation的知識。

總結(jié)

本文介紹了一款仿breaking news的，純CSS實現(xiàn)的走馬燈動畫效果。代碼清晰易懂，相信大家很容易使用。喜歡的朋友可以下載源碼備用。

相關(guān)文章