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制作的翻牌效果,就是鼠标移到元素上,感觉可以看到元素背后的信息.大家如果制作考验记忆力的连连看.扑克类的游戏神马的,甚至给女朋友写一些话语,放 ...
随机推荐
- TCP连接建立系列 — 服务端接收ACK段(二)
本文主要分析:三次握手中最后一个ACK段到达时,服务器端的处理路径. 内核版本:3.6 Author:zhangskd @ csdn blog 创建新sock 协议族相关的操作函数,我们要看的是TCP ...
- Gradle 1.12用户指南翻译——第四十四章. 分发插件
本文由CSDN博客貌似掉线翻译,其他章节的翻译请参见: http://blog.csdn.net/column/details/gradle-translation.html 翻译项目请关注Githu ...
- android 实现淘宝收益图的折线
实现的效果我一会贴上,我先说下原理,我们知道要实现在canvas上画线,不就是要搞一个paint嘛,然后首先肯定要设置下paint的属性,那么画文字呢,不就是Textpaint吗, 对,就是这么简单, ...
- CUDA跟OpenCV的混合编程,注意OpenCV需要重新编译
1.注意事项 编译的办法参见: http://blog.csdn.net/wangyaninglm/article/details/39997113 以下是程序代码,网上搜的例子: 注意事项:32 ...
- 和菜鸟一起学linux之initramfs方式启动
关于initramfs initramfs在编译内核的同时被编译并与内核连接成一个文件,它被链接到地址__initramfs_start处,与内核同时被加载到ram中.initramfs被解析处理后原 ...
- 在java中读取配置文件信息
public class PropertyUtil { public static final Properties PROP = new Properties(); /** * 读取配置文件的内容( ...
- javascript—Mach的一些常用方法
1.Math.random():返回 0 ~ 1 之间的随机数. 2.Math.round():四舍五入取整. 3.Math.ceil():向上取整; 例如:a=1.2,b=5.8; ...
- linux 下查看wwn号
PC server主机与FC存储进行连接时,一般需要加装HBA卡,两者之间衔接的一个重要参数就是wwn号.redhat或suse下查看wwn号的方法如下.一.SuSE Linux 9查看 /proc/ ...
- JavaScript头像上传器的实现
最近做这方面的东西,刚开始准备用一个开源项目:https://github.com/yueyoum/django-upload-avatar 后来发现这个开源组件的原设计者的定制化选项设计略显复杂,发 ...
- ThinkPHP5零基础搭建CMS系统(一)
了解学习thinkphp5应该是2016年年底的事情,当时还没有接触过thinkphp3版本,觉得通过手册直接上手学习tp5蛮轻松的,现在从零记录下,搭建可扩展的CMS. 1.ThinkPHP环境搭建 ...