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实现背景颜色渐变让图片不再是唯一的实现方式
Dec 18 HTML / CSS
CSS3旋转——彩色扇子兼容firefox浏览器
Jun 04 HTML / CSS
CSS3圆角边框和边界图片效果实例
Jul 01 HTML / CSS
巧用CSS3的calc()宽度计算做响应模式布局的方法
Mar 22 HTML / CSS
css3一个简易的 LED 数字时钟实现方法
Jan 15 HTML / CSS
用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能
Mar 15 HTML / CSS
HTML5 本地存储实现购物车功能
Sep 07 HTML / CSS
使用HTML5原生对话框元素并轻松创建模态框组件
Mar 06 HTML / CSS
HTML5之HTML元素扩展(上)—新增加的元素及使用概述
Jan 31 HTML / CSS
解决HTML5手机端页面缩放的问题
Oct 27 HTML / CSS
Html5移动端网页端适配(js+rem)
Feb 03 HTML / CSS
html+css合并表格边框的示例代码
Mar 31 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简单实现上一页下一页功能示例
2016/09/14 PHP
PHP7导出Excel报ERR_EMPTY_RESPONSE解决方法
2019/04/16 PHP
学习ExtJS 访问容器对象
2009/10/07 Javascript
javascript中字符串拼接需注意的问题
2010/07/13 Javascript
js Event对象的5种坐标
2011/09/12 Javascript
多个jquery.datatable共存,checkbox全选异常的快速解决方法
2013/12/10 Javascript
JS动态添加与删除select中的Option对象(示例代码)
2013/12/25 Javascript
jQuery学习笔记之总体架构
2014/06/03 Javascript
jquery实现倒计时代码分享
2014/06/13 Javascript
JS实现方向键切换输入框焦点的方法
2015/08/19 Javascript
纯jquery实现模仿淘宝购物车结算
2015/08/20 Javascript
以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题
2015/11/13 Javascript
使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo
2016/09/01 Javascript
在JavaScript中调用Java类和接口的方法
2016/09/07 Javascript
KnockoutJS 3.X API 第四章之数据控制流with绑定
2016/10/10 Javascript
自学实现angularjs依赖注入
2016/12/20 Javascript
Vue动态组件实例解析
2017/08/20 Javascript
Vue中Quill富文本编辑器的使用教程
2018/09/21 Javascript
基于vue通用表单解决方案的思考与分析
2019/03/16 Javascript
微信公众平台 发送模板消息(Java接口开发)
2019/04/17 Javascript
vue 数据操作相关总结
2020/12/17 Vue.js
python 生成目录树及显示文件大小的代码
2009/07/23 Python
python统计中文字符数量的两种方法
2019/01/31 Python
Python3.6+Django2.0以上 xadmin站点的配置和使用教程图解
2019/06/04 Python
Python类中的魔法方法之 __slots__原理解析
2019/08/26 Python
python实现复制文件到指定目录
2019/10/16 Python
django商品分类及商品数据建模实例详解
2020/01/03 Python
解决Tensorflow占用GPU显存问题
2020/02/03 Python
python使用scapy模块实现ping扫描的过程详解
2021/01/21 Python
浅谈HTML5 Web Worker的使用
2018/01/05 HTML / CSS
NBA欧洲商店(法国):NBA Europe Store FR
2016/10/19 全球购物
全球知名的婚恋交友网站:Match.com
2017/01/05 全球购物
菲律宾旅游网站:Expedia菲律宾
2017/10/11 全球购物
护士专业推荐信
2013/11/02 职场文书
新学期校长寄语
2014/01/18 职场文书
Python多线程实用方法以及共享变量资源竞争问题
2022/04/12 Python