纯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 ...
随机推荐
- 转：Oracle:删除表空间
原文:http://space.itpub.net/40239/viewspace-365948 OMF和非OMF管理的数据文件在DROP TABLESPACE时是否会自动删除,做了测试: SQL&g ...
- fuse的write过程到底是怎么样的，128KB的buffer怎么用？
1. 在fuse/lib/fuse_kern_chan.c中有一个buffer设置 #define MIN_BUFSIZE 0x21000 //十进制132×1024 //为何不是128? 下面有一 ...
- laya的skeleton骨骼动画事件响应问题
创建skeleton节点并绑定MOUSE_DOWN事件后,却始终无法响应.经测试发现如下: skeleton节点在load结束后,其bounds反映了总体的宽高,但是width与height却为0,而 ...
- I.MX6 2G DDR3 16G eMMC
/************************************************************************* * I.MX6 2G DDR3 16G eMMC ...
- POJ1474：Video Surveillance（求多边形的核）（占位）
A friend of yours has taken the job of security officer at the Star-Buy Company, a famous depart- me ...
- [AHOI 2006] 上学路线
[题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1266 [算法] 首先 , 用Dijkstra求单源最短路 然后 , 建出这张图G的最 ...
- linux--vsftpd的安装和配置（转）
Linux下如何进行FTP设置(转) [TOC] Redhat/CentOS安装vsftp软件 1. 安装vsftp $ yum install vsftpd -y 2. 添加ftp帐号和目录 先检查 ...
- 【旧文章搬运】Windbg+Vmware驱动调试入门(二)---Vmware及GuestOS的设置
原文发表于百度空间,2009-01-08========================================================================== 这一篇是主 ...
- cardboard sdk for unity 系统分析 - 属性行为分析CardBoard类
一.CardBoard类是个单例类,全局只有一个CardBoard对像且在需要时才生成: CardBoard中主要使用了BaseVRDevice device这个对像,而这个对像也是单例类BaseVR ...
- typeof操作符返回一个字符串，表示未经计算的操作数的类型。
typeof操作符返回一个字符串,表示未经计算的操作数的类型. 语法 typeof运算符后跟操作数: typeof operand or typeof (operand) 参数 operand 是 ...