<!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. 设置linux服务器下开放端口

    查询 netstat -anp  所有开放端口信息 二.关闭端口号: iptables -A OUTPUT -p tcp --dport 端口号-j DROP 三.打开端口号: iptables -A ...

  2. codeforces 696C C. PLEASE(概率+快速幂)

    题目链接: C. PLEASE time limit per test 1 second memory limit per test 256 megabytes input standard inpu ...

  3. 【HDU 1754】 I Hate It

    [题目链接] 点击打开链接 [算法] 树状数组的最值查询 详见这篇文章 : https://blog.csdn.net/u010598215/article/details/48206959 [代码] ...

  4. bzoj1207 [HNOI2004]打鼹鼠——LIS

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1207 这题和求LIS有点像,打这一只鼹鼠一定可以从打上一只鼹鼠转移过来: 所以不用考虑机器人 ...

  5. bzoj5073

    dp 字符串dp不太会啊... 这种序列和子串的匹配一般设两个状态,dp[i][j]表示当前s匹配到i,t匹配到j的...,g[i][j]表示当前s匹配到i,t匹配到j,i,j必须匹配的...,noi ...

  6. 使用mysqlfrm恢复frm表结构，获得建表语句

    1.mysqlfrm 是一个恢复性质的工具,用来读取.frm文件并从该文件中找到表定义数据生成CREATE语句. 下载链接:https://downloads.mysql.com/archives/u ...

  7. emacs编辑c文件时，大括号的跳转（转载）

    转自:http://forum.ubuntu.org.cn/viewtopic.php?f=68&t=26701 `C-M-n' Move forward over a parenthetic ...

  8. ORACLE PL/SQL 实例精解之第一章 PL/SQL概念

    1.传统一层一层传数据,而PLSQL作为独立的单元返回客户端,减少查询,减少网路传输的往返,高效 2.PL/SQL语句块 分为两种:命名(子程序,函数,包保存在数据库中,后期可以根据名称进行引用),匿 ...

  9. Codeforces687A【未完继续....】

    http://codeforces.com/problemset/problem/687/A

  10. 安装 statconn 使R与c#交互

    很久以前完成过,但是最近重新折腾发现全忘了,所以记下来. 1.安装 R 2.安装 R studio 3.去 http://rcom.univie.ac.at/download.html 下载 stat ...