纯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 ...
随机推荐
- DGA聚类 使用DBScan
features = sc.parallelize(data_group[idx]).map(lambda x: (x.host_ip+'^'+x.domain, 1)).reduceByKey(op ...
- 倒排列表求交集算法 包括baeza yates的交集算法
#ifndef __INTERSECT_HPP__ #define __INTERSECT_HPP__ #include "probe.hpp" namespace themas ...
- 【opencv】opencv在图片、视频嵌中英文字符的方法
转自:http://www.cnblogs.com/hujingshuang/p/5119015.html 说明:本博文是根据前人已有的成果并结合自己的理解而成的.为了避免让读者感到繁琐,我将运用小学 ...
- HDU6028：Forgiveness（TLE ing，占位）
Problem Description Little Q is now checking whether string A matches B. Two strings are considered ...
- 微信小程序服务类目大坑：特殊行业服务类目所需资质材料
作为一个技术开发人员,遇到特殊行业服务类目所需资质材料,只能叫苦连天了,妈的,这个不是技术可以解决的问题,如果技术可以解决的问题都不是问题. 百牛信息技术bainiu.ltd整理发布于博客园 特殊行业 ...
- Synchronized之三：Synchronized与线程中断、线程wait
线程中断 见<Thread之八:interrupt中断> 正如中断二字所表达的意义,在线程运行(run方法)中间打断它,在Java中,提供了以下3个有关线程中断的方法 //中断线程(实例方 ...
- HTTP node静态资源请求加载demo
MIME type的缩写为(Multipurpose Internet Mail Extensions)代表互联网媒体类型(Internet media type),MIME使用一个简单的字符串组成, ...
- (转)ORA-01245错误 (2013-04-13 18:37:01)
转自:http://blog.sina.com.cn/s/blog_56359cc90101crx2.html 数据库rman restore database 之后,执行recover databa ...
- web安全之XSS攻击原理及防范
阅读目录 一:什么是XSS攻击? 二:反射型XSS 三:存储型XSS 四:DOM-based型XSS 五:SQL注入 六:XSS如何防范? 1. cookie安全策略 2. X-XSS-Protect ...
- POJ3616【基础DP】
//因为同一点结束的时间段会有多个,这里没考虑: //无限wa: const int N=1e6+7; int b[N]; LL a[N]; LL dp[N]; struct asd{ int s; ...