转载请标明出处: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打造相册效果的更多相关文章

  1. HTML5 CSS3专题 纯CSS打造相冊效果

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/30993277 今天偶然发现电脑里面还有这种一个样例.感觉效果还不错,不记得啥时候 ...

  2. HTML5 CSS3 专题 :诱人的实例 3D旋转木马效果相册

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/32964301 首先说明一下创意的出处:http://www.zhangxinxu ...

  3. HTML5 CSS3 专题 :诱人的实例 3D旋转木马效果相冊

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/32964301 首先说明一下创意的出处:http://www.zhangxinxu ...

  4. 利用target的特性,可以实现纯css的tab效果切换

    基础知识: :target起作用的是href连接到的位置 如 <a href="#tab1">tab1</a> <div id="tab1& ...

  5. 【CSS Demo】纯 CSS 打造 Flow-Steps 导航

    low-Steps 导航效果常用于需要表示执行步骤的交互页面,效果如下: 步骤一 步骤二 步骤三   通常使用图片来实现 Flow-Steps 效果,但此方法的灵活性不足,当内容变化较大时就可能需要重 ...

  6. 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 ...

  7. html5+css3第一屏滚屏动画效果

    详细内容请点击 在线预览立即下载 html5+css3第一屏滚屏动画效果. 转载自:http://tympanus.net/codrops/2014/05/22/inspiration-for-art ...

  8. 纯 CSS 实现波浪效果!

    一直以来,使用纯 CSS 实现波浪效果都是十分困难的. 因为实现波浪的曲线需要借助贝塞尔曲线. 而使用纯 CSS 的方式,实现贝塞尔曲线,额,暂时是没有很好的方法. 当然,借助其他力量(SVG.CAN ...

  9. HTML5 CSS3专题 诱人的实例 CSS3打造百度贴吧的3D翻牌效果

    首先感谢w3cfuns的老师~ 今天给大家带来一个CSS3制作的翻牌效果,就是鼠标移到元素上,感觉可以看到元素背后的信息.大家如果制作考验记忆力的连连看.扑克类的游戏神马的,甚至给女朋友写一些话语,放 ...

随机推荐

  1. TCP连接建立系列 — 服务端接收ACK段(二)

    本文主要分析:三次握手中最后一个ACK段到达时,服务器端的处理路径. 内核版本:3.6 Author:zhangskd @ csdn blog 创建新sock 协议族相关的操作函数,我们要看的是TCP ...

  2. Gradle 1.12用户指南翻译——第四十四章. 分发插件

    本文由CSDN博客貌似掉线翻译,其他章节的翻译请参见: http://blog.csdn.net/column/details/gradle-translation.html 翻译项目请关注Githu ...

  3. android 实现淘宝收益图的折线

    实现的效果我一会贴上,我先说下原理,我们知道要实现在canvas上画线,不就是要搞一个paint嘛,然后首先肯定要设置下paint的属性,那么画文字呢,不就是Textpaint吗, 对,就是这么简单, ...

  4. CUDA跟OpenCV的混合编程,注意OpenCV需要重新编译

    1.注意事项 编译的办法参见: http://blog.csdn.net/wangyaninglm/article/details/39997113   以下是程序代码,网上搜的例子: 注意事项:32 ...

  5. 和菜鸟一起学linux之initramfs方式启动

    关于initramfs initramfs在编译内核的同时被编译并与内核连接成一个文件,它被链接到地址__initramfs_start处,与内核同时被加载到ram中.initramfs被解析处理后原 ...

  6. 在java中读取配置文件信息

    public class PropertyUtil { public static final Properties PROP = new Properties(); /** * 读取配置文件的内容( ...

  7. javascript—Mach的一些常用方法

    1.Math.random():返回 0 ~ 1 之间的随机数.   2.Math.round():四舍五入取整. 3.Math.ceil():向上取整;    例如:a=1.2,b=5.8;     ...

  8. linux 下查看wwn号

    PC server主机与FC存储进行连接时,一般需要加装HBA卡,两者之间衔接的一个重要参数就是wwn号.redhat或suse下查看wwn号的方法如下.一.SuSE Linux 9查看 /proc/ ...

  9. JavaScript头像上传器的实现

    最近做这方面的东西,刚开始准备用一个开源项目:https://github.com/yueyoum/django-upload-avatar 后来发现这个开源组件的原设计者的定制化选项设计略显复杂,发 ...

  10. ThinkPHP5零基础搭建CMS系统(一)

    了解学习thinkphp5应该是2016年年底的事情,当时还没有接触过thinkphp3版本,觉得通过手册直接上手学习tp5蛮轻松的,现在从零记录下,搭建可扩展的CMS. 1.ThinkPHP环境搭建 ...