<!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. unity-Fatal Error GC-GetThreadContext Failed

    这几次在使用unity5.3打windows包后,运行x.exe不久总是会弹出"fatal error GC: GetThreadContext Failed"的错误.到网上查了, ...

  2. BZOJ_2097_[Usaco2010 Dec]Exercise 奶牛健美操_二分答案+树形DP

    BZOJ_2097_[Usaco2010 Dec]Exercise 奶牛健美操_二分答案+树形DP Description Farmer John为了保持奶牛们的健康,让可怜的奶牛们不停在牧场之间 的 ...

  3. 字符串转Unicode码

    var str = '中'; var charCode = str.charCodeAt(0); console.log(charCode); // => 20013; str.charCode ...

  4. linux/unix下 pid文件作用浅析

    l在linux系统的目录/var/run下面一般我们都会看到很多的*.pid文件.而且往往新安装的程序在运行后也会在/var/run目录下面产生自己的pid文件.那么这些pid文件有什么作用呢?它的内 ...

  5. 详细的Ajax使用

    1. ajax对xml的接收和处理 xml主要作用: 主要保存和传输数据 1. xml文档结构 dom操作xml getElementsByTagName(); //根据标签名获取元素 childNo ...

  6. nodejs QueryString模块 详解

    QueryString模块 "QueryString" 模块用于实现URL参数字符串与参数对象的互相转换 此类一共包括4个方法: querystring.stringify(obj ...

  7. oracle报ORA-00911：invalid character

    转自:http://www.cnblogs.com/chuang-sharing/p/9493316.html 今天查问题的时候,发现一个在分号后边加注释,解析错误的问题: select decode ...

  8. Python学习之旅—生成器与迭代器案例剖析

    前言 前面一篇博客笔者带大家详细探讨了生成器与迭代器的本质,本次我们将实际分析一个具体案例来加深对生成器与迭代器相关知识点的理解. 本次的案例是一个文件过滤操作,所做的主要操作就是过滤出一个目录下的文 ...

  9. 20180504-hm

    trail vt. 跟踪,追踪; 拖曳:让…拖或飘扬在后面; 拖沓而行; 跟在…后面; n. 小径; 足迹; 臭迹; 一缕;

  10. go语言 rsa加密

    // rsa.go package main import ( "crypto/rand" "crypto/rsa" "crypto/x509&quo ...