css3 transition 和 animation实现横向、纵向 滚动、走马灯( marquee 在H5已被废弃)
横向：
transition写法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>marquee</title>
<style type="text/css">
body{
padding: 0;
margin: 0;
}
#demo{
width: 100%;
height: 50px;
background: #eee;
position: fixed;
}
#demo>#spa{
word-break:keep-all;
white-space:nowrap;
position: absolute;
left: 100%;
font-size: 30px;
line-height: 50px;
}
</style>
</head>
<body>
<div id="demo"><span id='spa' >走马灯效果</span></div>
</body>
<script type="text/javascript">
var spa = document.getElementById("spa");
var spaw = spa.offsetWidth;
var bodyw = document.body.clientWidth;
var w = 0-(spaw+bodyw);
spa.style.transform = 'translate(' + w + 'px, 0px)';
spa.style.transition = 'transform 5s linear';
window.setInterval(function(){
spa.style.transform = 'translate(0px, 0px)';
spa.style.transition = 'transform 0s linear';
window.setTimeout(function(){
spa.style.transform = 'translate(' + w + 'px, 0px)';
spa.style.transition = 'transform 5s linear';
},100)
},5000)
</script>
</html>
animation写法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>marquee</title>
<style type="text/css">
#demo{
width: 100%;
height: 50px;
background: #eee;
position: fixed;
}
#demo>span{
word-break:keep-all;
white-space:nowrap;
position: absolute;
left: 100%;
font-size: 30px;
line-height: 50px;
}
#demo>.a{
-webkit-animation:demo 5s infinite;
-webkit-animation-timing-function:linear;
}
</style>
<style id='asty'></style>
</head>
<body>
<div id="demo"><span id='spa' class='a'>走马灯效果</span></div>
</body>
<script type="text/javascript">
var spa = document.getElementById("spa");
var width = 0-(spa.offsetWidth);
var style = document.getElementById("asty");
style.innerHTML = '@-webkit-keyframes demo{from {left: 100%;}to {left: '+width+'px;}}';
spa.className = 'a';
</script>
</html>
纵向：
一、逐条无缝滚动（无闪动）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>marquee</title>
<style type="text/css">
@-webkit-keyframes scrollText1 {
0%{
-webkit-transform: translateY(0px);
}
20%{
-webkit-transform: translateY(-30px);
}
40%{
-webkit-transform: translateY(-60px);
}
60%{
-webkit-transform: translateY(-90px);
}
80%{
-webkit-transform: translateY(-120px);
}
100%{
-webkit-transform: translateY(-150px);
}
}
@keyframes scrollText1 {
0%{
transform: translateY(0px);
}
20%{
transform: translateY(-30px);
}
40%{
transform: translateY(-60px);
}
60%{
transform: translateY(-90px);
}
80%{
transform: translateY(-120px);
}
100%{
transform: translateY(-150px);
}
}
.box3{
position: relative;
top: 20px;
left: 20px;
width: 200px;
height: 30px;
overflow: hidden;
border:1px solid #ccc;
}
.border3{
top: 0px;
-webkit-animation:scrollText1 8s infinite cubic-bezier(1,0,0.5,0) ;
animation:scrollText1 8s infinite cubic-bezier(1,0,0.5,0) ;
}
.border3 div{
height: 30px;
}
.border3:hover{
animation-play-state:paused;
-webkit-animation-play-state:paused;
}
</style>
</head>
<body>
<div class="box3">
<div class="border3">
<div>This is a test 1.</div>
<div>This is a test 2.</div>
<div>This is a test 3.</div>
<div>This is a test 4.</div>
<div>This is a test 5.</div>
<div>This is a test 1.</div>
</div>
</div>
</body>
</html>
二、
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>marquee</title>
<style type="text/css">
.marquee div {
display: block;
width: 100%;
text-align: center;
position: absolute;
overflow: hidden;
-webkit-animation: marquee 5s linear infinite;
animation: marquee 5s linear infinite;
}
@keyframes marquee {
0% {
transform: translateY(-50);
}
100% {
transform: translateY(-230px); // 每行高50
}
}
</style>
</head>
<body>
<div class="marquee">
<div>
<p class="label_txt">我是最后一个</p>
<p>让我掉下眼泪的 不止昨夜的酒</p>
<p>让我依依不舍的 不止你的温柔</p>
<p>余路还要走多久 你攥着我的手</p>
<p>走到玉林路的尽头 坐在(走过)小酒馆的门口</p>
<p class="label_txt">我是最后一个</p>
</div>
</div>