㈠用HTML5+CSS3做无限滚动效果
⑴逻辑分析
⑵实践示例
前5张图片为所有图片显示区，假设总长度为1100px；
后面出现的五张图片为克隆区，只是将前面的图片拷贝了一份；
然后将前五张和后五张的内容“捆绑”放在一个ul中，滚动的时候，就可以使得他们整体移动了
为了方便起见，尽量将ul的宽度设置的大一点，这样的话，可以容纳足够多的图片，包括克隆的图片
代码示例：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#container{
width:800px;
height:300px;
margin:100px auto;
overflow: hidden;
position: relative;
}
#container ul{
list-style: none;
width:4000px;
left:0;
top:0;
position: absolute;
-webkit-animation:scoll 6s linear 0s infinite;
}
#container ul li{
float:left;
margin-right:20px;
}
@-webkit-keyframes scoll{
from{
left:0;
}
to{
left:-1100px;
}
}
</style>
</head>
<body>
<div id="container">
<ul>
<li><a href="#"><img src="xz6.jpg" /></a></li>
<li><a href="#"><img src="xz2.jpg" /></a></li>
<li><a href="#"><img src="xz3.jpg" /></a></li>
<li><a href="#"><img src="xz4.jpg" /></a></li>
<li><a href="#"><img src="xz1.jpg" /></a></li>
<li><a href="#"><img src="xz6.jpg" /></a></li>
<li><a href="#"><img src="xz2.jpg" /></a></li>
<li><a href="#"><img src="xz3.jpg" /></a></li>
<li><a href="#"><img src="xz4.jpg" /></a></li>
<li><a href="#"><img src="xz1.jpg" /></a></li>
</ul>
</div>
</body>
</html>
效果图：
㈡用HTML5+CSS3做文字跳动
思路分析：
1. 由于文字有层次感的跳动，所以我们应该 "各个击破"， 每个文字有它自己的 "空间"。
2. 各个文字有先有后的跳动，所以我们应该一次递增每个文字的动画时长。
3. span标签默认是行内元素；但是对它们进行float操作之后，它们会变成块级元素。
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
h2 span{
float:left;
position: relative;
}
h2 span:nth-child(1){
-webkit-animation:jump 1s linear 0s infinite alternate;
}
h2 span:nth-child(2){
-webkit-animation:jump 1s linear 0.2s infinite alternate;
}
h2 span:nth-child(3){
-webkit-animation:jump 1s linear 0.4s infinite alternate;
}
h2 span:nth-child(4){
-webkit-animation:jump 1s linear 0.6s infinite alternate;
}
h2 span:nth-child(5){
-webkit-animation:jump 1s linear 0.8s infinite alternate;
}
@-webkit-keyframes jump
{
0%{
top:0px;
color:red;
}
50%{
top:-10px;
color:green;
}
100%{
top:10px;
color:blue;
}
}
</style>
</head>
<body>
<h2>
<span>石</span>
<span>海</span>
<span>莹</span>
<span>的</span>
<span>博</span>
<span>客</span>
</h2>
</body>
</html>
效果图：
参考：https://blog.csdn.net/sinat_27706697/article/details/49699367