纯css滚动公告栏目

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .wrap {
                height: 30px;
                overflow: hidden;
                position: absolute;
                top: 30;
                left: 100;
                width: 100%
            }
      
            p {
                margin: 0;
                height: 30px;
                line-height: 30px;
                text-align: center;
                background: #ccc;
                width: 300px;
            }
            
            .content p {
                position: absolute;
            }
            
            @-webkit-keyframes anim1 {
                0% {
                    top: 40px;
                    opacity: 1
                }
                50% {
                    top: -40px;
                    opacity: 1
                }
                75% {
                    top: -40px;
                    opacity: 0
                }
                100% {
                    top: 40px;
                    opacity: 0
                }
            }
            
            @-webkit-keyframes anim2 {
                0% {
                    top: -40px;
                    opacity: 0
                }
                25% {
                    top: 40px;
                    opacity: 0
                }
                50% {
                    top: 40px;
                    opacity: 1
                }
                100% {
                    top: -40px;
                    opacity: 1
                }
            }
            .content p:nth-child(1) {
                -webkit-animation: anim1 5s linear infinite;
            }
            
            .content p:nth-child(2) {
                -webkit-animation: anim2 5s linear infinite;
            }
        </style>
    </head>
    <body>
        <div class="wrap">
            <div class="content">
                <p>第一条消息</p>
                <p>第二条消息</p>
            </div>
        </div>
    </body>

</html>

__EOF__

本文作者：蓝色帅-橙子哥
本文链接：https://www.cnblogs.com/lhl66/p/9094492.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！