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:必须 ...
随机推荐
- 网页标题title的闪动提示
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...
- Mysql按时间段分组查询
Mysql按时间段分组查询来统计会员的个数,mysql个数 Mysql按时间段分组查询来统计会员的个数,mysql个数 1.使用case when方法(不建议使用)- 代码如下 复制代码SELECT ...
- 【Android Developers Training】 30. 允许其它应用启动你的Activity
注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...
- touchmover手机移动端的拖动
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name= ...
- 精通 JS正则表达式(转)
转载的目的在于:增加一些自己看不懂的解释.内容只加不改,灰色字体是自己寻找并增加的. 正则表达式可以: •测试字符串的某个模式.例如,可以对一个输入字符串进行测试,看在该字符串是否存在一个电话号码模式 ...
- python - bilibili(四)抓包数据乱码
上一篇文章中不知道大家发现端倪木有,两张照片对比很明显发现第一张是信息很明显的,第二张是乱码的. 为什么会出现这种情况?细心的童鞋可能发现是我们发送给服务器的请求连接的数据不同: 第一张图的信息是{& ...
- ps命令学习笔记
最近在看linux优化大师这本书,第2章祥细讲解了分析系统用的工具,这里把一些内容整理出来,以便加深印像. 当进行系统分析时,ps命令显示有关选择的活跃进程的信息.ps命令提供当前已存在的进程列表,和 ...
- 交叉编译 tesseract
官方参考资料说明: tesseract 依赖库: (https://github.com/tesseract-ocr/tesseract/wiki/Compiling#linux) leptoni ...
- visual studio高效率插件及快捷键
visual studio从2010开始支持插件安装(工具->扩展管理器),这里推荐几个插件,可以极大的提升开发效率: Visual Assist X(VAssistX) VAssistX是wh ...
- 处理文本,提取数据的脚本-主要就是用sed
处理文本,提取数据的脚本 #! /bin/sh | sed 's/)<\/small><\/td><td>/\n/g' # 用换行符替换 # 删除带有分号的行 # ...