CSS实现图片轮播

布满荆棘的人生 2022-05-31 13:21 257阅读 0赞

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

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

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>CSS3幻灯片</title>
        <style type="text/css" media="screen"> .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); } } </style>
    </head>
    
    <body>
    <div class="slider">
        <div class="items"></div>
    </div>
    </body>
    
    </html>

[转载地址：http://blog.csdn.net/crper/article/details/51384145][http_blog.csdn.net_crper_article_details_51384145]

[http_blog.csdn.net_crper_article_details_51384145]: http://blog.csdn.net/crper/article/details/51384145

发表评论取消回复

表情：

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

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

相关阅读

相关 CSS实现图片轮播

利用html+css+css3实现简单的图片轮播 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_te

妖狐艹你老母/ 2022年12月17日 11:57/ 0 赞/ 235 阅读

相关 c语言实现图片轮播,纯css实现轮播图

轮播图的实现原理其实是比较简单的举个例子 main的宽度是100px div-main的宽度是500px 我们用js控制div-main往左或往右移动，这样就实现了轮

阳光穿透心脏的1/2处/ 2022年10月15日 05:53/ 0 赞/ 261 阅读

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

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

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

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

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

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

相关 HTML+CSS+JQ实现图片轮播效果

焦点图广泛运用于主页的醒目位置放置广告，简单好用，加上效果也很好看。实现的效果： 5张图片每两秒轮播一次，右下角的数字随图片而变换，鼠标放在数字上图片停止，移走

灰太狼/ 2022年09月25日 02:30/ 0 赞/ 241 阅读

相关 CSS实现图片轮播

CSS3有个别特性,可以触发硬件GPU来加速渲染,而不是调用默认浏览器引擎渲染; 但是很多属性,默认都是不开启硬件加速的;需要触发条件,一个最简单的触发条件就是使用3D属性(

布满荆棘的人生/ 2022年05月31日 13:21/ 0 赞/ 258 阅读

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

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

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

相关 js+css+html实现个性化图片轮播

js+css+html实现个性化图片轮播学习js的时候按照教程写了一点简单的图片轮播，后来又发现了很多个性化轮播方式，于是学习借鉴完成了这个波浪式的图片轮播

迷南。/ 2022年03月30日 07:24/ 0 赞/ 209 阅读

相关 css实现图片点击轮播

css实现点击按钮图片轮播 html代码 <head> <meta charset="utf-8" /> <title></title>

Love The Way You Lie/ 2022年01月23日 02:07/ 0 赞/ 387 阅读

相关 Jquery+css实现图片无缝滚动轮播

Today，在XX学院的教学视频中，偶尔看到了Jquery+css实现图片无缝滚动轮播视频教程，虽然以前已写过类似的，但是我感觉他学的比较精简。为了方便以后做项目时直接拷...

系统管理员/ 2021年01月27日 15:32/ 0 赞/ 797 阅读