HTML5 CSS3专题纯CSS打造相册效果

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

HTML5 CSS3专题纯CSS打造相冊效果
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/30993277 今天偶然发现电脑里面还有这种一个样例.感觉效果还不错,不记得啥时候 ...
HTML5 CSS3 专题：诱人的实例 3D旋转木马效果相册
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/32964301 首先说明一下创意的出处:http://www.zhangxinxu ...
HTML5 CSS3 专题：诱人的实例 3D旋转木马效果相冊
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/32964301 首先说明一下创意的出处:http://www.zhangxinxu ...
利用target的特性，可以实现纯css的tab效果切换
基础知识: :target起作用的是href连接到的位置如 <a href="#tab1">tab1</a> <div id="tab1& ...
【CSS Demo】纯 CSS 打造 Flow-Steps 导航
low-Steps 导航效果常用于需要表示执行步骤的交互页面,效果如下: 步骤一步骤二步骤三通常使用图片来实现 Flow-Steps 效果,但此方法的灵活性不足,当内容变化较大时就可能需要重 ...
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 ...
html5+css3第一屏滚屏动画效果
详细内容请点击在线预览立即下载 html5+css3第一屏滚屏动画效果. 转载自:http://tympanus.net/codrops/2014/05/22/inspiration-for-art ...
纯 CSS 实现波浪效果！
一直以来,使用纯 CSS 实现波浪效果都是十分困难的. 因为实现波浪的曲线需要借助贝塞尔曲线. 而使用纯 CSS 的方式,实现贝塞尔曲线,额,暂时是没有很好的方法. 当然,借助其他力量(SVG.CAN ...
HTML5 CSS3专题诱人的实例 CSS3打造百度贴吧的3D翻牌效果
首先感谢w3cfuns的老师~ 今天给大家带来一个CSS3制作的翻牌效果,就是鼠标移到元素上,感觉可以看到元素背后的信息.大家如果制作考验记忆力的连连看.扑克类的游戏神马的,甚至给女朋友写一些话语,放 ...

随机推荐

Netfilter的使用和实现
本文主要内容:Netfilter的原理和实现浅析,以及示例模块. 内核版本:2.6.37 Author:zhangskd @ csdn blog 概述 Netfilter为多种网络协议(IPv4.IP ...
Zeroc Ice开发环境搭建
搭建Ice环境 1. Linux(推荐,更接近真实生产环境) 2. Windows(方便学习开发) 下载安装包:https://zeroc.com/downloads (百度网盘链接:http ...
如何使用ZOL一键安装器下载中关村在线的源安装包
如何使用ZOL一键安装器下载中关村在线的源安装包马根峰 (广东联合电子服务股份有限公司, 广州 510300) 摘要中关村在线最近开始推出ZOL一键安装器,用户直 ...
《老罗的Android之旅》导读PPT
虽然好几个月没更新博客了,但是老罗一直有在准备可以分享的东西的.除了早前在微博分享Android4.2相关技术之外,这次还特意准备了13个PPT,总结之前所研究过的东西.内容从Android组件设计思 ...
java面试题，附个人理解答案
一,面向对象的特征:1.抽象包括数据抽象跟行为抽象,将对象共同的特征取出形成一个类2.继承被继承类为基类/超类,继承类为子类/派生类3.封装多次使用道德数据或方法,封装成类,方便多次重复调用4. ...
多线程中操作UI
遇到过要在工作线程中去更新UI以让用户知道进度,而在多线程中直接调用UI控件操作是错误的做法. 最后解决方法是将操作UI的代码封装,通过Invoke / BeginInvoke 去委托调用. 代码封装 ...
【转】java中PriorityQueue优先级队列使用方法
优先级队列是不同于先进先出队列的另一种队列.每次从队列中取出的是具有最高优先权的元素. PriorityQueue是从JDK1.5开始提供的新的数据结构接口. 如果不提供Comparator的话,优先 ...
vim快捷键汇总
命令历史以:和/开头的命令都有历史纪录,可以首先键入:或/然后按上下箭头来选择某个历史命令. 启动vim 在命令行窗口中输入以下命令即可 vim 直接启动vim vim filename 打开vim ...
python奇技淫巧——max/min函数的用法
本文以max()为例,对min/max内建函数进行说明源码 def max(*args, key=None): # known special case of max ""&qu ...
使用VirtualBox调试项目踩过的坑
当我们完成项目后通常需要做其他系统的测试例如win10下测试完成后要在win7中测试这时,安装一个虚拟机是较为明智的选择本文将讲述在使用虚拟机测试Unity发布的exe(所有的3D文件都适用) ...

HTML5 CSS3专题 纯CSS打造相册效果

HTML5 CSS3专题 纯CSS打造相册效果的更多相关文章

随机推荐

热门专题

HTML5 CSS3专题纯CSS打造相册效果

HTML5 CSS3专题纯CSS打造相册效果的更多相关文章