仿breaking news，纯CSS实现的走马灯动画效果

技术频道 - html技术

仿breaking news，纯CSS实现的走马灯动画效果

作者:admin 时间:2023-7-7 13:4:6 浏览:

本文介绍一个仿breaking news，纯CSS实现的走马灯动画效果。

效果图

仿breaking news，纯CSS实现的走马灯动画效果

demo download

示例介绍

仿breaking news，纯CSS实现的走马灯动画效果。

走马灯文字从右向左，无限滚动，每隔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实现走马灯动画效果，30s（在css定义）滚动一次。
    </div>
  </div>
</div>

滚动文字容器有两个div，其中外层div的class属性值为news_latest，内层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属性起了关键作用。你可以通过以下文章了解更多有关animation的知识。

总结

本文介绍了一款仿breaking news的，纯CSS实现的走马灯动画效果。代码清晰易懂，相信大家很容易使用。喜欢的朋友可以下载源码备用。

相关文章