使用CSS3实现的幻灯图片效果

于 2021-11-25 21:43:50 发布
阅读量662 收藏 2
点赞数
分类专栏： css Html 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51049931/article/details/121548242
版权

一、代码

1.html代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS3</title>
		<link rel="stylesheet" type="text/css" href="./ppt.css"/>
	</head>
	<body>
		<div class="container">
			<header>
				<h1>使用CSS3实现幻灯图片的效果</h1>
				<p class="codrops-demos">&nbsp;</p>
				<section class="cr-container">
					<input id="select-img-1" name="radio-set-1" type="radio" class="cr-selector-img-1" checked />
					<label for="select-img-1" class="cr-lable-img-1">1</label>
					
					<input id="select-img-2" name="radio-set-1" type="radio" class="cr-selector-img-2" checked />
					<label for="select-img-2" class="cr-lable-img-2">2</label>
					
					<input id="select-img-3" name="radio-set-1" type="radio" class="cr-selector-img-3" checked />
					<label for="select-img-3" class="cr-lable-img-3">3</label>
					
					<input id="select-img-4" name="radio-set-1" type="radio" class="cr-selector-img-4" checked />
					<label for="select-img-4" class="cr-lable-img-4">4</label>
					
					<div class="clr"></div>
						<div class="cr-bgimg">
							<div>
							<span>Slice 1 - Image 1</span>
							<span>Slice 1 - Image 2</span>
							<span>Slice 1 - Image 3</span>
							<span>Slice 1 - Image 4</span>
							</div>
							
							<div>
							<span>Slice 2 - Image 1</span>
							<span>Slice 2 - Image 2</span>
							<span>Slice 2 - Image 3</span>
							<span>Slice 2 - Image 4</span>
							</div>
							
							<div>
							<span>Slice 3 - Image 1</span>
							<span>Slice 3 - Image 2</span>
							<span>Slice 3 - Image 3</span>
							<span>Slice 3 - Image 4</span>
							</div>
							
							<div>
							<span>Slice 4 - Image 1</span>
							<span>Slice 4 - Image 2</span>
							<span>Slice 4 - Image 3</span>
							<span>Slice 4 - Image 4</span>
							</div>
						</div>
					
					<div class="cr-titles"></div>
					
				</section>
			</header>
		</div>
	</body>
</html>

2.CSS代码

/* 设计section样式 */
.cr-container{
	width:600px;
	height:400px;
	position:relative;
	margin:0 auto;
	border:20px solid #fff;
	box-shadow:1px 1px 3px rgba(0,0,0,0.1);
}
/* 对label进行设置 */
.cr-container label{
	font-style:italic; 
	width: 150px;
	height:30px;
	cursor:pointer;
	color:#fff;
	line-height:32px;
	font-size:24px;
	float:left;
	position:relative;
	margin-top:350px;
	z-index:1000;
}
/* 对label进行美化:添加小圈，添加一个虚假元素并且居中 */
.cr-container label:before{
	content:'';
	width: 34px;
	height: 34px;
	background:rgba(130,195,217,0.9);
	position:absolute;
	left:50%;
	margin-left:-17px;
	border-radius:50%;
	box-shadow:0px 0px 0px 4px rgba(255,255,255,0.3);
	z-index:-1;
}
/* 为label创建，另一个虚假元素并且扩展到整个面板。使用渐变直线向上淡出 */
.cr-container label:after{
	width: 1px;
	height:400px;
	content:'';
	background: -moz-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
	background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(255,255,255,0)),color-stop(100%,rgba(255,255,255,1)));
	background: -webkit-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
	background: -o-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
	background: -ms-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
	background: linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff',endColorstr='#ffffff',GradientType=0);
	position:absolute;
	bottom:-20px;
	right:0px;
}
/* 面板需要去除那条直线，所以设置宽度为0，同时将input隐藏 */
.container label.cr-label-img-4:after{
	width: 0px;
}
.cr-container input{
	display:none;
}
/* 不管是否单击label，分开的输入都会被checked。现在将使用一个统一的sibling属性选择器来处理分开的label
 因此修改选择的颜色*/
.cr-container label.cr-label-img-4:after{
	width: 0px;
}
.cr-container input.cr-selector-img-1 ~ label.cr-label-img-1,
.cr-container input.cr-selector-img-2 ~ label.cr-label-img-2,
.cr-container input.cr-selector-img-3 ~ label.cr-label-img-3,
.cr-container input.cr-selector-img-4 ~ label.cr-label-img-4{
	color:#68abc2;
}
/* 同时修改背景颜色和box阴影 */
.cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1:before,
.cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2:before,
.cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3:before,
.cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4:before{
	background:#fff;
	box-shadow:0px 0px 0px 4px rgba(104,171,194,0.6);
}
/* 图片面板的容器将会占据所有的宽度并且绝对定位。这个容器将会在稍后使用，为了将图片设置为选择的图片，
 需要这样做来使图片默认可以显示*/
