转载请标明出处：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. 【CSS Demo】纯 CSS 打造 Flow-Steps 导航

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

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

  6. Android百日程序：GridView实现相冊效果

    本章使用GridView控件来做一个相冊效果. 图片效果例如以下: 响应点击事件,点击的时候提示是当前第几章图片.从左到右,从上到下. 点击了第一张图片,显示了1. 步骤: 一 新建项目,然后把图片资 ...

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

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

  8. 纯CSS打造可折叠树状菜单

    1:Html代码 <li> <label for="subsubfolder1">下级</label> <input id="s ...

  9. 【CSS3】纯CSS代码实现模拟时钟，+js对时功能。

    使用CSS3纯代码来实现模拟时钟,及指针动画功能. 在这里主要使用到css3一些基本元素: border-radius:圆角边框,画圆形:表盘 Transform:变换,旋转,扭曲:刻度盘,指针形状 ...

随机推荐

  1. Leetcode:find_minimum_in_rotated_sorted_array

    一.     题目 给定一个排好序的数组.数组可能是单调递增,也可能有一个变换. (i.e., 0 1 2 4 5 6 7 might become 4 5 6 7 0 1 2) 要求找出最小的数. ...

  2. MyBatis简单的增删改查以及简单的分页查询实现

    MyBatis简单的增删改查以及简单的分页查询实现 <? xml version="1.0" encoding="UTF-8"? > <!DO ...

  3. Android用surface直接显示yuv数据（二）

    上一篇文章主要是參照AwesomePlayer直接用SoftwareRenderer类来显示yuv,为了能用到这个类,不惜依赖了libstagefright.libstagefright_color_ ...

  4. Mysql 执行计划分析

    zjdev 正常访问: mysql> explain SELECT temp.* , -> (SELECT COUNT(sn) FROM AssignClientManager WHERE ...

  5. Skype无法显示登录界面

    Skype升级之后突然抽风,双击运行程序之后,输入用户名和密码的窗口都没了,截图如下(本机为Windows 7 32bit版本): 卸载重新安装,也无济于事.删除注册表中的Skype的相关信息后问题依 ...

  6. hdu5086——Revenge of Segment Tree

    Revenge of Segment Tree Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/ ...

  7. 找工作笔试面试那些事儿(16)---linux相关知识点(1)

    linux这部分的知识倒不是笔试面试必考的内容,不过现在很多公司开发环境都在linux系统下,一些简单的知识还是需要了解一下的,笔试面试中万一碰到了,也不会措手不及.作为菜硕的我,又因为读研期间的项目 ...

  8. Python 学习入门（23）—— 进程

    本文介绍Python的os包中有查询和修改进程信息的函数,Python的这些工具符合Linux系统的相关概念,所以可以帮助理解Linux体系. 1. 进程信息 os包中相关函数如下: uname()  ...

  9. Vue ES6

    Vue ES6 Jade Scss Webpack Gulp   一直以来非常庆幸曾经有翻过<代码大全2>:这使我崎岖编程之路少了很多不必要的坎坷.它在软件工艺的话题中有写到一篇:“首先是 ...

  10. HDU 4296 Buildings （YY）

    题意: 给定N个物体,每个物体有两个参数w,s.   w代表它自身的重量: s代表它的强度.现在要把这些物体叠在一起,会产生一个PDV值. PDV解释:(Σwj)-si, where (Σwj) st ...