<!doctype html>

<html lang="en">

	<head>

		<meta charset="UTF-8">

		<meta name="Keywords" content="关键词">

		<meta name="Description" content="描述">

		<title>CSS3新增文本属性</title>

		<style>

		body{

			background:#ccc;

		}

		#wrap{

			width:640px;

			margin:100px auto;

			box-shadow:0 10px 5px rgba(0,0,0,.7);

			position:relative;

			padding-top:320px;

		}

		#wrap>img{

			position:absolute;left:0px;top:0px;

			transition:all 1s;

		}

		img{

			display:block;

		}

		input{

			display:none;

		}

		label{

			border:10px solid #aaa;

			margin:20px 3px;

			float:left;

			opacity:.5;

			transition:all 1s;

		}

		input:checked + label{

			border:10px solid #fff;

			opacity:1;

		}

		input ~ img{

			opacity:0;

			transform:scale(1.1);

		}

		input:checked + label + img{

			opacity:1;

			transform:scale(1);

		}

		</style>

	</head>

	<body>

		<div id="wrap">

			<input type="radio" name="checked" id="id1" checked >

			<label for="id1">

				<img src="data:images/1.jpg" width="100">

			</label>

			<img src="data:images/1.jpg" width="640" height="320">

			<input type="radio" name="checked" id="id2">

			<label for="id2">

				<img src="data:images/2.jpg" width="100">

			</label>

			<img src="data:images/2.jpg" width="640" height="320">

			<input type="radio" name="checked" id="id3" >

			<label for="id3">

				<img src="data:images/3.jpg" width="100">

			</label>

			<img src="data:images/3.jpg" width="640" height="320">

			<input type="radio" name="checked" id="id4" >

			<label for="id4">

				<img src="data:images/4.jpg" width="100">

			</label>

			<img src="data:images/4.jpg" width="640" height="320">

			<input type="radio" name="checked" id="id5" >

			<label for="id5">

				<img src="data:images/5.jpg" width="100">

			</label>

			<img src="data:images/5.jpg" width="640" height="320">

		</div>

	</body>

</html>





　　
												


											
CSS3新增文本属性实现图片点击切换效果的更多相关文章
	

    
								
  1. css3新增文本属性
		
    css3新增属性 边框属性 背景属性 文本属性 颜色属性 文本属性 属性 说明 text-shadow 为文字添加阴影 box-shadow 在元素的框架上添加阴影效果 text-overflow 确 ...
    
		
    2. 
						
  2. css3新增的属性有哪些
		
    徐先森讲web CSS3新增的属性有哪些: CSS 用于控制网页的样式和布局. CSS3 是最新的 CSS 标准. CSS3新增了很多的属性,下面一起来分析一下新增的一些属性: 1.CSS3边框: b ...
    
		
    3. 
						
  3. Js实现图片点击切换与轮播
		
    Js实现图片点击切换与轮播 图片点击切换 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...
    
		
    4. 
						
  4. CSS3新增的属性有哪些：
		
    CSS 用于控制网页的样式和布局. CSS3 是最新的 CSS 标准. CSS3新增了很多的属性,下面一起来分析一下新增的一些属性: 1.CSS3边框: border-radius:CSS3圆角边框. ...
    
		
    5. 
						
  5. css3新增的属性 - 分享
		
    CSS3新增属性   一.transform变换效果 CSS3 提供了元素变形效果,也叫做变换.它可以将元素实现旋转.缩放和平移的功能. 属性有两个:transform 和 transform-ori ...
    
		
    6. 
						
  6. Css3新增背景属性
		
    1.background-origin 背景的起始位置 background-origin: border-box || padding-box || content-box; 案例初始化: 代码:  ...
    
		
    7. 
						
  7. JS框架_(JQuery.js)图片相册掀开切换效果
		
    百度云盘 传送门 密码:y0dk 图片掀开切换效果: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo ...
    
		
    8. 
						
  8. Flexslider图片轮播、文字图片相结合滑动切换效果
		
    Flexslider是一款基于的jQuery内容滚动插件.它能让你轻松的创建内容滚动的效果,具有非常高的可定制性.开发者可以使用Flexslider轻松创建各种图片轮播效果.焦点图效果.图文混排滚动效 ...
    
		
    9. 
						
  9. CSS3新增基础属性总结——20160409（易达客）
		
    1.box-shadow :h-shadow v-shadow blur spread color inset(outset) h-shadow:必须:水平阴影位置,允许负值. v-shadow:必须 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. PHP完成一个日历
			
    今天我们就用php中的数组合date 做一个日历. 先让我们回顾一下PHP里面的date . 1.时间戳:表示从计算机元年/UNIX纪年(0时区 1970/1/1 00:00:00)到当前事件的秒数. ...
    
			
    2. 
						
  2. final用法
			
    1.修饰类 如果一个类被定义为final类型,那么该类无法被其他类继承,该类中的所有方法都是final类型的,字段是否是final类型取决于字段自身的定义. 2.修饰方法 一个方法被定义为final类 ...
    
			
    3. 
						
  3. 30岁程序员的选择，一线OR二线？
			
    作为一个30刚出头的IT行业从业者,先介绍下我自己的情况.虽然不具有代表性,但是也可以作为一个参考.本人08年本科毕业于一所还算不错的211大学计算机专业(04年去的时候综合排名38,毕业走时排名45 ...
    
			
    4. 
						
  4. eclipse快捷键 自己使用简单总结
			
    ctrl+shift+O 清理代码引用的多余类 ctrl+shift+R 打开指定文件
    
			
    5. 
						
  5. 关于ZendStudio 10.5的破解 包括mac
			
    一. 下载ZendStudio 10.5 首先下载ZendStudio 10.5 我使用的是mac版 下载地址是: http://downloads.zend.com/studio-eclipse/1 ...
    
			
    6. 
						
  6. 表连接查询（2-n）
			
    一 概述 1 背景 理论上将全部数据放到同一张表中很难实现,实际上即使实现了,表也很庞大,很冗杂,不便于查询与维护,因此将不同的数据存放到不同的表中,需要时连接各表进行查询. 2 执行过程 两张表进行 ...
    
			
    7. 
						
  7. 执行3小时超长SQL的分析优化过程：从索引遇见IS NULL，到最佳实践
			
    月底高峰期,对一个典型项目抽查分析时,发现了一个超级慢.全表扫描的SQL,语句很简单,AWR中赫然在列,在我统计的截止时间内还没有结束... 使用v$active_session_history进一步 ...
    
			
    8. 
						
  8. 【转】SQL多条件模糊查询解决方案-存储过程
			
    前言:   算法的基本特性在前几篇博客中已经做了详细的说明,经过不断的改进优化,到归仓的时候了,也就是说,该算法告一段落,不再更新. 作为最终的解决方案,简要的总结一下算法特性,以方便读者参阅. l  ...
    
			
    9. 
						
  9. 优化js脚本设计，防止浏览器假死
			
    在Web开发的时候经常会遇到浏览器不响应事件进入假死状态,甚至弹出"脚本运行时间过长"的提示框,如果出现这种情况说明你的脚本已经失控了,必须进行优化. 为什么会出现这种情况呢,我们 ...
    
			
    10. 
						
  10. HTML5 服务器推送事件（Server-sent Events）
			
    服务器推送事件(Server-sent Events)WebSocket 协议的一种服务器向客户端发送事件&数据的单向通讯.目前所有主流浏览器均支持服务器发送事件,当然除了 Internet  ...
    
			
    11.