.cr-bgimg{
	width: 600px;
	height:400px;
	position:absolute;
	left:0px;
	top:0px;
	z-index:1;
	background-repeat:no-repeat;
	background-position:0 0;
}
/* 因为有4个面板图片，一个面板将有150px的宽度（600除4）.面板会左漂移，隐藏overflow */
.cr-bgimg div{
	width: 150px;
	height:400px;
	position:absolute;
	float:left;
	overflow:hidden;
	background-repeat:no-repeat;
}
/* 每个显示快都是初始绝对定位，它们将通过left:-150px来被隐藏 */
.cr-bgimg div span{
	position:absolute;
	width:100%;
	height:100%;
	top:0px;
	left:-150px;
	z-index:2;
	text-indent:-9000;
}
/* 接下来是背景图片容器和单独的图片显示块 */
.cr-container input.cr-selector-img-1:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(1){
	background-image:url(./images/1.jpg);
}
.cr-container input.cr-selector-img-2:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(2){
	background-image:url(./images/2.jpg);
}
.cr-container input.cr-selector-img-3:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(3){
	background-image:url(./images/3.jpg);
}
.cr-container input.cr-selector-img-4:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(4){
	background-image:url(./images/4.jpg);
}
/* 需要根据面板来设置图片块到正确位置 */
.cr-bgimg div:nth-child(1) span{
	background-position;0px 0px;
}
.cr-bgimg div:nth-child(2) span{
	background-position;-150px 0px;
}
.cr-bgimg div:nth-child(3) span{
	background-position;-300px 0px;
}
.cr-bgimg div:nth-child(4) span{
	background-position;-450px 0px;
}
/* 当单击label时简单的移动所有内容块到右边 */
.cr-container input:checked ~ .cr-bgimg div span{
	-webkit-animation:slideOut 0.6s ease-in-out;
	-moz-animation:slideOut 0.6s ease-in-out;
	-o-animation:slideOut 0.6s ease-in-out;
	-ms-animation:slideOut 0.6s ease-in-out;
	animation:slideOut 0.6s ease-in-out;
}
@-webkit-keyframes slideOut{
	0%{left:0px;}
	100%{left:150px;}
}
@-moz-keyframes slideOut{
	0%{left:0px;}
	100%{left:150px;}
}
@-o-keyframes slideOut{
	0%{left:0px;}
	100%{left:150px;}
}
@-ms-keyframes slideOut{
	0%{left:0px;}
	100%{left:150px;}
}
@keyframes  slideOut{
	0%{left:0px;}
	100%{left:150px;}
}
/* 所有的块都使用分开的图片，从-150px到0px.最后在浏览器中浏览可以看到效果 */
.cr-container input.cr-selector-img-1:checked ~ .cr-bgimg div span:nth-child(1),
.cr-container input.cr-selector-img-2:checked ~ .cr-bgimg div span:nth-child(2),
.cr-container input.cr-selector-img-3:checked ~ .cr-bgimg div span:nth-child(3),
.cr-container input.cr-selector-img-4:checked ~ .cr-bgimg div span:nth-child(4){
	-webkit-transition:left 0.5s ease-in-out;
	-moz-transition:left 0.5s ease-in-out;
	-o-transition:left 0.5s ease-in-out;
	-ms-transition:left 0.5s ease-in-out;
	transition:left 0.5s ease-in-out;
	-webkit-animation:none;
	-moz-animation:none;
	-o-animation:none;
	-ms-animation:none;
	animation:none;
	left:0px;
	z-index:10;
}

二、效果

 

