html中怎样滚动图片,CSS如何实现滚动的图片栏（代码实例）

本文给大家介绍CSS如何实现滚动的图片栏(代码实例)，有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。

在一些网站上可以经常看到有一些图片进行持续不断的滚动，这个效果可以通过css的动画效果来实现。具体效果如下

主要原理是通过动画向左移动。

首先给出两组一样的图片(同一行上)，让整体图片向左移动一组图片的长度，

这样在动画结束时会迅速还原到原来位置，而此时正好与第二组图片交替，看起来就像是一组图片在不断循环向左滚动。

具体步骤如下：

1、设置主体代码各处两组一样的图片

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 使得超出的部分隐藏，这样整体一组滚动的图片栏就做好了

整体代码如下

Document

* {

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;

}

总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。更多相关教程请访问 CSS基础视频教程， CSS3视频教程！

html中怎样滚动图片,CSS如何实现滚动的图片栏（代码实例）相关推荐

截取固定大小图片css,css-使不同大小的图片在固定大小的容器中居中
HTML示例如下: 方法一: .imgbox{ position: relative; width: 240px; height: 240px; } .imgbox img{ position: ab ...
html怎么设置文字滚动效果,css如何实现滚动文字，实现滚动文字的代码
css如何实现滚动文字,实现滚动文字的代码发布时间:2020-05-09 10:35:36 来源:亿速云阅读:228 作者:小新这篇文章主要为大家详细介绍了css如何实现滚动文字,实现滚动文字的 ...
html如何上下滚动字幕,css如何做滚动字幕效果？
css如何做滚动字幕效果?下面本篇文章给大家介绍一下使用CSS做滚动字幕效果的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 在CSS中,可以利用animation属性和@ke ...
php将上传的图片转为base64,html5实现把上传的图片转成base64编码在显示（代码实例）...
本章给大家介绍html5实现把上传的图片转成base64编码在显示(代码实例).有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 首先我们来详细的看一看base64编码: 什么是bas ...
html5文字环绕图片,css怎么让文字环绕图片？
文字环绕图片,在Word里只要click一下右键,调一下属性就可以了.但在HTML文档里就没有直接属性了.因此我们可以借助CSS来实现这一效果. 我们先设定float的参数,如果图片需要左对齐设为le ...
html 首字变大,CSS设置首字放大效果（代码实例）
本章给大家介绍CSS如何设置首字放大效果,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 在很多的文章中,都有一个首字放大的效果,在CSS中同样可以实现该效果. CSS中通过对第一个 ...
css垂直+水平导航栏代码实例
第一种:垂直导航栏 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
html 向上滚动不间断,向上不间断滚动div+css+js模板
div+css不间断向上滚动模板上一次给大家介绍一种div css的不间断滚动代码JS特别多(不间断滚动css代码),这次给大家介绍的是比较实用比较简单的不间断css滚动代码 DIV+CSS不间断滚 ...
html图片排列布局下面字_css实现朋友圈照片排列布局代码实例
本篇文章小编给大家分享一下css实现朋友圈照片排列布局代码实例,代码介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看. 首先可以打开朋友圈观察不同图片数量的几种布局 ...
html中怎么设置文本框居中显示图片,css如何让图片水平居中显示？
在我们开发前端页面的时候,为了让页面效果美观,会让图片呈现居中效果.那么css怎么让img图片居中显示呢?本篇文章给大家带来css如何让img图片居中. display属性实现图片居中的两种方法: 1 ...

html中怎样滚动图片,CSS如何实现滚动的图片栏（代码实例）

html中怎样滚动图片,CSS如何实现滚动的图片栏（代码实例）相关推荐

最新文章

热门文章