<!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. codeforces 414B B. Mashmokh and ACM(dp)

    题目链接: B. Mashmokh and ACM time limit per test 1 second memory limit per test 256 megabytes input sta ...

  2. 【转】cocos2dx 内存管理机制

    原文地址: http://www.zaojiahua.com/memory-management.html cocos2dx采用的是在堆上分配内存空间,想想看你在写程序的时候对于cocos2dx中的类 ...

  3. eclipse+PyDev里面import win32api报错的问题解决

    windows下面eclipse+PyDev的开发环境,安装了pywin32,写import win32api时老提示错误,在idle里正常执行. 原来是安装python库时,python安装路径下面 ...

  4. eclipse与maven配置

    一.配置maven环境 电脑上需安装java环境,安装JDK1.7 + 版本 (将JAVA_HOME/bin 配置环境变量path ) 配置 MAVEN_HOME 将 %MAVEN_HOME%/bin ...

  5. linux中vfork对打开文件的处理

    vfork和fork fork()函数是拷贝一个父进程的副本,拥有独立的代码段 数据段 堆栈空间 然而vfork是共享父亲进程的代码以及代码段 vfork是可以根据需要复制父进程空间,这样很大程度的提 ...

  6. PCB 线路铜皮面积(残铜率)计算的实现方法

    一个多月没更新博客园了,这里继续分享关于PCB工程相关一些知识,做过PCB工程都知道用使用genesis或incam是可以非常方便的计算得到铜皮面积这个参数[下图],但实际这个软件是通过什么算法计算出 ...

  7. Five things that make Go fast-渣渣翻译-让GO语言更快的5个原因

    原文地址:https://dave.cheney.net/2014/06/07/five-things-that-make-go-fast 翻译放在每个小段下面 Anthony Starks has ...

  8. Jmeter安装说明

    本文主要介绍Jmeter工具的安装 一.安装JDK 1.下载jdk,到官网下载jdk,下载jkd1.8即可,地址:http://www.oracle.com/technetwork/java/java ...

  9. matplotlib 绘图实例01：正弦余弦曲线

    该讲的实例结果如下图所示: 第01步:导入模块,并设置显示中文和负号的属性: import matplotlib.pyplot as plt import numpy as np plt.rcPara ...

  10. 题解报告：poj 1113 Wall（凸包）

    Description Once upon a time there was a greedy King who ordered his chief Architect to build a wall ...