在一些网站上可以经常看到有一些图片进行持续不断的滚动，这个效果可以通过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 lang="en">

<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>

CSS 实例之滚动的图片栏的更多相关文章

  1. CSS实例：翻转图片、滚动图片栏、打开大门

    CSS 翻转图片主要用到的技术除了3D翻转和定位 ,还用到了一个属性 backface-visibility:visable|hidden;该属性主要是用来设定元素背面是否可见. 效果图如下: 具体的 ...

  2. !!!css如何让img图片居中？css的display属性实现图片居中（代码实例）

    在我们开发前端页面的时候,为了让页面效果美观,会让图片呈现居中效果.那么css怎么让img图片居中显示呢?本篇文章给大家带来css如何让img图片居中?css的display属性实现图片居中(代码实例 ...

  3. CSS实例

    CSS 实例 CSS背景 设置页面的背景颜色 设置不同元素的背景颜色 设置一个图像作为页面的背景 错误的的背景图片 如何在水平方向重复背景图像 如何定位背景图像 一个固定的背景图片(这个图片不会随页面 ...

  4. CSS：CSS 实例

    ylbtech-CSS:CSS 实例 1.返回顶部 1. CSS 实例 CSS背景 设置页面的背景颜色 设置不同元素的背景颜色 设置一个图像作为页面的背景 错误的背景图片 如何在水平方向重复背景图像 ...

  5. 原生JS—实现图片循环切换及监测鼠标滚动切换图片

    今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法以及如何检测鼠标滚动循环切换图片.多余的话我们就不多说了,我们一个一个开始讲吧. 1  原生JS实现图片循环切换 -- 方法一 在上栗子之前我们 ...

  6. JavaScript学习笔记——简单无缝循环滚动展示图片的实现

    今天做了一个简单的无缝循环滚动的实例,这种实例在网页中其实还挺常见的,下面分享一下我的学习收获. 首先,无缝滚动的第一个重点就是——动.关于怎么让页面的元素节点动起来,这就得学明白关于JavaScri ...

  7. jQuery粘性跟随滚动条滚动的导航栏源代码下载

    jQuery粘性跟随滚动条滚动的导航栏源代码下载 作者:网页模板 大小:0.005MB 点击次数:3494 发布时间:2014-03-07 12:55 分享到:0 特效介绍 jQuery粘性跟随滚动条 ...

  8. JavaScript--鼠标滚动改变图片大小

    鼠标滚动改变图片的大小: 原理:当鼠标滚动时改变了zoom的值: <!DOCTYPE HTML> <html> <head> <title>通过鼠标滚轮 ...

  9. css网页中设置背景图片的方法详解

    在css代码中设置背景图片的方法,包括背景图片.背景重复.背景固定.背景定位等   用css设置网页中的背景图片,主要有如下几个属性: 1,背景颜色 {">说明:参数取值和颜色属性一样 ...

随机推荐

  1. Enterprise Library 6 学习笔记

    今天是2014年上班第一天,想着今年要做点与往年不同的事情,就从写博客开始吧. 公司的项目一般都用微软的企业库,一直没时间好好研究,第一天上班还不忙,就抽空研究了下.搜索一下,发现这个企业库已经到了6 ...

  2. Android 开发工具类 37_ ContactInfoProvider

    Android 手机中的联系人信息保存在  data\data\com.android.providers.contacts\databases\contacts2.db 中.主要有 raw_cont ...

  3. 如何在Notepad++里正确设置java环境（图文环境）

    不多说,直接上干货! 这款软件非常好用!!! Notepad++软件的下载与安装步骤(图文详解) 欢迎大家,加入我的微信公众号:大数据躺过的坑        人工智能躺过的坑       同时,大家可 ...

  4. 使用java调用fastDFS客户端进行静态资源文件上传

    一.背景 上篇博客我介绍了FastDFS的概念.原理以及安装步骤,这篇文章我们来聊一聊如何在java中使用FastDFSClient进行静态资源的上传. 二.使用步骤 1.开发环境 spring+sp ...

  5. node爬虫gbk中文乱码问题

    刚入坑node 写第二个node爬虫时,遇到了这个坑,记录一下. 主要步骤: 1.安装iconv-lite 输入npm install iconv-lite 2.将接收到的网页源码以二进制的方式存储下 ...

  6. java多线程下的所的概念

    锁和synchronized关键字     为了同步多线程,Java语言使用监视器(monitors),一种高级的机制来限定某一 时刻只有一个线程执行一段受监视器保护的代码.监视器的行为是通过锁来实现 ...

  7. MySQL slave状态之Seconds_Behind_Master【转】

    在MySQL的主从环境中,我们可以通过在slave上执行show slave status来查看slave的一些状态信息,其中有一个比较重要的参数Seconds_Behind_Master.那么你是否 ...

  8. 几种常见算法的Python实现

    1.选择排序 选择排序是一种简单直观的排序算法.它的原理是这样:首先在未排序序列中找到最小(大)元素,存放到排序序列的起始位置,然后,再从剩余未排序元素中继续寻找最小(大)元素,然后放到已排序序列的后 ...

  9. FFmpeg简易播放器的实现-音频播放

    本文为作者原创,转载请注明出处:https://www.cnblogs.com/leisure_chn/p/10068490.html 基于FFmpeg和SDL实现的简易视频播放器,主要分为读取视频文 ...

  10. [NOI 2016]循环之美

    Description 题库链接 给出十进制下的 \(n,m,k\) ,求 \(\frac{i}{j},i\in[1,n],j\in[1,m]\) 在 \(k\) 进制下不同的纯循环小数个数. 纯循环 ...