`
jsctrlc
  • 浏览: 9800 次
  • 性别: Icon_minigender_1
  • 来自: 上海
最近访客 更多访客>>
社区版块
存档分类
最新评论

纯CSS3实现超酷幻灯片图文切换效果

阅读更多

纯CSS3实现绚丽焦点图切换效果,这是一款纯CSS3实现的焦点图插件,焦点图设计十分清新简单,图片滑动特别流畅,是一款值得一用的CSS3焦点图。切换点通过表单radio来实现,通过radio的checked判断图片的切换位置。

当然要使用这个css3特效的话只能在支持CSS3的环境下才行,像IE9以下的那些就不要用了。

判断radio的checked的css3样式如下

 

input[type="radio"]:checked + label:before {}
input[type="radio"]:checked ~ figure img {
  z-index:2;
  -webkit-transform:translatex(0px);
  -moz-transform:translatex(0px);
  -ms-transform:translatex(0px);
  -o-transform:translatex(0px);
  transform:translatex(0px);
  -webkit-transition:all .15s, z-index 0s;
  -moz-transition:all .15s, z-index 0s;
  -o-transition:all .15s, z-index 0s;
  transition:all .15s, z-index 0s;
}
input[type="radio"]:checked ~ figure[class*="entypo-"]:before {
  z-index:3;
  color:rgba(255,255,255,0.5);
  -webkit-transition:color .5s;
  -moz-transition:color .5s;
  -o-transition:color .5s;
  transition:color .5s;
}
input[type="radio"]:checked ~ figure figcaption {
  z-index:8;
  -webkit-transform:translateX(0px);
  -moz-transform:translateX(0px);
  -ms-transform:translateX(0px);
  -o-transform:translateX(0px);
  transform:translateX(0px);
  -webkit-transition:all .35s, .7s;
  -moz-transition:all .35s, .7s;
  -o-transition:all .35s, .7s;
  transition:all .35s, .7s;
}

body内图文格式

 

 

<li>
				<input type="radio" name="btn" value="one" checked="checked" />
				<label for="btn"></label>
				<figure>
					<img src="images/1.jpg" />
					<figcaption>
						<h4>Fabio Basile</h4>
						<nav role='navigation'>
							<p>iPhone 6 Infinity</p>
							<ul>
								<li><a href="#" class="entypo-dribbble"></a></li>
								<li><a href="#" class="entypo-twitter"></a></li>
							</ul>
						</nav>  
					</figcaption>
				</figure>
			</li>

主要使用了css3中的transition、box-shadow、transform样式来实现动画的效果。

css3图片特效

 

分享到:
评论

相关推荐

    纯CSS3实现超酷幻灯片切换.zip

    "纯CSS3实现超酷幻灯片切换"的项目就是一个很好的示例,它利用了HTML5、jQuery、前端JavaScript以及CSS技术来创建一个无需依赖任何JavaScript库的动态幻灯片组件。下面将详细解析这个项目的知识点。 首先,我们来看...

    纯CSS3实现超酷手机产品幻灯片切换特效

    本教程将深入探讨如何使用纯CSS3技术来创建一款适用于手机产品的超酷幻灯片切换特效,这种特效可以无缝地左右融合,为电子产品展示提供吸引人的banner切换体验。 首先,我们需要了解CSS3中的关键帧动画(Keyframe ...

    纯css实现图片相册幻灯片切换

    闲来无事,今天特意写了一个不用js即可实现的简单的幻灯片切换效果 注意,不需要js,纯css即可实现的效果 使用方法: 1、将附件中的css样式以及html复制到你的网页中即可 方法简单易用

    纯CSS3实现超酷幻灯片切换

    纯CSS3实现超酷幻灯片切换是一种现代网页设计中的常见技术,它允许开发者在不依赖...通过研究和理解这个实例,你可以掌握纯CSS3实现幻灯片切换的全过程,并将此技能应用到自己的项目中,为用户带来更优的交互体验。

    纯CSS实现的卡片切换效果.rar

    纯CSS实现的卡片切换效果.rar 纯CSS实现的卡片切换效果.rar 纯CSS实现的卡片切换效果.rar 纯CSS实现的卡片切换效果.rar 纯CSS实现的卡片切换效果.rar 纯CSS实现的卡片切换效果.rar 纯CSS实现的卡片切换效果.rar 纯...

    纯CSS3实现超酷幻灯片切换特效代码

    本文将深入探讨如何利用纯CSS3实现超酷的幻灯片切换特效,无需依赖jQuery或其他JavaScript库,从而提高网页加载速度并优化用户体验。 首先,CSS3中的关键帧动画(@keyframes)是实现幻灯片切换的核心技术。通过定义...

    纯css3实现图片幻灯片切换特效源码(无jq+js).zip

    【标题】"纯css3实现图片幻灯片切换特效源码(无jq+js).zip"涉及的关键技术点是CSS3以及前端动态效果的实现,尤其是无JavaScript(jq)依赖的场景。在现代Web开发中,CSS3已经成为构建美观、交互丰富的用户界面的重要...

    纯CSS3实现的图片切换幻灯片代码.zip

    本资源“纯CSS3实现的图片切换幻灯片代码.zip”提供了一个无需JavaScript或jQuery的纯CSS3实现的图片切换幻灯片效果。这种技术在网页设计中非常常见,因为它可以为用户提供一种动态、吸引人的方式来展示多张图片,如...

    纯CSS3全屏响应式幻灯片特效.zip

    纯CSS3全屏响应式幻灯片特效是一种利用现代浏览器对CSS3特性的支持,创建出能在各种设备上自适应屏幕大小并具有平滑过渡效果的幻灯片展示方式。这种特效无需JavaScript,完全依赖CSS3来实现动态切换、动画效果和响应...

    纯css3实现的tab标签切换效果

    在本文中,我们将深入探讨如何使用纯CSS3实现Tab标签切换效果。Tab切换是一种常见的用户界面设计模式,它允许用户在多个视图或内容区域之间切换,而无需刷新整个页面。这种效果通常用于展示有限数量的相关信息,如...

    纯CSS3实现的图片轮播幻灯片代码,带有按钮控制功能

    这是一个使用纯CSS3实现的图片轮播幻灯片代码,其中包含按钮控制功能。该代码使用了CSS3的动画效果,使得图片的切换过程更加流畅自然。同时,按钮控制功能也增加了用户的交互性,使得用户可以自由切换图片。 优化后...

    H5+CSS3幻灯片图片切换代码.rar

    H5+CSS3幻灯片图片切换代码.rar H5+CSS3幻灯片图片切换代码.rar H5+CSS3幻灯片图片切换代码.rar H5+CSS3幻灯片图片切换代码.rar H5+CSS3幻灯片图片切换代码.rar H5+CSS3幻灯片图片切换代码.rar H5+CSS3幻灯片图片...

    纯css3图片幻灯片切换效果(无js实现).zip

    【标题】"纯css3图片幻灯片切换效果(无js实现)" 描述了这个压缩包文件的内容,它提供了一种完全依赖CSS3技术来实现的图片幻灯片切换效果,无需JavaScript的参与。在现代网页设计中,CSS3已经成为了一个强大的工具,...

    37种经典的css3图片切换幻灯片效果

    其中,"37种经典的css3图片切换幻灯片效果"集合了各种创新和实用的技巧,用于实现吸引用户注意力的图像展示方式。 一、CSS3过渡(Transitions) CSS3的过渡效果允许我们在两个或多个样式之间平滑地过渡,这是创建...

    jquery+css3实现WIN 8风格幻灯片平面切换效果.zip

    标题中的“jquery+css3实现WIN 8风格幻灯片平面切换效果”表明这是一个使用JavaScript库jQuery和CSS3技术创建的网页动态效果,具体来说,是模仿了Windows 8操作系统的界面风格,提供了平滑的幻灯片切换体验。...

    纯CSS3实现幻灯片焦点图特效源码 v1.0.zip

    【标题】"纯CSS3实现幻灯片焦点图特效源码 v1.0.zip" 提供了一种无需JavaScript,仅依赖CSS3技术来创建动态幻灯片焦点图的方法。CSS3是层叠样式表(Cascading Style Sheets)的第三个版本,引入了许多新的功能和属性...

    css3实现幻灯片切换.zip

    总的来说,"css3实现幻灯片切换"是一个结合了CSS3动画、过渡、布局以及JavaScript事件处理的综合应用案例,展示了CSS3在增强网页动态效果方面的强大能力。通过熟练掌握这些技术,开发者能够创建出更具吸引力和用户...

Global site tag (gtag.js) - Google Analytics