使用CSS3实现百叶窗焦点图动画实例代码

高洛峰

发布时间：2017-03-20 15:56:59

2038人浏览过

来源于php中文网

原创

这是一款基于CSS3的百叶窗焦点图动画，一共有4种不同的百叶窗动画风格，每一个都看似非常简单，但是却又相当实用。更值得注意的是插件提供了4种不同的百叶窗特效，有水平百叶窗、垂直百叶窗和淡入淡出百叶窗等。并且，该CSS3百叶窗图片切换插件切换时非常平滑，效果很不错。

使用css3实现百叶窗焦点图动画实例代码

在线演示源码下载

我们列出了其中一种百叶窗风格的源代码，其他的大家可以下载源文件进行查看。

Video Summarization

一款可以自动将长视频制作成短片的桌面软件

下载

HTML代码

				
	
	1

	
	2

	
	3

	
	4

		
	
		

			Slice 1 - Image 1
			Slice 1 - Image 2
			Slice 1 - Image 3
			Slice 1 - Image 4
		
		
			Slice 2 - Image 1
			Slice 2 - Image 2
			Slice 2 - Image 3
			Slice 2 - Image 4
		
		
			Slice 3 - Image 1
			Slice 3 - Image 2
			Slice 3 - Image 3
			Slice 3 - Image 4
		
		
			Slice 4 - Image 1
			Slice 4 - Image 2
			Slice 4 - Image 3
			Slice 4 - Image 4
		
	
	
		
SerendipityWhat you've been dreaming of
		AdventureWhere the fun begins
		NatureUnforgettable eperiences
		SerenityWhen silence touches nature

CSS代码：

.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);
}
.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;
}
.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;
}
.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;
}
.cr-container label.cr-label-img-4:after{
	width: 0px;
}
.cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1,
.cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2,
.cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3,
.cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4{
	color: #68abc2;
}
.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-container input{
	display: none;
}
.cr-bgimg{
	width: 600px;
	height: 400px;
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: 1;
}
.cr-bgimg{
	background-repeat: no-repeat;
	background-position: 0 0;
}
.cr-bgimg p{
	width: 150px;
	height: 100%;
	position: relative;
	float: left;
	overflow: hidden;
	background-repeat: no-repeat;
}
.cr-bgimg p span{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: -150px;
	z-index: 2;
	text-indent: -9000px;
}
.cr-container input.cr-selector-img-1:checked ~ .cr-bgimg,
.cr-bgimg p span:nth-child(1){
	background-image: url(../images/1.jpg);
}
.cr-container input.cr-selector-img-2:checked ~ .cr-bgimg,
.cr-bgimg p span:nth-child(2){
	background-image: url(../images/2.jpg);
}
.cr-container input.cr-selector-img-3:checked ~ .cr-bgimg,
.cr-bgimg p span:nth-child(3){
	background-image: url(../images/3.jpg);
}
.cr-container input.cr-selector-img-4:checked ~ .cr-bgimg,
.cr-bgimg p span:nth-child(4){
	background-image: url(../images/4.jpg);
}
.cr-bgimg p:nth-child(1) span{
	background-position: 0px 0px;
}
.cr-bgimg p:nth-child(2) span{
	background-position: -150px 0px;
}
.cr-bgimg p:nth-child(3) span{
	background-position: -300px 0px;
}
.cr-bgimg p:nth-child(4) span{
	background-position: -450px 0px;
}

