CSS实现文字滚动

以前用marquee来插入一段滚动的文字。但是<marquee>元素已经过时,请不要再使用(很多网站如是说,非吾说)。
本文分享比较好看的CSS关于文字可以上下滚动的炫酷代码,样式很好看值得推荐!

<!--CSS文字滚动-->
 <meta charset="UTF-8">
<style>
    .menu-list {
    list-style:none;
    width:300px;
    margin:100px auto;
}
.menu-list li {
    display:block;
}
.list {
    list-style:none;
    margin-left:-50px;
    width:300px;
    height:60px;
    overflow:hidden;
}
.list li {
    width:300px;
    height:60px;
    position:relative;
    animation:myfirst 4s infinite;
    line-height:60px;
    text-align:center;
    font-size:30px;
    color:#fff;
}
@keyframes myfirst {
    0% {
    background-color:#4ec7f3;
    top:0px;
}
25% {
    background-color:#4ec7f3;
    top:0px;
}
50% {
    background:#42c58a;
    top:-60px;
}
75% {
    background:#a0a0a0;
    top:-120px;
}
100% {
    background:#dc143c;
    top:-180px;
}
}.font30 {
    font-size:30px;
    color:#7d7d7d;
}

</style>
<ul class="menu-list">
    <li>
        <p class="font30">今天怎么样?</p>
    </li>
    <li>
        <ul class="list">
            <li class="one">尘遇博客怎么样</li>
            <li class="two">very good!</li>
            <li class="three">学习一下</li>
            <li class="four">nice!</li>

        </ul>
    </li>
    <li>
        <p class="font30">尘遇</p>
    </li>
</ul>
© 版权声明
THE END
如果喜欢,可以【点赞】【分享】【收藏】
点赞15赞赏 分享
评论 抢沙发
头像
非注册用户需审核通过后才能查看。友好交流,勿发纯表情,勿恶意灌水!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容