转载请标明出处：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. PS 图像调整算法——自动色阶 （Auto Levels）

    PS 给出的定义: Enhance Per Channel Contrast:Maximizes the tonal range in each channel to produce a more d ...

  2. linux下显示不规则图片窗口

    测试环境是ubuntu15.04,使用的图形库是gtk+. 图片格式采用的是X11的xpm格式,首先从网上找一个背景透明的png图片,然后用图形转换工具(比如gimp)转换为xpm格式. 程序代码如下 ...

  3. linu下C语言之BMP图片操作编程(上)

    BMP文件格式,也被称为位图图像文件或与设备无关的位图文件格式(DIB)或者只是一个位图,是 一个光栅图形 图像文件格式使用 来存储位图,数字,图片,独立的显示设备. 微软已经定义了一个特定的表示颜色 ...

  4. Ubuntu18.04教程

    pre.ctl { font-family: "Liberation Mono", monospace } h1 { margin-bottom: 0.21cm } h1.west ...

  5. AngularJS中service，factory，provider的区别

    一.service引导 刚开始学习Angular的时候,经常被误解和被初学者问到的组件是 service(), factory(), 和 provide()这几个方法之间的差别.This is whe ...

  6. Android的颜色值转换

    Android的颜色int值比较变态,是个负值,用计算机术语讲叫补码,手工转换比较麻烦,首先看看文档 https://developer.android.com/reference/android/g ...

  7. 关于django migrations的使用

    django 1.8之后推出的migrations机制使django的数据模式管理更方便容易,现在简单谈谈他的机制和一些问题的解决方法: 1.谈谈机制:migrations机制有两个指令,第一个是ma ...

  8. codechef Chef And Easy Xor Queries

    做法:我们考虑前缀异或和,修改操作就变成了区间[i,n]都异或x 查询操作就变成了:区间[1,x]中有几个k 显然的分块,每个块打一个tag标记表示这个块中所有的元素都异或了tag[x] 然后处理出这 ...

  9. 在UltraEdit中如何像NotePad++一样实现双击单词在全文中高亮

    NotePad++中有个功能特别好用,就是双击某个单词,这个单词就会在全文档中高亮,如下图 我经常用UltraEdit,结果是UE中没有这个功能,这么实用的功能居然没有? 没关系,在UE中shift+ ...

  10. Java容器：List

    集合类的层次关系 List接口简介 List的常用方法 List实例 Vector ArrayList Vector和ArrayList的扩容 LinkedList 参考文章 今天开始更新Java集合 ...