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

最新推荐文章于 2023-09-28 10:59:22 发布
最新推荐文章于 2023-09-28 10:59:22 发布
阅读量552 收藏 2
点赞数
分类专栏： css Html 文章标签： CSS3 幻灯图片 动画效果 选择器 伪元素
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51049931/article/details/121548242
版权
Html 同时被 2 个专栏收录
8 篇文章 4 订阅
订阅专栏
css
1 篇文章 0 订阅
订阅专栏

一、代码

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;
}

二、效果

 

两条咸鱼儿
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用CSS3实现图片切换效果
HOUJIEHOU的博客
03-06 8763
当几个页面的整体布局相同，只有某个部分在各页面不同时，可以将整体布局的CSS样式写在同一个.css文件中。本次的CSS实现图片s是每个页面下的图片切换效果不同，除此之外，其他的效果都一样。因此，我们可以创建一个common.css文件设置整体界面的样式。 一、圆形超链接 创建四个超链接a标签，分别为Page1、Page2、Page3、Page4。设置displa...
使用CSS3做一个飘动的照片效果
寻码启示
05-27 1693
用css3制作类似婚纱电子相册中的照片飘动效果
web前端 运用CSS动画 实现图像的幻灯片 自动播放 切换效果
weixin_44790790的博客
05-10 3421
先看一下浏览器运行结果： 一、 最初用”background-image”背景图片属性定义动画，结果幻灯片切换时没有上下滑动的效果。 仅用到HTML和CSS，未用javascript。 二、代码： HTML: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesh
css自学框架之幻灯片展示效果
最新发布
zhaoyang314的博客
09-28 468
这一节，我自学了焦点图效果。焦点图片自动播放，圆点控制切换。鼠标滑动到焦点图片上，停止自动播放功能；划出焦点图片，自动播放功能继续。简单使用的图片展示功能。
css幻灯片样式,纯CSS3全屏响应式幻灯片特效
weixin_29611239的博客
08-03 555
简要教程这是一款简单使用纯CSS3制作的炫酷全屏响应式幻灯片特效。该幻灯片特效使用纯CSS制作，没有任何的js代码。使用方法HTML结构该纯CSS3全屏响应式幻灯片的HTML结构如下：Slide OneSlide TwoSlide ThreeSlide FourHeadline OneHeadline TwoHeadline ThreeHeadline FourCSS样式该纯CSS3全屏响应式幻灯...
纯css实现的幻灯片效果_如何创建纯CSS3幻灯片
cuken7684698822的博客
08-01 432
纯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实现的图片切换幻灯片代码
04-06
纯CSS3实现的图片切换幻灯片代码是一款没用到JS跟jQuery实现的CSS3幻灯片特效。
css3图片放大缩小切换幻灯片效果
06-12
在本文中，我们将深入探讨如何使用CSS3和JavaScript来创建一个图片放大缩小切换的幻灯片效果。这种效果能够提供一种动态且流畅的用户体验，尤其适用于网站中的展示区域或者产品介绍部分。在火狐浏览器中，它还能实现...
纯CSS3实现超酷幻灯片切换
04-06
纯CSS3实现超酷幻灯片切换是一种现代网页设计中的常见技术，它允许开发者在不依赖...通过研究和理解这个实例，你可以掌握纯CSS3实现幻灯片切换的全过程，并将此技能应用到自己的项目中，为用户带来更优的交互体验。
37种经典的css3图片切换幻灯片效果
02-11
37种经典的css3图片切换幻灯片效果
纯css实现图片相册幻灯片切换
06-12
闲来无事，今天特意写了一个不用js即可实现的简单的幻灯片切换效果 注意，不需要js，纯css即可实现的效果 使用方法： 1、将附件中的css样式以及html复制到你的网页中即可 方法简单易用
纯CSS3实现图片幻灯片切换效果
03-29
首先非常感谢网友懒人的无私分享，此作品是用纯CSS3实现的，一般的图片幻灯片切换效果都是采用了js脚本实现，就连HTML5技术也不例外，相信很多前端的网友也不敢相信只用纯样式代码而不写上一行js脚本代码就实现了幻灯效果，我只能说信不信由你，反正我信了，当然网友们看了作品之后也自然的会相信，大家请使用谷歌、火狐等支持CSS3样式的主流浏览器，不然的话你永远也不会相信的哦。。。 作品包括以下功能： 1、图片切换 2、弹出提示信息 3、进度条显示 原文：http://www.jq-school.com/Detail.aspx?id=172
纯CSS3图片幻灯片切换效果
06-12
首先真的非常感谢世界上有了CSS3这么个东西，它使得很多网页特效不再需要依赖javascript脚本代码，使得浏览器执行起来更加方便快捷。但有一点我们得注意，因为目前绝大多数浏览器还是比较“旧”的版本，还不支持CSS3...
css3实现幻灯片切换
04-02
本主题聚焦于“CSS3实现幻灯片切换”，它是一种利用CSS3新特性来创建无JavaScript依赖的图片轮播功能。下面我们将深入探讨如何通过CSS3实现这一效果，并涉及相关的关键知识点。 首先，CSS3的`transition`和`...
css图片幻灯片效果_使用JS和CSS创建简单的全屏图片库幻灯片
cungui5726的博客
08-21 197
css图片幻灯片效果Right now my 2nd year students are working on an interactive map for another class. Inevitably, they want to feature some ambitious code in their projects, including a fullscreen web image g...
HTML+CSS+JS实现 ❤️HTML5图片幻灯片轮播切换❤️
java李阳勇的博客
09-07 2022
效果演示： 代码目录： 主要代码实现： HTML代码 : <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>图像画廊主题——Jssor滑块,旋转木马</titl...
Webppt开源在线演示文稿PPT（幻灯片）
girg520的博客
03-20 1633
一个基于 h5 + css3 + JavaScript 的开源在线演示文稿（幻灯片）框架，可以帮助用户使用web浏览器搭建一个漂亮的网页版PPT。
用CSS写一个简单的幻灯片效果页面
php_martin的博客
07-18 328
用CSS写一个简单的幻灯片效果页面
CSS实现幻灯片效果
tao_meng_的博客
01-31 1375
使用css代码实现一个简单又粗糙的幻灯片效果 话不多说，直接上我粗糙的代码了！ 1.通过position定位+animation动画实现 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>css3 实现幻灯片效果</title> <style type="text/css"> * {
css 实现 幻灯图 图片加切割效果
05-31
要实现幻灯图图片加切割效果，可以使用CSS3的transform属性和clip-path属性。我们可以将图片设置为绝对定位，并使用transform属性和clip-path属性来实现切割和动画效果。 以下是一个使用transform和clip-path属性实现幻灯图图片加切割效果的示例代码： ```html <div class="slider"> <div class="slide slide1"></div> <div class="slide slide2"></div> <div class="slide slide3"></div> </div> ``` ```css .slider { position: relative; width: 800px; height: 400px; overflow: hidden; } .slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center center; background-repeat: no-repeat; clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); transform-origin: left; animation: slide 12s ease-in-out infinite; } .slide1 { background-image: url('slide1.jpg'); } .slide2 { background-image: url('slide2.jpg'); } .slide3 { background-image: url('slide3.jpg'); } @keyframes slide { 0% { transform: scaleX(0); clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); } 16.67% { transform: scaleX(1); clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); } 33.33% { transform: scaleX(1); clip-path: polygon(0 0, 75% 0, 100% 100%, 0% 100%); } 50% { transform: scaleX(1); clip-path: polygon(0 0, 100% 0, 100% 100%, 25% 100%); } 66.67% { transform: scaleX(1); clip-path: polygon(25% 0, 100% 0, 100% 100%, 0% 100%); } 83.33% { transform: scaleX(1); clip-path: polygon(0 0, 100% 0, 100% 75%, 0% 100%); } 100% { transform: scaleX(0); clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); } } ``` 上述代码中，我们创建了一个幻灯图容器，并在其中添加了三个幻灯片元素。我们使用clip-path属性将每个幻灯片裁剪成不同的形状，并使用动画将它们进行幻灯片切换。 clip-path属性的参数是一个形状，可以使用polygon()函数来定义多边形形状。函数的参数是多边形的各个点的坐标，以顺时针顺序定义。 我们还使用了transform属性来实现幻灯片的切换效果。transform属性可以用来对元素进行变换，其中transform-origin属性用来设置变换的中心点。在本例中，我们将变换的中心点设置为左侧边缘。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值