HTML5 CSS3专题 纯CSS打造相冊效果
转载请标明出处：http://blog.csdn.net/lmj623565791/article/details/30993277
今天偶然发现电脑里面还有这种一个样例。感觉效果还不错，不记得啥时候下载的了。也好久没上w3cfuns了，怀念学习前台的日子，给大家分享下。
效果图：
效果是不是还是非常不错的。最基本的是没有使用一行js。这才是亮点。
先看html文件：
<body> <div id="gallery">
<h1>纯CSS3相冊效果</h1>
<ul> <li>
<span class="touch"><img src="images/pic1.jpg"/></span> <div style="display: block;">
<img src="images/pic1.jpg"/>
</div>
</li> <li>
<span><img src="images/pic2.jpg"/></span> <div>
<img src="images/pic2.jpg"/>
</div>
</li>
<li>
<span><img src="images/pic3.jpg"/></span> <div>
<img src="images/pic3.jpg"/>
</div>
</li> <li>
<span><img src="images/pic4.jpg"/></span> <div>
<img src="images/pic4.jpg"/>
</div>
</li> <li>
<span><img src="images/pic5.jpg"/></span> <div>
<img src="images/pic5.jpg"/>
</div>
</li> </ul> <div class="clearfix"></div>
</div> </body>
简单描写叙述一下：
1、ul 中 li决定了照片的个数
2、ul使用样式float:right。width:140px;使得显示在相冊的右側区域
3、li的float：left，使得li能够左浮动。li中存放大图的div，position为absolute会依据div#gallary进行定位。默认仅仅有第一个显示
4、当鼠标移动到li上时。改变li span img的透明度和li div的display将大图显示
接下来就是css文件：
<style type="text/css">
body
{
font-family: "微软雅黑";
}
#gallery
{
width: 700px;
position: relative;
margin: 20px auto 0;
background-color: #000;
min-height: 400px;
padding: 20px;
}
/*标题*/
#gallery h1
{
color: #fff;
font-size: 2em;
font-weight: bold;
}
#gallery ul
{
width: 140px;
float: right;
margin: 10px 0 20px;
}
#gallery ul li
{
float: left;
margin: 20px 8px 0 0;
}
#gallery ul li span
{
display: block;
position: relative;
width: 60px;
height: 80px;
border: 1px solid #fff;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
overflow: hidden;
}
#gallery ul li span img
{
position: relative;
top: -200px;
left: -100px;
filter: alpha(opacity=30);
opacity: 0.3;
}
#gallery ul li span.touch img, #gallery ul li:hover span img
{
opacity: 1;
filter: alpha(opacity=100);
}
#gallery ul li:hover div
{
display: block;
}
#gallery ul li div img
{
width: 460px;
height: 288px;
}
#gallery ul li div
{
display: none;
position: absolute;
top: 100px;
left: 30px;
border: 5px solid #fff;
}
.clearfix
{
clear: both;
}
</style>
css中没有什么复杂的样式。就不做描写叙述了。此外html中我引入了一个重置样式的css , reset.css 。大家也能够使用自己习惯的重置样式：
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend{
margin: 0;
padding: 0;
font-size: 100%;
border: 0;
outline: 0;
background: transparent;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
:focus {
outline: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
HTML5 CSS3专题 纯CSS打造相冊效果的更多相关文章
- HTML5 CSS3专题 纯CSS打造相册效果
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/30993277 今天偶然发现电脑里面还有这样的一个例子,感觉效果还不错,不记得啥时 ...
- HTML5 CSS3 专题 ：诱人的实例 3D旋转木马效果相冊
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/32964301 首先说明一下创意的出处:http://www.zhangxinxu ...
- HTML5 CSS3 专题 ：诱人的实例 3D旋转木马效果相册
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/32964301 首先说明一下创意的出处:http://www.zhangxinxu ...
- 【CSS Demo】纯 CSS 打造 Flow-Steps 导航
low-Steps 导航效果常用于需要表示执行步骤的交互页面,效果如下: 步骤一 步骤二 步骤三 通常使用图片来实现 Flow-Steps 效果,但此方法的灵活性不足,当内容变化较大时就可能需要重 ...
- Expression构建DataTable to Entity 映射委托 sqlserver 数据库里面金额类型为什么不建议用float，实例告诉你为什么不能。 sql server 多行数据合并成一列 C# 字符串大写转小写，小写转大写，数字保留，其他除外 从0开始用U盘制作启动盘装Windows10系统(联想R720笔记本)并永久激活方法 纯CSS打造淘宝导航菜单栏 C# Winform
Expression构建DataTable to Entity 映射委托 1 namespace Echofool.Utility.Common { 2 using System; 3 using ...
- Android百日程序：GridView实现相冊效果
本章使用GridView控件来做一个相冊效果. 图片效果例如以下: 响应点击事件,点击的时候提示是当前第几章图片.从左到右,从上到下. 点击了第一张图片,显示了1. 步骤: 一 新建项目,然后把图片资 ...
- HTML5 CSS3专题 诱人的实例 CSS3打造百度贴吧的3D翻牌效果
首先感谢w3cfuns的老师~ 今天给大家带来一个CSS3制作的翻牌效果,就是鼠标移到元素上,感觉可以看到元素背后的信息.大家如果制作考验记忆力的连连看.扑克类的游戏神马的,甚至给女朋友写一些话语,放 ...
- 纯CSS打造可折叠树状菜单
1:Html代码 <li> <label for="subsubfolder1">下级</label> <input id="s ...
- 【CSS3】纯CSS代码实现模拟时钟，+js对时功能。
使用CSS3纯代码来实现模拟时钟,及指针动画功能. 在这里主要使用到css3一些基本元素: border-radius:圆角边框,画圆形:表盘 Transform:变换,旋转,扭曲:刻度盘,指针形状 ...
随机推荐
- Boost：：Asio：：Error的用法浅析
一般而言我们创建用于接收error的类型大多声明如下: boost::system::error_code error 我们用这个类型去接受在函数中产生的错误 如 socket.connect( en ...
- J2EE SSH学习（二）安装Eclipse插件和第一个Eclipse项目
(一)安装Eclipse插件 Eclipse有很多功能很强大的插件,我现在作为一个菜鸟只知道插件的功能通常都很牛叉实用或者很有趣,那么该怎么安装Eclipse插件呢? 我使用的是Eclipse 4.3 ...
- Swift - 高级运算符介绍
除了基本运算符之外,Swift还支持位运算和位移运算,包括: 1,按位取反运算:操作符是 ~ 2,按位与运算:操作符是 & 3,按位或运算:操作符是 | 4,按位异或运算:操作符是 ^ 5 ...
- 14.2.5.1 Role of the .frm File for InnoDB Tables InnoDB .frm文件的作用
14.2.5.1 Role of the .frm File for InnoDB Tables: 14.2.5.1 Role of the .frm File for InnoDB Tables I ...
- Redis util
主要是字符串通配符匹配和数字与字符串互转的几个函数. // 通配符模式匹配 int stringmatchlen(const char* p, int plen, const char* s, int ...
- 参加2013中国软件开发者大会(SDCC)会，听软件开发趋势
1.SDCC 盛大召开的会议,既然参加了,就写篇博客记一下. 2.蒋公子 首先向大会主席台走来的是csdn老大...... 额,好像不是走过来的.蒋涛采用了个特殊的上台方式呢~ ...
- ios捕获异常并发送图片,便于解决bug
在开发过程中,我们有时候会留下Bug,用户在使用我们的app 的时候,有时会出现闪退,这时候我们能够让用户给我们发送邮件,以让我们开发者更加高速的地位到Bug的所在.以最快的时间解决.同一时候也提高用 ...
- 如何配置Git支持大小写敏感和修改文件名中大小写字母呢?(转)
1. 在新建代码文件时,不注意把文件名应该小小写搞错了2. 文件已经push到远程了3. 在windows下面将文件名字改为全小写 改好后,在Git中没有任何反应,使用git status时,如果遇到 ...
- 使用CocoaPods出现 The `master` repo requires CocoaPods 0.32.1 - 问题解决
近期在使用CocoaPods为project配置第三方类库时出现了例如以下问题: [!] The `master` repo requires CocoaPods 0.32.1 - 明显是由于Coco ...
- UVA 1386 - Cellular Automaton(循环矩阵)
UVA 1386 - Cellular Automaton option=com_onlinejudge&Itemid=8&page=show_problem&category ...