.cr-container input:checked ~ .cr-bgimg p 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; }
}
.cr-container input.cr-selector-img-1:checked ~ .cr-bgimg p span:nth-child(1),
.cr-container input.cr-selector-img-2:checked ~ .cr-bgimg p span:nth-child(2),
.cr-container input.cr-selector-img-3:checked ~ .cr-bgimg p span:nth-child(3),
.cr-container input.cr-selector-img-4:checked ~ .cr-bgimg p 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;
}
.cr-titles h3{
	position: absolute;
	width: 100%;
	text-align: center;
	top: 50%;
	z-index: 10000;
	opacity: 0;
	color: #fff;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
	-webkit-transition: opacity 0.8s ease-in-out;
	-moz-transition: opacity 0.8s ease-in-out;
	-o-transition: opacity 0.8s ease-in-out;
	-ms-transition: opacity 0.8s ease-in-out;
	transition: opacity 0.8s ease-in-out;
}
.cr-titles h3 span:nth-child(1){
	font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
	font-size: 70px;
	display: block;
	letter-spacing: 7px;
}
.cr-titles h3 span:nth-child(2){
	letter-spacing: 0px;
	display: block;
	background: rgba(104,171,194,0.9);
	font-size: 14px;
	padding: 10px;
	font-style: italic;
	font-family: Cambria, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
}
.cr-container input.cr-selector-img-1:checked ~ .cr-titles h3:nth-child(1),
.cr-container input.cr-selector-img-2:checked ~ .cr-titles h3:nth-child(2),
.cr-container input.cr-selector-img-3:checked ~ .cr-titles h3:nth-child(3),
.cr-container input.cr-selector-img-4:checked ~ .cr-titles h3:nth-child(4){
	opacity: 1;
}
/* Media Query: Let's show the inputs on mobile sized browsers because they probably don't support the label trick: */
@media screen and (max-width: 768px) {
	.cr-container input{
		display: inline;
		width: 24%;
		margin-top: 350px;
		z-index: 1000;
		position: relative;
	}
	.cr-container label{
		display: none;
	}

css背景重复background-repeat控制技巧

如何使用CSS实现Flex容器布局_Flex容器属性详解与实战

css工具Animate.css实现动画效果

css引入方式与浏览器兼容性问题

css选择器对不同浏览器的兼容性问题

相关专题

Python 自然语言处理（NLP）基础与实战

本专题系统讲解 Python 在自然语言处理（NLP）领域的基础方法与实战应用，涵盖文本预处理（分词、去停用词）、词性标注、命名实体识别、关键词提取、情感分析，以及常用 NLP 库（NLTK、spaCy）的核心用法。通过真实文本案例，帮助学习者掌握使用 Python 进行文本分析与语言数据处理的完整流程，适用于内容分析、舆情监测与智能文本应用场景。

2026.01.27

拼多多赚钱的5种方法拼多多赚钱的5种方法

在拼多多上赚钱主要可以通过无货源模式一件代发、精细化运营特色店铺、参与官方高流量活动、利用拼团机制社交裂变，以及成为多多进宝推广员这5种方法实现。核心策略在于通过低成本、高效率的供应链管理与营销，利用平台社交电商红利实现盈利。

109

2026.01.26

edge浏览器怎样设置主页 edge浏览器自定义设置教程

在Edge浏览器中设置主页，请依次点击右上角“...”图标 > 设置 > 开始、主页和新建标签页。在“Microsoft Edge 启动时”选择“打开以下页面”，点击“添加新页面”并输入网址。若要使用主页按钮，需在“外观”设置中开启“显示主页按钮”并设定网址。

2026.01.26

苹果官方查询网站苹果手机正品激活查询入口

苹果官方查询网站主要通过 checkcoverage.apple.com/cn/zh/ 进行，可用于查询序列号（SN）对应的保修状态、激活日期及技术支持服务。此外，查找丢失设备请使用 iCloud.com/find，购买信息与物流可访问 Apple (中国大陆) 订单状态页面。

136

2026.01.26

npd人格什么意思 npd人格有什么特征

NPD（Narcissistic Personality Disorder）即自恋型人格障碍，是一种心理健康问题，特点是极度夸大自我重要性、需要过度赞美与关注，同时极度缺乏共情能力，背后常掩藏着低自尊和不安全感，影响人际关系、工作和生活，通常在青少年时期开始显现，需由专业人士诊断。

2026.01.26

windows安全中心怎么关闭 windows安全中心怎么执行操作

关闭Windows安全中心（Windows Defender）可通过系统设置暂时关闭，或使用组策略/注册表永久关闭。最简单的方法是：进入设置 > 隐私和安全性 > Windows安全中心 > 病毒和威胁防护 > 管理设置，将实时保护等选项关闭。

2026.01.26

2026年春运抢票攻略大全春运抢票攻略教你三招手【技巧】

铁路12306提供起售时间查询、起售提醒、购票预填、候补购票及误购限时免费退票五项服务，并强调官方渠道唯一性与信息安全。

122

2026.01.26

个人所得税税率表2026 个人所得税率最新税率表

以工资薪金所得为例，应纳税额 = 应纳税所得额 × 税率 - 速算扣除数。应纳税所得额 = 月度收入 - 5000 元 - 专项扣除 - 专项附加扣除 - 依法确定的其他扣除。假设某员工月工资 10000 元，专项扣除 1000 元，专项附加扣除 2000 元，当月应纳税所得额为 10000 - 5000 - 1000 - 2000 = 2000 元，对应税率为 3%，速算扣除数为 0，则当月应纳税额为 2000×3% = 60 元。

2026.01.26