html图片轮播幻灯片,CSS3的animation实现简易幻灯片轮播特效

- 日理万妓 2022-10-06 07:57 199阅读 0赞

![5268f80b9b1e01f982625ef6fac83ca1.png][]

这篇文章主要为大家详细介绍了CSS3 animation实现简易幻灯片轮播特效,具有一定的参考价值，感兴趣的小伙伴们可以参考一下

CSS3有个别特性,可以触发硬件GPU来加速渲染,而不是调用默认浏览器引擎渲染;

但是很多属性,默认都是不开启硬件加速的;需要触发条件,一个最简单的触发条件就是使用3D属性(对Z轴的操作)

效果图

![afee410a2f016218c408360de25311b1.gif][]

代码

CSS3幻灯片

.items \{

width: 280px;

height: 150px;

border: 1px solid \#ddd;

box-sizing: border-box;

border-radius:10px;

background-size: cover;

\-webkit-transform: translateZ(0);

transform: translateZ(0);

background-repeat: no-repeat;

\-webkit-animation: slider 15s linear infinite alternate;

animation: slider 15s linear infinite alternate;

\-webkit-transform-origin: center center;

transform-origin: center center;

\}

@-webkit-keyframes slider \{

0% \{

background-image: url(1.jpg) ;

\}

25% \{

background-image: url(2.jpg) ;

\}

50% \{

background-image: url(3.jpg) ;

\}

75% \{

background-image: url(4.jpg);

\}

100% \{

background-image: url(5.jpg);

\}

\}

@keyframes slider \{

0% \{

background-image: url(1.jpg) ;

\}

25% \{

background-image: url(2.jpg) ;

\}

50% \{

background-image: url(3.jpg) ;

\}

75% \{

background-image: url(4.jpg);

\}

100% \{

background-image: url(5.jpg);

\}

\}

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

关于CSS3中常见transformation图形变化的用法

关于CSS3的animation实现逐帧动画效果

[5268f80b9b1e01f982625ef6fac83ca1.png]: /images/20221005/37a4d2b1afc54f33a25408be3e9d0d3c.png
[afee410a2f016218c408360de25311b1.gif]: /images/20221005/72c021dda8354b6589e7c895317eec19.png

发表评论取消回复

表情：

评论列表（有 0 条评论，199人围观）

还没有评论，来说两句吧...

相关阅读

相关 html图片轮播思路,css3如何实现轮播图？css3实现轮播图片的方法

我们在网页上经常会看到有一块位置会有很多的图片来回切换，这就是轮播图，轮播图的出现，让重要的信息可以在一个位置显现，那么，轮播图是如何实现的呢？轮播图的实现用js或者css都可

妖狐艹你老母/ 2022年10月12日 05:41/ 0 赞/ 331 阅读

相关 html js 3d图片轮播,js实现3D图片逐张轮播幻灯片特效代码分享

本文实例讲述了javascript实现3D图片逐张轮播幻灯片特效。分享给大家供大家参考。具体如下：这是一款基于javascript实现3D图片逐张轮播幻灯片特效代码，实现过

末蓝、/ 2022年10月06日 13:53/ 0 赞/ 433 阅读

相关简单html实现图片轮播,JavaScript实现简易轮播图

JavaScript实现简易轮播图 Html代码块： ![1.jpg][] ![2.jpg][1.jpg] ![3.jpg][1.jpg] ![4.jpg][1.jp

小鱼儿/ 2022年10月06日 09:47/ 0 赞/ 330 阅读

相关 html图片轮播幻灯片,CSS3的animation实现简易幻灯片轮播特效

![5268f80b9b1e01f982625ef6fac83ca1.png][] 这篇文章主要为大家详细介绍了CSS3 animation实现简易幻灯片轮播特效,具有一定的

- 日理万妓/ 2022年10月06日 07:57/ 0 赞/ 200 阅读

相关 html网页简单实现图片轮播效果,CSS3简单实现图片切换轮播

HTML代码： A B C CSS代码：.pic-switch\{ width: 500px; height: 300px; margin: 0px auto;

曾经终败给现在/ 2022年10月06日 06:59/ 0 赞/ 276 阅读

相关 html实现自动图片轮播,图片轮播的实现（html__js）

1.简单实现 1)实现思想：通过轮播次数来决定显示那一张首先，可以用简单的div 包含img的框架来实现，我们为他添加按钮，每个按钮对应不同的图片，那么，每点击一次，将要显示

待我称王封你为后i/ 2022年10月06日 00:48/ 0 赞/ 272 阅读

相关 HTML+CSS+JS实现 ❤️HTML5图片幻灯片轮播切换❤️

> 效果演示：文末获取源码 > > ![20210907210142796.gif][] > 代码目录： ![watermark_type_ZHJvaW

Love The Way You Lie/ 2022年09月10日 11:24/ 0 赞/ 172 阅读

相关 HTML+CSS+JS实现 ❤️图片轮播幻灯片❤️

> 效果演示：文末获取源码 > > ![20210907203132617.gif][] > 代码目录： ![watermark_type_ZHJvaWR

叁歲伎倆/ 2022年09月10日 11:22/ 0 赞/ 204 阅读

相关 html-css-javaScript实现图片轮播

先看效果： ![这里写图片描述][70] 有三张图片，图片两侧有左右切换按钮，右下侧的小圆点点击可以随意切换图片。鼠标没移动到图片上时，每隔三秒自动切换图片。

素颜马尾好姑娘i/ 2022年05月15日 11:48/ 0 赞/ 184 阅读

相关简易轮播图，走马灯，幻灯片(html+css+jq)

今天做一个简易轮播图首先做轮播图没有好看的图片怎么行，准备三张大小一致的图片，图片1图片2图片3。 01.jpg ![01.jpg][] 02.jpg ![0

淡淡的烟草味﹌/ 2022年03月27日 13:08/ 0 赞/ 539 阅读