只用css实现图片自动轮播效果

淡淡的烟草味﹌ 2022-01-23 01:53 282阅读 0赞

css实现图片自动轮播

只用css实现图片轮播效果

代码

// An highlighted block
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    		<style>
    			img{ 
    				position: absolute;          /*让所有图片显示在一个位置，设置绝对位置*/
    				opacity: 0;
    				animation: Aimg 12s infinite;      /*设置图片轮播一次时间，以及轮播方式（无限循环）*/
    			}
    			@keyframes Aimg{ 
    				0% {                   /*在百分之零时图片完全不可见*/
    					opacity: 0;
    				}
    				
    				1% { 
    					opacity: 0.3;
    				}
    				2% { 
    					opacity: 0.5;
    				}
    				3% { 
    					opacity: 0.8;
    				}
    				4% {                  /*设置这些尽量让图片切换时更加流畅，不突兀*/
    					opacity: 1;
    				}
    				24% { 
    					opacity: 1;
    				}
    				
    				25% {                /*在此时本张图片显示结束，不透明度设置为0*/
    					opacity: 0;
    				}
    			}
    			img:nth-child(0){ animation-delay: 0s;}/*设置下一个子元素延迟时间*/
    			img:nth-child(1){ animation-delay: 3s;}
    			img:nth-child(2){ animation-delay: 6s;}
    			img:nth-child(3){ animation-delay: 9s;}
    		</style>
    	</head>
    	<body>
    		<div>
    			<img src="img/11.jpg"  />
    			<img src="img/3.jpg"  />
    			<img src="img/324347.jpg" />
    			<img src="img/4.jpg" />
    		</div>
    	</body>
    </html>

发表评论取消回复

表情：

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

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

相关阅读

相关 JQuery实现简单图片自动轮播效果

原理:依靠子元素位移实现图片转换效果图原理： ![20210206114348447.gif][] 效果：不带自动切换的轮播，需要点击才能轮播 ![2021020

叁歲伎倆/ 2022年10月28日 12:25/ 0 赞/ 224 阅读

相关 html网页简单实现图片轮播效果,html+css+js简单实现图片轮播效果

\\{background-color:green;\} \lunbo\{ width:600px; height:600px;position:relative;left:

ゞ浴缸里的玫瑰/ 2022年10月06日 07:49/ 0 赞/ 287 阅读

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

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

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

相关 JS实现图片轮播效果（自动和手动）

本次轮播效果图如下：![20180530162018480][] 具有以下功能：1.自动播放（鼠标进入显示区域时停止播放） 2.左右焦点切换 3.底下小按钮切换 ps:由

小灰灰/ 2022年05月23日 01:26/ 0 赞/ 221 阅读

相关 js无缝轮播效果实现，自动轮播

轮播图，是网站首页中最为常见的一种图片切换特效，那么今天就来分享一篇前端开发实战当中经常使用到的实现无缝轮播图效果的文章，希望对您有所帮助，欢迎留言探讨。 1、html结构

本是古典何须时尚/ 2022年04月06日 06:13/ 0 赞/ 352 阅读

相关 css3图片轮播效果

HTML5前端广告的轮播效果第一步轮播效果图分两部分 1. css样式的设计 2. js实现图片的轮播 css样式： <style type

ゝ一世哀愁。/ 2022年02月15日 14:53/ 0 赞/ 292 阅读

相关 css:用css实现图片旋转轮播3d效果

CSS3的transform-style: :css3属性，在3d空间非常重要的一个属性，有两个值： flat 子元素将不保留其 3D 位置，默认值。 preser

「爱情、让人受尽委屈。」/ 2022年02月15日 01:49/ 1 赞/ 847 阅读

相关只用css和html实现简单的图片轮播效果

用css和html实现简单的图片轮播效果三种方式： 1.直接变换 <!DOCTYPE html> <html lang="en"> <he

「爱情、让人受尽委屈。」/ 2022年02月15日 00:11/ 0 赞/ 202 阅读

相关只用css实现图片自动轮播效果

css实现图片自动轮播只用css实现图片轮播效果代码 // An highlighted block <!DOCTYPE html> <htm

淡淡的烟草味﹌/ 2022年01月23日 01:53/ 0 赞/ 283 阅读

相关【用HTML+CSS实现简单的轮播图片效果】

本文主要从两种方式上实现轮播图片效果 -------------------- 方法一 \\\====================================

梦里梦外;/ 2021年12月04日 07:17/ 0 赞/ 798 阅读