在一些网站上可以经常看到有一些图片进行持续不断的滚动,这个效果可以通过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. JNI 简单例子

    原文:http://www.cnblogs.com/youxilua/archive/2011/09/16/2178554.html 1,先把c语言的编译环境搭建好,windows下这里使用mingw ...

  2. Git学习系列之Debian或Ubuntu上安装Git详细步骤(图文详解)

    前言 最早Git是在Linux上开发的,很长一段时间内,Git也只能在Linux和Unix系统上跑.不过,慢慢地有人把它移植到了Windows上.现在,Git可以在Linux.Unix.Mac和Win ...

  3. 【JAVA SPRING】IOC与AOP

    IOC(注入)有三种类型: 构造函数注入: 属性注入: 接口注入: JAVA反射: JAVA反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法: 对于任意一个对象,都能够调用它的 ...

  4. 如何让你的网站用上免费的HTTPS

    因为之前网站上被注入了广告,再百般尝试之后最后还是使用了HTTPS解决了. 在实现HTTPS的时候最关键的就是证书. 证书的质量觉得了你被多少浏览器所信任. 证书的价格也就蹭蹭蹭往上涨了. 这里推荐一 ...

  5. freemark null处理

    以下引用官方描述: 引用The FreeMarker template language doesn't know the Java language null at all. It doesn't ...

  6. 25-hadoop-hive-函数

    内置函数: 函数分类: 内置函数查看: show funcitons; 查看函数描述: DESC FUNCTION concat; 具体见: https://cwiki.apache.org/conf ...

  7. Solr 访问 403 错误

    把 Solr 基础环境搭建好后访问发现会出现 403 错误: 解决方法: 找到自己 Tomcat 目录下的 solr ,找到  ...\solr\WEB-INF\web.xml,然后把 169 - 1 ...

  8. C#Redis 常用key操作

    一.前戏 在该系列的前几篇博客中,主要讲述的是与Redis数据类型相关的命令,如String.List.Set.Hashes和Sorted-Set.这些命令都具有一个共同点,即所有的操作都是针对与Ke ...

  9. jQuery自定义数组操作类(类似于List集合的增删改查)

    js外部文件,前提需要引入jquery类库. 封装类代码如下: (function ($) {     $.List = function () {         var _list = new A ...

  10. SQL Server无法打开物理文件,操作系统错误 5:"5(拒绝访问。)的解决办法

    在新装的系统中使用SQL Server附加以前的数据库的时候可能会遇到“无法打开物理文件,拒绝访问”的错误,如下图: 解决方法为使用windows验证登录,或者更改SQL Server内置账户类型为L ...