转载请标明出处：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. 北京出dell s2740显示器 1900 - V2EX

    水木社区归档站 北京出dell s2740显示器 1900 - V2EX 北京出dell s2740显示器 1900 By kekex · 6 小时 6 分钟前 · 188 次点击 购于今年4月份 镜 ...

  2. HDU 4839 The Game of Coins _(:зゝ∠)_

    The Game of Coins mark: #include"cstdio" #include"iostream" #include"queue& ...

  3. Ubuntu_文件夹名字转化成英文

    打开终端命令行输入: export LANG=en_US xdg-user-dirs-gtk-update 之后重启,就看到中文的文件夹变成英文的了 想要换回中文的输入: export LANG=zh ...

  4. Direct UI 思想阐述（好多相关文章）

    在界面开发中,目前DirectUI是个热门的技术名称,因为众多的知名公司都是用DirectUI方式作出了很炫丽的界面.而对于大多数熟悉Win32控件,熟悉MFC开发的开发人员来说,我们应该做何选择? ...

  5. Metasploit学习之msf连接数据库

    kali使用metasploit开启数据服务: 首先,初次使用系统要初始化建立数据库msf3, 否则的话 /opt/metasploit/apps/pro/ui/config/databse.yml不 ...

  6. 【ASP.NET Web API教程】5.3 发送HTML表单数据：文件上传与多部分MIME

    原文:[ASP.NET Web API教程]5.3 发送HTML表单数据:文件上传与多部分MIME 注:本文是[ASP.NET Web API系列教程]的一部分,如果您是第一次看本系列教程,请先看前面 ...

  7. TFS2010安装与管理

    整了几天TFS,把相关的一些配置与安装的要点简单记下,希望对大家有用.本篇主要是安装与配置上的内容,下一篇会介绍如何使用以及使用方面的相关心得体会. 本篇内容简要: 1.   安装部署 1.1.  流 ...

  8. ZenCoding Syntax

    语法: 后代:> 缩写:nav>ul>li 兄弟:+ 缩写:div+p+bq 上级:^ 缩写:div+div>p>span+em^bq 缩写:div+div>p&g ...

  9. android json 解析 简单示例

    1 下面是一个简单的json 解析的demo,废话不多说,直接上代码 package com.sky.gallery; import java.io.ByteArrayOutputStream; im ...

  10. PHP正则表达式完全手册

    原文:PHP正则表达式完全手册 php的正则表达式完全手册 前言 正则表达式是烦琐的,但是强大的,学会之后的应用会让你除了提高效率外,会给你带来绝对的成就感.只要认真去阅读这些资料,加上应用的时候进行 ...