纯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 ...
随机推荐
- 关于O_DIRECT的那些事儿
很久之前落下的坑,一直没怎么记录-.- 一般地,如果在Linux内核中读写一个文件,其IO流程都需要经过Kernel内的page cache层次,如果程序员若想要使用自己开发的缓存系统,那么就可以在打 ...
- NSArray使用须知
多用firstObject方法 在iOS7之前,我们获取NSArray的第一个元素,通常使用array[0],在iOS7中,新引入了公开的firstObject方法,对于空数组,该方法返回nil,而使 ...
- 「LuoguP1799」 数列_NOI导刊2010提高（06）
题目描述 虽然msh长大了,但她还是很喜欢找点游戏自娱自乐.有一天,她在纸上写了一串数字:1,1,2,5,4.接着她擦掉了一个l,结果发现剩下1,2,4都在自己所在的位置上,即1在第1位,2在第2位, ...
- Dijkstra再理解+最短路计数
众所周知,Dijkstra算法是跑单源最短路的一种优秀算法,不过他的缺点在于难以处理负权边. 但是由于在今年的NOI赛场上SPFA那啥了(嗯就是那啥了),所以我们还是好好研究一下Dij的原理和它的优化 ...
- python中为什么需要使用“if __name__ == '__main__'”语句
首先用最简洁的语言来说明一下 if __name__ == '__main__': 的作用:防止在被其他文件导入时显示多余的程序主体部分. 先举个例子,如果不用 if __name__ == '__m ...
- 洛谷P3354 [IOI2005]Riv 河流——“承诺”DP
题目:https://www.luogu.org/problemnew/show/P3354 状态中要记录一个“承诺”,只需相同承诺之间相互转移即可: 然后就是树形DP的套路了. 代码如下: #inc ...
- vs2008工程部署不成功，可能是远程文件路径出现问题
解决方法: 修改工程属性页的配置属性 调试中的远程可执行文件的路径 部署中的远程目录的路径
- D3.js 线段生成器 (V3版本)
线段生成器 与线段生成器相关的方法: d3.svg.line() //创建一个线段生成器. line(data) //使用线段生成器绘制data数据. line.x([x]) //设置或获取线 ...
- [原]Windows下openssl的下载安装和使用
安装openssl有两种方式,第一种直接下载安装包,装上就可运行:第二种可以自己下载源码,自己编译.下面对两种方式均进行详细描述. 一.下载和安装openss 方法一:直接使用openssl安装包 W ...
- Docker部署Tomcat,Nginx,Redis应用
一.tomcat部署 1.拉取tomcat镜像 docker pull tomcat:7-jre7 2创建tomcat容器 创建容器用于部署单点登录系统(CAS) -p表示地址映射 docker r ...