HTML5 CSS3打造相册效果附源码下载


Posted in HTML / CSS onJune 16, 2014

今天偶然发现电脑里面还有这样的一个例子,感觉效果还不错,不记得啥时候下载的了,也好久没上w3cfuns了,怀念学习前台的日子,给大家分享下。

效果图:
HTML5 CSS3打造相册效果附源码下载 

效果是不是还是很不错的,最主要的是没有使用一行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;
}

源码点击下载
HTML / CSS 相关文章推荐
CSS3 优势以及网页设计师如何使用CSS3技术
Jul 29 HTML / CSS
CSS3对背景图片的裁剪及尺寸和位置的设定方法
Mar 07 HTML / CSS
使用CSS3中的calc()属性来以算式表达尺寸数值
Jun 06 HTML / CSS
浅谈CSS3中display属性的Flex布局的方法
Aug 14 HTML / CSS
css3 transform导致子元素固定定位变成绝对定位的方法
Mar 06 HTML / CSS
CSS3 border-radius圆角的实现方法及用法详解
Sep 14 HTML / CSS
HTML5 canvas基本绘图之绘制矩形
Jun 27 HTML / CSS
HTML5印章绘制电子签章图片(中文英文椭圆章、中文英文椭圆印章)
Jun 03 HTML / CSS
用HTML5.0制作网页的教程
May 30 HTML / CSS
HTML5 canvas画矩形时出现边框样式不一致的解决方法
Oct 14 HTML / CSS
HTML5中的websocket实现直播功能
May 21 HTML / CSS
AmazeUI 按钮交互的实现示例
Aug 24 HTML / CSS
HTML5 CSS3实现一个精美VCD包装盒个性幻灯片案例
Jun 16 #HTML / CSS
HTML5调用手机摄像头拍照的实现思路及代码
Jun 15 #HTML / CSS
html5在移动端的屏幕适应问题示例探讨
Jun 15 #HTML / CSS
HTML5 创建canvas元素示例代码
Jun 04 #HTML / CSS
解决Firefox下不支持outerHTML问题代码分享
Jun 04 #HTML / CSS
html5小技巧之通过document.head获取head元素
Jun 04 #HTML / CSS
HTML5图片预览实例分享
Jun 04 #HTML / CSS
You might like
如何在PHP中使用Oracle数据库(6)
2006/10/09 PHP
Yii PHP Framework实用入门教程(详细介绍)
2013/06/18 PHP
PHP Switch 语句之学习笔记
2013/09/21 PHP
PHP实现微信公众平台音乐点播
2014/03/20 PHP
WordPress中给媒体文件添加分类和标签的PHP功能实现
2015/12/31 PHP
解析PHP的Yii框架中cookie和session功能的相关操作
2016/03/17 PHP
php解压缩zip和rar压缩包文件的方法
2019/07/10 PHP
JavaScript 核心参考教程 内置对象
2009/10/13 Javascript
JavaScript中的一些定位属性[图解]
2010/07/14 Javascript
js遍历、动态的添加数据的小例子
2013/06/22 Javascript
JQuery的ON()方法支持的所有事件罗列
2015/02/28 Javascript
jQuery实现的兼容性浮动层示例
2016/08/02 Javascript
Bootstrap Modal遮罩弹出层(完整版)
2016/11/21 Javascript
微信小程序实现多个按钮toggle功能的实例
2017/06/13 Javascript
Echarts基本用法_动力节点Java学院整理
2017/08/11 Javascript
详解webpack + vue + node 打造单页面(入门篇)
2017/09/23 Javascript
vue在使用ECharts时的异步更新和数据加载详解
2017/11/22 Javascript
实例分析vue循环列表动态数据的处理方法
2018/09/28 Javascript
vue多次循环操作示例
2019/02/08 Javascript
使用Python下载Bing图片(代码)
2013/11/07 Python
Python标准库内置函数complex介绍
2014/11/25 Python
Python绘制3d螺旋曲线图实例代码
2017/12/20 Python
Python中defaultdict与lambda表达式用法实例小结
2018/04/09 Python
详解pandas删除缺失数据(pd.dropna()方法)
2019/06/25 Python
python使用配置文件过程详解
2019/12/28 Python
Python搭建Keras CNN模型破解网站验证码的实现
2020/04/07 Python
如何将json数据转换为python数据
2020/09/04 Python
Django contrib auth authenticate函数源码解析
2020/11/12 Python
Topshop法国官网:英国快速时尚品牌
2018/04/08 全球购物
ASOS西班牙官网:英国在线时尚和美容零售商
2020/01/10 全球购物
英国时尚和家居用品零售商:Matalan
2021/02/28 全球购物
一套PHP的笔试题
2013/05/31 面试题
小班秋游活动方案
2014/02/22 职场文书
银行先进个人事迹材料
2014/05/11 职场文书
Java Optional<Foo>转换成List<Bar>的实例方法
2021/06/20 Java/Android
mysql连接查询中and与where的区别浅析
2021/07/01 MySQL