<!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>

纯css滚动公告栏目的更多相关文章

  1. 不可思议的纯 CSS 滚动进度条效果

    结论先行,如何使用 CSS 实现下述滚动条效果? 就是顶部黄色的滚动进度条,随着页面的滚动进度而变化长短. 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS , ...

  2. 纯css滚动视差

    1.何为滚动视差 视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验. 作为网页设计的热点趋势,越来越多的网站应用了这项技术.效 ...

  3. 一、纯css实现顶部进度条随滚动条滚动

    一.效果图 二.直接复制粘贴 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  4. Sultana后记：纯css也能写col,select,datepicker,carousel...

    未完待续 背景 如今css3越来越发达,focus-within等属性也已经开始在Chrome得到支持.如果有出色的css功底,一点点ps技能,你也能用css3配合原生html标签写出优秀的框架.通过 ...

  5. js控制固定div和随屏滚动div兼容多浏览器和纯css控制（来自网络）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 纯css使用线性渐变实现滚动进度条(来自于微信前端早读课）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 使用纯 CSS 实现滚动阴影效果

    开门见山,有这样一种非常常见的情况,对于一些可滚动的元素而言.通常在滚动的时候会给垂直于滚动的一侧添加一个阴影,用于表明当前有元素被滚动给该滚出了可视区域,类似这样: 可以看到,在滚动的过程中,会出现 ...

  8. CSS布局技巧 -- 纯CSS让子元素的宽度总和决定其父元素的宽度

    使用场景 在移动端屏幕宽度有限的前提下,使用横向滚动的方式展示更多的内容.在这样的需求下,希望父元素作为容器,其宽度可以又横向排列资源的总宽度动态撑开,超过祖父元素的宽度:在不超过祖父元素时,自动继承 ...

  9. 纯CSS打造可折叠树状菜单

    1:Html代码 <li> <label for="subsubfolder1">下级</label> <input id="s ...

随机推荐

  1. [BZOJ 3697] 采药人的路径

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=3697 [算法] 首先 , 将黑色的边变成1 ,白色的边变成-1 那么 , 问题就转化 ...

  2. 聊聊Spring的核心组件

    Spring的核心是IOC容器,它本质上是一个bean关系集合.而要实现它也是有beans,context,core三个模块完成的. beans包主要是负责bean的定义,创建和解析工作,里面用到了简 ...

  3. 微信小程序开发之https从无到有

    本篇不讲什么是https,什么是SSL,什么是nginx 想了解这些的请绕道,相信有很多优秀的文章会告诉你. 本篇要讲的在最短的时间内,让你的网站从http升级到https. 开始教程前再说一句:ht ...

  4. rsync(二)：inotify+rsync详细说明和sersync

    以下是rsync系列篇: inotify+rsync 如果要实现定时同步数据,可以在客户端将rsync加入定时任务,但是定时任务的同步时间粒度并不能达到实时同步的要求.在Linux kernel 2. ...

  5. 启动和测试oracle是否安装成功

    转自:https://www.cnblogs.com/justdo-it/articles/5112576.html 测试步骤1:请执行操作系统级的命令:tnsping orcl 测试步骤 2:请执行 ...

  6. MySQL命令行参数

    一,mysql命令行参数 Usage: mysql [OPTIONS] [database]   //命令方式 -?, --help          //显示帮助信息并退出 -I, --help   ...

  7. 用Python在局域网根据IP地址查找计算机名

    1.要使用socket模块 代码如下: import sys, socket # hostname = socket.gethostname()# print("Host name:&quo ...

  8. ARM汇编中ldr伪指令和ldr指令（转载）

    转自:http://blog.csdn.net/ce123_zhouwei/article/details/7182756 ARM是RISC结构,数据从内存到CPU之间的移动只能通过L/S指令来完成, ...

  9. 模板 - 数学 - 快速傅里叶变换/快速数论变换（FFT/NTT）

    先看看. 通常模数常见的有998244353,1004535809,469762049,这几个的原根都是3.所求的项数还不能超过2的23次方(因为998244353的分解). 感觉没啥用. #incl ...

  10. HDU6069:Counting Divisors(因子数统计|区间筛)

    题意 计算\(\sum_{i=l}^kd(i^k)(d_i代表i的因子数)\) 分析 比赛搞了3个小时都没搞出来,有两个思维上的trick 1.要先遍历素数,再遍历[L,R],而不是枚举每个数,然后对 ...