<!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. css3新增的属性有哪些

    徐先森讲web CSS3新增的属性有哪些: CSS 用于控制网页的样式和布局. CSS3 是最新的 CSS 标准. CSS3新增了很多的属性,下面一起来分析一下新增的一些属性: 1.CSS3边框: b ...

  3. Js实现图片点击切换与轮播

    Js实现图片点击切换与轮播 图片点击切换 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...

  4. CSS3新增的属性有哪些:

    CSS 用于控制网页的样式和布局. CSS3 是最新的 CSS 标准. CSS3新增了很多的属性,下面一起来分析一下新增的一些属性: 1.CSS3边框: border-radius:CSS3圆角边框. ...

  5. css3新增的属性 - 分享

    CSS3新增属性   一.transform变换效果 CSS3 提供了元素变形效果,也叫做变换.它可以将元素实现旋转.缩放和平移的功能. 属性有两个:transform 和 transform-ori ...

  6. Css3新增背景属性

    1.background-origin 背景的起始位置 background-origin: border-box || padding-box || content-box; 案例初始化: 代码: ...

  7. JS框架_(JQuery.js)图片相册掀开切换效果

    百度云盘 传送门 密码:y0dk 图片掀开切换效果: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo ...

  8. Flexslider图片轮播、文字图片相结合滑动切换效果

    Flexslider是一款基于的jQuery内容滚动插件.它能让你轻松的创建内容滚动的效果,具有非常高的可定制性.开发者可以使用Flexslider轻松创建各种图片轮播效果.焦点图效果.图文混排滚动效 ...

  9. CSS3新增基础属性总结——20160409(易达客)

    1.box-shadow :h-shadow v-shadow blur spread color inset(outset) h-shadow:必须:水平阴影位置,允许负值. v-shadow:必须 ...

随机推荐

  1. 网页标题title的闪动提示

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

  2. Mysql按时间段分组查询

    Mysql按时间段分组查询来统计会员的个数,mysql个数 Mysql按时间段分组查询来统计会员的个数,mysql个数 1.使用case when方法(不建议使用)- 代码如下 复制代码SELECT ...

  3. 【Android Developers Training】 30. 允许其它应用启动你的Activity

    注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...

  4. touchmover手机移动端的拖动

    <!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name= ...

  5. 精通 JS正则表达式(转)

    转载的目的在于:增加一些自己看不懂的解释.内容只加不改,灰色字体是自己寻找并增加的. 正则表达式可以: •测试字符串的某个模式.例如,可以对一个输入字符串进行测试,看在该字符串是否存在一个电话号码模式 ...

  6. python - bilibili(四)抓包数据乱码

    上一篇文章中不知道大家发现端倪木有,两张照片对比很明显发现第一张是信息很明显的,第二张是乱码的. 为什么会出现这种情况?细心的童鞋可能发现是我们发送给服务器的请求连接的数据不同: 第一张图的信息是{& ...

  7. ps命令学习笔记

    最近在看linux优化大师这本书,第2章祥细讲解了分析系统用的工具,这里把一些内容整理出来,以便加深印像. 当进行系统分析时,ps命令显示有关选择的活跃进程的信息.ps命令提供当前已存在的进程列表,和 ...

  8. 交叉编译 tesseract

      官方参考资料说明: tesseract 依赖库: (https://github.com/tesseract-ocr/tesseract/wiki/Compiling#linux) leptoni ...

  9. visual studio高效率插件及快捷键

    visual studio从2010开始支持插件安装(工具->扩展管理器),这里推荐几个插件,可以极大的提升开发效率: Visual Assist X(VAssistX) VAssistX是wh ...

  10. 处理文本,提取数据的脚本-主要就是用sed

    处理文本,提取数据的脚本 #! /bin/sh | sed 's/)<\/small><\/td><td>/\n/g' # 用换行符替换 # 删除带有分号的行 # ...