网站上可以经常看到有一些图片进行持续不断的滚动, 那么如何使用 CSS 实现这个滚动图片栏的动画效果? 下面本篇文章就来给大家介绍一下. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
网站上可以经常看到有一些图片进行持续不断的滚动, 这个效果可以通过 CSS 的动画效果来实现.
主要原理是通过动画向左移动.
首先给出两组一样的图片 (同一行上), 让整体图片向左移动一组图片的长度,
这样在动画结束时会迅速还原到原来位置, 而此时正好与第二组图片交替, 看起来就像是一组图片在不断循环向左滚动.
具体步骤如下:
1, 设置主体代码各处两组一样的图片
- <nav>
- <ul>
- <li><img src="Images/1 (2).jpg" alt=""></li>
- <li><img src="Images/2 (2).jpg" alt=""></li>
- <li><img src="Images/3 (2).jpg" alt=""></li>
- <li><img src="Images/1 (2).jpg" alt=""></li>
- <li><img src="Images/2 (2).jpg" alt=""></li>
- <li><img src="Images/3 (2).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="Images/1 (2).jpg" alt="">
- </li>
- <li>
- <img src="Images/2 (2).jpg" alt="">
- </li>
- <li>
- <img src="Images/3 (2).jpg" alt="">
- </li>
- <li>
- <img src="Images/1 (2).jpg" alt="">
- </li>
- <li>
- <img src="Images/2 (2).jpg" alt="">
- </li>
- <li>
- <img src="Images/3 (2).jpg" alt="">
- </li>
- </ul>
- </nav>
- </body>
- </HTML>
更多 web 开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/web/css/16142.html