纯css滚动公告栏目
<!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滚动公告栏目的更多相关文章
- 不可思议的纯 CSS 滚动进度条效果
结论先行,如何使用 CSS 实现下述滚动条效果? 就是顶部黄色的滚动进度条,随着页面的滚动进度而变化长短. 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS , ...
- 纯css滚动视差
1.何为滚动视差 视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验. 作为网页设计的热点趋势,越来越多的网站应用了这项技术.效 ...
- 一、纯css实现顶部进度条随滚动条滚动
一.效果图 二.直接复制粘贴 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- Sultana后记：纯css也能写col,select,datepicker,carousel...
未完待续 背景 如今css3越来越发达,focus-within等属性也已经开始在Chrome得到支持.如果有出色的css功底,一点点ps技能,你也能用css3配合原生html标签写出优秀的框架.通过 ...
- js控制固定div和随屏滚动div兼容多浏览器和纯css控制（来自网络）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 纯css使用线性渐变实现滚动进度条(来自于微信前端早读课）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 使用纯 CSS 实现滚动阴影效果
开门见山,有这样一种非常常见的情况,对于一些可滚动的元素而言.通常在滚动的时候会给垂直于滚动的一侧添加一个阴影,用于表明当前有元素被滚动给该滚出了可视区域,类似这样: 可以看到,在滚动的过程中,会出现 ...
- CSS布局技巧 -- 纯CSS让子元素的宽度总和决定其父元素的宽度
使用场景 在移动端屏幕宽度有限的前提下,使用横向滚动的方式展示更多的内容.在这样的需求下,希望父元素作为容器,其宽度可以又横向排列资源的总宽度动态撑开,超过祖父元素的宽度:在不超过祖父元素时,自动继承 ...
- 纯CSS打造可折叠树状菜单
1:Html代码 <li> <label for="subsubfolder1">下级</label> <input id="s ...
随机推荐
- BDB c++例子，从源码编译到运行
第一步先下载源码,解压后 ./dist/configure --enable-cxx编译,然后make, make install --enable-cxx To build the Berkeley ...
- springboot web项目搭建
1.选择spring initializr 2.填写应用名称及设置相关配置,建议使用默认配置即可 3.选择相关技术,我们现在web技术 4.填写项目名称 5.项目文件结构如下 6.直接运行 java ...
- 不用打开Eclipse就可以执行的命令
1.android 弹出Android SDK and AVD Manager2.android list avds 列出所有创建的Android模拟器3.android list targets 列 ...
- 黑客技术 —— Linux 命令行
很多和正则表达式 re 是一致的: 1. 修改上次执行的命令 删除多余部分: % grep fooo /var/log/auth.log % ^o % grep foo /var/log/auth.l ...
- unity aSSETBUNDEL （转）
无论是模型资源还是UI资源,最好是先把他们放在Prefab中,然后在做成Assetbundle.我们以模型来举例,Assetbundle中可以放一个模型.也可以放多个模型,它是非常灵活了那么最需要考虑 ...
- qunar面试题及一位大牛的解答
本文摘自:http://www.cnblogs.com/jarson-7426/p/3989208.html 1.写一个函数padstare(string str1,min_lenthg,string ...
- 使用webpack报错
意思是: 意思是CLI被移动到了一个专门的包 webpack-cli里了.请安装webpack-cli 的除了webpack本身使用cli当用npm时,使用npm install webpack-cl ...
- pymssql读取varchar字段中文显示乱码的问题分析
问题 用python的pymssql模块读取旧业务系统后台SQL Server 2000数据库展示数据为乱码 开发环境 操作系统:windows 8 数据库 MS SQL Server 2000,默认 ...
- RxJava入门之路（一）
RxJava接触过蛮长时间了,但是让我说个所以然来还是说不出来,归根结底还是还是理解不够深刻,趁着年底这个时候争取写个系列出来给自己的学习做个记录 注意区分RxJava1.0和2.0的区别,以下默认是 ...
- node-- express()模块
1.代码分析 var express = require('express'); var app = express(); app.get('/', function(req, res){ res.s ...