纯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 ...
随机推荐
- UVA - 10004 Bicoloring（判断二分图——交叉染色法 / 带权并查集）
d.给定一个图,判断是不是二分图. s.可以交叉染色,就是二分图:否则,不是. 另外,此题中的图是强连通图,即任意两点可达,从而dfs方法从一个点出发就能遍历整个图了. 如果不能保证从一个点出发可以遍 ...
- poj-1273 Drainage Ditches(最大流基础题)
题目链接: Drainage Ditches Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 67475 Accepted ...
- How to study Watir?
我在群空间,总是看到很多Watir新手,反复的问:我对元素的定位怎么又出错?我该从哪里着手啊?我给一个我认为最简单方便的学习方法.1. Ruby语法基础要入门,网上有一个不到2M的帮助文档,从头到尾仔 ...
- 英特尔、联发科、展讯等开始支持开源的物联网轻量化操作系统AliOS Lite
操作系统AliOS Lite Chaos 12-21 11:03 在 12 月 20 日的云栖大会北京峰会上,阿里宣布即将开源 AliOS Lite,此前面向 IoT 领域的轻量级物联网嵌入式操作系统 ...
- 动画浅析-CAAnimation和CATransition
出处: http://blog.csdn.net/mad2man/article/details/17260887 //动画播放完之后不恢复初始状态 baseAnimation.removed ...
- 【旧文章搬运】360安全卫士HookPort.sys完美逆向
原文发表于百度空间,2009-11-08 这是第一次逆向一个企业级安全产品的核心代码,并完美替换原驱动正常工作============================================= ...
- 一个C#文件传输模块,支持断点续传
一个C#文件传输模块,支持断点续传 最近做一个程序需要传送文件,在网上找了好久也没找到好用的方案,于是自己写了一个,与大家分享,希望大家帮忙改进,拍砖欢迎-文件采取分块发送,每块单独校验,能够保证文件 ...
- 斯坦福CS231n—深度学习与计算机视觉----学习笔记 课时6
课时6 线性分类器损失函数与最优化(上) 多类SVM损失:这是一个两分类支持向量机的泛化 SVM损失计算了所有不正确的例子,将所有不正确的类别的评分,与正确类别的评分之差加1,将得到的数值与0作比较, ...
- Codeforces686C【dfs】
题意: n,m<=1e9 设定一天n小时,一小时m分钟, 显示时间的是一个7进制的表, 问你在一天里出现多少个时刻,表中的数字要都不相同. 思路: 因为7进制,显示的数字肯定是0-7之间的. 然 ...
- hdu 1573 X问题【扩展中国剩余定理】
扩展中国剩余定理的板子,合并完之后算一下范围内能取几个值即可(记得去掉0) #include<iostream> #include<cstdio> #include<cm ...