html图片闪现循环效果,CSS实现图片无缝无限循环展示效果

只是想练练手，看看能不能实现在页面上放置一个能无限循环滚动的图片横幅。事实证明，这并不是很难。

先看实际效果：

无限循环滚动的关键是确定宽图片的位置

首先，这个图片的设计需要有一点技巧，就是它的首位部分是相同重复的，上面的演示里使用的图片是下面这幅：

滚动的过程是变换图片的left位置，直到图片完整的展示一个循环(事实上是移动到看起来是一个循环)，然后立刻将left值调整到最初的位置，开始下一次循环。

我们只需要在外面给图片包个东西，挡住图片多出的内容，里面的容器元素来执行动画效果。

把图片放到这里面。

.slideshow {

position: relative;

overflow: hidden;

}

.images {

background: url(slideshow.jpg);

position: absolute;

left: 0;

top: 0;

height: 100%;

width: 300%;

animation: slideshow 10s linear infinite;

}

@keyframes slideshow {

0% { left: 0; }

100% { left: -200%; }

}

性能优化

上面的代码已经能很好的工作了，但如果你的机器配置不高，或浏览器不够先进，可能出现一些性能问题。事实上，我们可以通过使用translateX来代替left达到激发让浏览器使用3D变换动用GPU来提供性能。

注意：2D变换和opacity值变化并不会带来这种性能变化，如果不使用 translateX ，就不能从GPU上获得任何好处。

.images {

...

/* hi 浏览器，使用你的GPU */

transform: translate3d(0, 0, 0);

}

@keyframes moveSlideshow {

100% {

-webkit-transform: translateX(-200%);

}

我并不是特别喜欢用这样的小伎俩来让浏览器提升性能，但作为CSS开发者，这种技巧很常见。

增加更酷炫的效果

除了让图片无限循环滚动展示外，我们还要增加一些特效：

滚动速度变化

从黑白色变成彩色

对于速度的调整，我们只需要修改duration值：

.slideshow:hover .images {

animation-duration: 5s;

}

但这样会引起图片位置的跳动！修改动画的duration会产生一个新的timeline，一些属性的值会相应的调整，结果是，它并不是在当前位置开始加速减速。这个问题目前还没有想到什么好方法。

这里我们使用了另外一种方法。我们制作了两行图片，一个运动快，一个运动慢，一个显示，一个隐藏，当需要速度变化时，互换它们的显示属性。

这样就产生了一个相对平滑的切换过程。

把你的图片放到这里。

.slideshow > div {

...

transition: opacity 0.5s ease-out;

/* 慢 */

animation: moveSlideshow 60s linear infinite;

...

}

.images-1 {

/* 快 */

animation: moveSlideshow 20s linear infinite;

}

.slideshow:hover .images-2 {

opacity: 0;

}

为了节省带宽，我们将黑白图片和彩色图片合成到了一起。

.images-1 {

/* Sprite */

background-position: 0 200px;

...

}

这就是最终的成品！

html图片闪现循环效果,CSS实现图片无缝无限循环展示效果相关推荐

css中图片整合的使用,CSS Sprites:图片整合技术详细案例
CSS Sprites 的目的就是通过整合图片,减少对服务器的请求数量,从而加快页面加载速度.介绍了CSS Sprites技术的实现方法,优点和缺点.最后通过实例CSS Sprites技术制作导航栏演 ...
HTML图片重叠变换,CSS实现图片无缝无限循环展示效果
只是想练练手,看看能不能实现在页面上放置一个能无限循环滚动的图片横幅.事实证明,这并不是很难. 先看实际效果: 无限循环滚动的关键是确定宽图片的位置首先,这个图片的设计需要有一点技巧,就是它的首位部 ...
css中在图片上加透明,css 给图片添加滤镜效果，透明层毛玻璃效果
我们用的第一个滤镜是sepia(),他会给图片增加一整降饱和度的橙色染色效果原图添加sepia滤镜的效果 img{ width:100%; transition: .5s filter; filt ...
HTML点击图片下方出现阴影,纯css实现图片点击时移动效果和阴影效果
有人喜欢用js加css实现这样的效果,而我比较喜欢用最简单的方法实现这样的效果,因为我是个简单的人,所以我要做最简单实用的事儿(hei hei)...好处就是:简单,方便操作,给服务器减少压力,对se ...
html怎么让图片变灰色,利用CSS设置图片黑白/灰色效果，同时适用于整站变灰
写页面的时候由于页面风格原因,可能需要图片变灰色,如果用图片处理软件的话可能会比较麻烦,而且会增加图片的数量,不利于资源的合理利用. 下面提供两种方法: 1.使用CSS的 filter: gray; ...
html背景图片循环自动播放,CSS动画实现背景无缝无限循环的实现示例
1. 需求一张图片从左向右无限循环移动 2. 代码由于是应用在移动端,故使用rem单位,后面问题也发生在这. HTML CSS .dog { width: 5.4rem; \\图片宽度 heigh ...
html如何做好看的图片效果,CSS使用图片美化的漂亮菜单效果
本文实例讲述了CSS使用图片美化的漂亮菜单效果.分享给大家供大家参考.具体如下: 这里介绍的这个菜单很漂亮,因为每个菜单项都是调用的图片,感觉这个菜单有点华而不实,毕竟菜单太多会影响网页加载,一个菜单 ...
html5怎么让图片向下无限循环,图片效果，教你制作无限循环的德罗斯特效应图片...
什么叫德罗斯特效应?就是这类可以无限循环的图片,看上去非常有意思,而且制作十分简单,只要几步就能做出来. 这个就是德罗斯特效应的效果: 要制作这种效果效果是不是很复杂呢,其实用Photoshop几步操 ...
html如何让图片跟字体重叠,CSS设置图片与文字的间距
[实例介绍] CSS设置图片与文字的间距希望图片本身与文字有一定的距离只需要给标记添加margin属性即可.margin属性包括margin．top.margin-right,margin-bott ...
php图片背景平铺,css如何让背景图片平铺？css背景图片平铺四种方式介绍
在网页设计的过程中,有时候可能会要求背景图片平铺,因为这样会让整个网页看起来比较好看,图片平铺可以不用具体设置body宽度和高度大小,就可以直接将图片平铺整个页面,那么,如何让背景图片平铺呢?接下来本 ...

html图片闪现循环效果,CSS实现图片无缝无限循环展示效果

html图片闪现循环效果,CSS实现图片无缝无限循环展示效果相关推荐

最新文章

热门文章