CSS3新增文本属性实现图片点击切换效果
<!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新增文本属性实现图片点击切换效果的更多相关文章
- css3新增文本属性
css3新增属性 边框属性 背景属性 文本属性 颜色属性 文本属性 属性 说明 text-shadow 为文字添加阴影 box-shadow 在元素的框架上添加阴影效果 text-overflow 确 ...
- css3新增的属性有哪些
徐先森讲web CSS3新增的属性有哪些: CSS 用于控制网页的样式和布局. CSS3 是最新的 CSS 标准. CSS3新增了很多的属性,下面一起来分析一下新增的一些属性: 1.CSS3边框: b ...
- Js实现图片点击切换与轮播
Js实现图片点击切换与轮播 图片点击切换 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...
- CSS3新增的属性有哪些：
CSS 用于控制网页的样式和布局. CSS3 是最新的 CSS 标准. CSS3新增了很多的属性,下面一起来分析一下新增的一些属性: 1.CSS3边框: border-radius:CSS3圆角边框. ...
- css3新增的属性 - 分享
CSS3新增属性 一.transform变换效果 CSS3 提供了元素变形效果,也叫做变换.它可以将元素实现旋转.缩放和平移的功能. 属性有两个:transform 和 transform-ori ...
- Css3新增背景属性
1.background-origin 背景的起始位置 background-origin: border-box || padding-box || content-box; 案例初始化: 代码: ...
- JS框架_(JQuery.js)图片相册掀开切换效果
百度云盘 传送门 密码:y0dk 图片掀开切换效果: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo ...
- Flexslider图片轮播、文字图片相结合滑动切换效果
Flexslider是一款基于的jQuery内容滚动插件.它能让你轻松的创建内容滚动的效果,具有非常高的可定制性.开发者可以使用Flexslider轻松创建各种图片轮播效果.焦点图效果.图文混排滚动效 ...
- CSS3新增基础属性总结——20160409（易达客）
1.box-shadow :h-shadow v-shadow blur spread color inset(outset) h-shadow:必须:水平阴影位置,允许负值. v-shadow:必须 ...
随机推荐
- 高考志愿填报：java 软件 程序员 目前的就业现状
大约在17年前,也就是2000年,学计算机专业的学生可以有大部分都进入本专业,并且就业非常容易.哪怕只会office套件,想找个工作也很简单.那时候学计算机就是最热门的行业. 那时候,搞Java的还是 ...
- [leetcode-572-Subtree of Another Tree]
Given two non-empty binary trees s and t, check whether tree t hasexactly the same structure and nod ...
- Cordova(PhoneGap) 环境搭建与基础
Cordova(PhoneGap) 创建步骤:官方Guide 环境准备 安装 Node.js nodejs.org 安装 git git-scm.com (bin目录添加到path) 安装 cordo ...
- Python对象类型及其运算
Python对象类型及其运算 基本要点: 程序中储存的所有数据都是对象(可变对象:值可以修改 不可变对象:值不可修改) 每个对象都有一个身份.一个类型.一个值 例: >>> a1 = ...
- x01.ExcelHelper: NPOI 操作
Excel 操作,具有十分明显的针对性,故很难通用,但这并不妨碍参考后以解决自己的实际问题. 有一汇总表如下: 当然,只是示范,产品的代码应该唯一!现在要根据此汇总表产生各个客户的产品清单.由于客户较 ...
- VIM基础知识整理(附思维导图)
这是当时初学VIM后做的一个思维导图,图片稍大,所以从freemind导出了html文本po在下面:图片在最下方,放大可清晰浏览. VIM 普通模式 普通编辑命令 功能:浏览,普通编辑 x:删除光标所 ...
- Linux之虚拟机网络配置
一般安装完虚拟机后,VMware会为虚拟机在网络连接配置为“NAT模式(N):用于共享主机的IP地址”. 这种模式下虚拟机会共享主机的网络环境,主机可以访问外网那么虚拟机可以,主机可以(哪怕是拨VPN ...
- es6的一些知识点
es6的一些知识点 前言:es6(ECMAscript2015)标准 let.const.var的一些区别 let.const 块级作用域.全局作用域.函数作用域 var 全局作用域.函数作用域 变量 ...
- JavaScript一个cookie存储的类
所有输出都在浏览器的控制台中 <script type="text/javascript"> /** * cookieStorage.js * 本类实现像localSt ...
- MySql单表最大8000W+ 之数据库遇瓶颈记
前言 昨晚救火到两三点,早上七点多醒来,朦胧中醒来发现电脑还开着,赶紧爬起来看昨晚执行的SQL命令结果.由于昨晚升级了阿里云的RDS,等了将近两个小时 还在 升降级中,早上阿里云那边回复升级过程中出现 ...