<!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. JAVASCRIPT技术 表达式验证

    失去焦点时,调用方法: <html> <head><script type="text/javascript">function upperCa ...

  2. MFC之document与view实践总结

    Document/View是MFC的基石,负责程序数据的管理和显示,Doculent和Viewd的关系有一档一视,一档多视和多档多视,下面将分别对实现过程中的重点知识进行总结. 1. 视图的同步更新 ...

  3. IOS AutoLayout 代码实现约束—VFL

    在autolayout下,尽管使用IB来拖放控件,但仍然避免不了用代码来创建控件,这是约束需要代码来实现. IOS 提供了两种添加约束的方法 第一种: +(instancetype)constrain ...

  4. 洛谷 P1337 平衡点 & bzoj 3680 吊打 XXX —— 模拟退火

    题目:https://www.luogu.org/problemnew/show/P1337 https://www.lydsy.com/JudgeOnline/problem.php?id=3680 ...

  5. 【Cocos2dx】新建场景、场景的切换、设置启动场景与菜单的新建

    这是Cocos2dx最简单的部分.主要是体现对场景的操作,其实这东西就是Flash的舞台,安卓的Activity,WIN32窗体程序的Framework窗体,网页的body,反正就是对那个容纳各种东西 ...

  6. PYTHON XPath与lxml类库

    XPath,我们可以用先将HTML文档转换成XML文档,然后用XPath查找HTML节点或元素. XML文档实例 HTML DOM模型示例 HTML DOM定义了访问和操作HTML文档的标准方法,以树 ...

  7. @font-face 用fontsquirrel把ttf文件获取别的文件格式

    @font-face是css3的一个模块,但是@font-face这个功能早在IE4就支持了,他主要是把自己定义的Web字体嵌入到你的网页中, @font-face { font-family: &l ...

  8. Educational Codeforces Round 21E selling souvenirs (dp)

    传送门 题意 给出n个体积为wi,价值为ci的物品,现在有一个m大的背包 问如何装使得最后背包内的物品价值最大,输出价值 分析 一般的思路是01背包,但n*v不可做 题解的思路 We can iter ...

  9. python __builtins__ range类 （56）

    56.'range',  创建一个整数列表 class range(object) | range(stop) -> range object | range(start, stop[, ste ...

  10. IT兄弟连 JavaWeb教程 经典面试题3

    1．简述什么是重定向? 服务器向浏览器发送—个302状态码及一个Location消息头(该消息头的值是一个地址,称之为重定向地址),浏览器收到后会立即向重定向地址发出请求. 2．简述什么是转发?怎么实 ...