卡卡網(wǎng)

本文介紹一個(gè)仿breaking news，純CSS實(shí)現(xiàn)的走馬燈動(dòng)畫(huà)效果。

效果圖

demodownload

示例介紹

仿breaking news，純CSS實(shí)現(xiàn)的走馬燈動(dòng)畫(huà)效果。

走馬燈文字從右向左，無(wú)限滾動(dòng)，每隔30s滾動(dòng)一次，“30s”時(shí)間可在css定義。

HTML代碼

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

滾動(dòng)文字容器有兩個(gè)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 滾動(dòng)一次 */
    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 定義文字滾動(dòng)間隔時(shí)間，這里是30s。同時(shí)，這個(gè)時(shí)間值也定義了滾動(dòng)的速度，值越大，速度越慢。

#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 滾動(dòng)一次 */
    color: white;
}

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

• 一圖解釋 animation-direction 屬性 normal | reverse | alternate | alternate-reverse
• 一圖解釋 animation-timing-function 6個(gè)屬性值的區(qū)別
• 一圖了解animation-fill-mode: none|forwards|backwards|both各屬性值
• 【實(shí)例】詳解 CSS3 animation 6個(gè)動(dòng)畫(huà)屬性
• 一圖理解animation屬性linear/ease/ease-in/ease-out/ease-in-out

總結(jié)

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

相關(guān)文章

• [2示例]使用 CSS 使 div 可水平滾動(dòng)
• 用CSS Grid創(chuàng)建水平(橫向)滾動(dòng)容器或列表(div、ul等)
• 用純CSS創(chuàng)建水平滾動(dòng)DIV容器【實(shí)例】
• 純CSS實(shí)現(xiàn)水平(橫向)滾動(dòng)列表

• 如何使用css和圖像為文字著色
• CSS實(shí)現(xiàn)圓圈內(nèi)含有文字并居中【實(shí)例】
• CSS3 圖片背景填充文字并實(shí)現(xiàn)動(dòng)畫(huà)效果
• CSS3背景圖片填充文字【實(shí)例演示/源碼下載】
• CSS3實(shí)現(xiàn)段落第一個(gè)文字放大【實(shí)例演示/源碼下載】
• 3行CSS代碼實(shí)現(xiàn)文字鏤空(動(dòng)畫(huà))效果【演示/源碼下載】

標(biāo)簽: css  走馬燈動(dòng)畫(huà)  水平滾動(dòng)  文字