css3实现幻灯片效果
sunjunyue的博客
11-02 1139
&lt;!DOCTYPE HTML&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; body { width:
css幻灯片样式,纯CSS3全屏响应式幻灯片特效
weixin_29611239的博客
08-03 622
简要教程这是一款简单使用纯CSS3制作的炫酷全屏响应式幻灯片特效。该幻灯片特效使用纯CSS制作，没有任何的js代码。使用方法HTML结构该纯CSS3全屏响应式幻灯片的HTML结构如下：Slide OneSlide TwoSlide ThreeSlide FourHeadline OneHeadline TwoHeadline ThreeHeadline FourCSS样式该纯CSS3全屏响应式幻灯...
[转]CSS3实现图片幻灯片效果
akaka88的专栏
08-12 300
转自　[url=http://site518.net/pure-css3-slider/]给力技术－纯CSS3实现的幻灯片效果[/url] [url=http://site518.net/tag/css3/]CSS3[/url] 增加了许多新特性，以前要用 [url=http://site518.net/tag/javascript-2/]JavaScript[/url] 才能实现的...
用CSS写一个简单的幻灯片效果页面
weixin_34302561的博客
11-29 640
这里是修真院前端小课堂，每篇分享文从 【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】 八个方面深度解析前端知识/技能，本篇分享的是： 【用CSS写一个简单的幻灯片效果页面】 1.背景介绍CSS3属性中有关于制作动画的三个属性：Transform,Transition,Animation。...
37种经典的css3图片切换幻灯片效果
02-11
37种经典的css3图片切换幻灯片效果
纯CSS3实现的图片切换幻灯片代码
04-06
纯CSS3实现的图片切换幻灯片代码是一款没用到JS跟jQuery实现的CSS3幻灯片特效。
纯CSS3图片幻灯片切换效果
06-12
首先真的非常感谢世界上有了CSS3这么个东西，它使得很多网页特效不再需要依赖javascript脚本代码，使得浏览器执行起来更加方便快捷。但有一点我们得注意，因为目前绝大多数浏览器还是比较“旧”的版本，还不支持CSS3...
纯css3实现的图片3D翻转幻灯片效果.zip
11-20
"纯css3实现的图片3D翻转幻灯片效果"这个标题表明我们将探讨一种利用CSS3技术来创建具有3D翻转动画的图片幻灯片展示方式。CSS3是层叠样式表的第三版，它引入了许多新的功能和属性，包括3D转换、过渡和动画，使得网页...
纯CSS3实现的图片轮播幻灯片代码，带有按钮控制功能
04-19
这是一个使用纯CSS3实现的图片轮播幻灯片代码，其中包含按钮控制功能。该代码使用了CSS3的动画效果，使得图片的切换过程更加流畅自然。同时，按钮控制功能也增加了用户的交互性，使得用户可以自由切换图片。 优化后...
html图片幻灯片效果,使用CSS3实现的超酷幻灯图片效果
weixin_29215969的博客
06-05 583
这个教程将介绍如何使用纯CSS创建一个干净的幻灯图片面板。主要想法是在面板中使用背景图片，然后在点击标签后使之动画。HTML主要包括了3个主要部分：radio按钮和标签，容器，及其标题，如下：1234Slice 1 - Image 1Slice 1 - Image 2Slice 1 - Image 3Slice 1 - Image 4Slice 2 - Image 1Slice 2 - Image...
css3实现幻灯片切换.zip
07-05
css3实现幻灯片切换
纯CSS3实现图片幻灯片切换效果
03-29
首先非常感谢网友懒人的无私分享，此作品是用纯CSS3实现的，一般的图片幻灯片切换效果都是采用了js脚本实现，就连HTML5技术也不例外，相信很多前端的网友也不敢相信只用纯样式代码而不写上一行js脚本代码就实现了幻灯效果，我只能说信不信由你，反正我信了，当然网友们看了作品之后也自然的会相信，大家请使用谷歌、火狐等支持CSS3样式的主流浏览器，不然的话你永远也不会相信的哦。。。 作品包括以下功能： 1、图片切换 2、弹出提示信息 3、进度条显示 原文：http://www.jq-school.com/Detail.aspx?id=172
纯css实现的幻灯片效果_如何创建纯CSS3幻灯片
cuken7684698822的博客
08-01 489
纯css实现的幻灯片效果How to Create a Pure CSS3 Slideshow Today we will develop cool css3 slideshow (without any javascript). Slideshow will contain left and right navigation buttons, images, and tracker bar. W...
CSS3 幻灯片
ee_Andy的博客
09-12 353
http-equiv="Content-Type" content="text/html; charset=utf-8">无标题文档 id="css">body,ul,ol{margin:0;padding:0;}li{ list-style:none;}.wrap{width:800px;margin:100px auto 0;}#picList{width:800px;height:360px
CSS3-幻灯片
南乡人的博客
12-27 236
利用绝对定位和交错动画实现镜头拉伸背景效果 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /&g...
幻灯片（基于CSS3动画animation）
chen__cheng的博客
05-15 349
效果预览： 实现思路： 类似于：h5+css3+js之移动端轮播图 将存放所有图片的容易按照一定的时间在X轴进行移动，但是此处使用的是纯CSS实现，利用动画animation定义每一帧的动画，在每一帧的动画中沿着X轴进行移动 实现代码： html: <main> <section> <div> <img src="/images/1.jpg" alt="">
用css3制作幻灯片效果
weixin_44541250的博客
03-30 663
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 开发工具与关键技术：DW css3 作者：张海锋 撰写时间：2019/2/20 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 利用css...
css3动画实现最简单的幻灯片效果
不想起床
05-31 616
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>css3 实现幻灯片效果</title> <style type="text/css"> .slide { ...
css背景图片全屏_使用CSS3的全屏背景图片幻灯片
culiao9310的博客
09-29 657
css背景图片全屏View demo 查看演示Download Source 下载源Happy new year, everybody! Today we will create a CSS-only fullscreen background image slideshow. We’ll create different image transitions...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值