在一些网站上可以经常看到有一些图片进行持续不断的滚动, 这个效果可以通过 CSS 的动画效果来实现. 下面我们来看一下 CSS 实现图片滚动的方法.
首先给出两组一样的图片 (同一行上), 让整体图片向左移动一组图片的长度.
这样在动画结束时会迅速还原到原来位置, 而此时正好与第二组图片交替, 看起来就像是一组图片在不断循环向左滚动.
具体步骤如下:
1, 设置主体代码各处两组一样的图片
- <nav>
- <ul>
- <li>
- <img src="image/1.jpg" alt=""></li>
- <li>
- <img src="image/2.jpg" alt=""></li>
- <li>
- <img src="image/3.jpg" alt=""></li>
- <li>
- <img src="image/4.jpg" alt=""></li>
- <li>
- <img src="image/5.jpg" alt=""></li>
- <li>
- <img src="image/6.jpg" alt=""></li>
- </ul>
- </nav>
2, 设置 nav 的大小, 宽度为一组图片相加的宽度, 高度为图片的高度.
- nav {
- width: 750px;
- height: 170px;
- border: 1px solid red;
- margin: 100px auto;
- }
3, 设置 ul 大小, 宽度为 nav 的两倍, 高度与 nav 相同, 并指定动画相关属性
- ul {
- width: 200%;
- height: 100%;
- animation: picmove 5s linear infinite forwards;
- }
4, 定义动画, 主要是向左移动一组图片的长度
- @keyframes picmove {
- from {
- transform: translate(0);
- }
- to {
- transform: translate(-750px);
- }
- }
5, 增加鼠标悬停, 动画暂停的效果
- ul:hover {
- animation-play-state: paused;
- }
6, 最后给 nav 增加 overflow:hidden 使得超出的部分隐藏, 这样整体一组滚动的图片栏就做好了
整体代码如下
- <!DOCTYPE html>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <title>
- Document
- </title>
- <style>
- * { margin: 0; padding: 0; } ul { list-style: none; } nav { width: 750px;
- height: 170px; border: 1px solid red; margin: 100px auto; overflow: hidden;
- } ul { width: 200%; height: 100%; animation: picmove 5s linear infinite
- forwards; } @keyframes picmove { from { transform: translate(0); } to {
- transform: translate(-750px); } } img { width: 250px; height: 170px; float:
- left; } ul:hover { animation-play-state: paused; }
- </style>
- </head>
- <body>
- <nav>
- <ul>
- <li>
- <img src="image/1.jpg" alt="">
- </li>
- <li>
- <img src="image/2.jpg" alt="">
- </li>
- <li>
- <img src="image/3.jpg" alt="">
- </li>
- <li>
- <img src="image/4.jpg" alt="">
- </li>
- <li>
- <img src="image/5.jpg" alt="">
- </li>
- <li>
- <img src="image/6.jpg" alt="">
- </li>
- </ul>
- </nav>
- </body>
- </HTML>
效果图:
来源: http://www.css88.com/qa/css3/12932.html