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制作的翻牌效果,就是鼠标移到元素上,感觉可以看到元素背后的信息.大家如果制作考验记忆力的连连看.扑克类的游戏神马的,甚至给女朋友写一些话语,放 ...
随机推荐
- Aho-Corasick算法学习
1.概述 Aho-Corasick自动机算法(简称AC自动机)1975年产生于贝尔实验室.该算法应用有限自动机巧妙地将字符比较转化为了状态转移.此算法有两个特点,一个是扫描文本时完全不需要回溯,另一个 ...
- gtk程序运行报 main_loop!=NULL 错误的解决办法
现象是将按钮的clicked Action与gtk_main_quit函数绑定起来会发生如上错误. 原因不明. 如果将window的destroy Action与gtk_main_quit绑定是没有问 ...
- Gradle 1.12用户指南翻译——第四十二章. Announce插件
本文由CSDN博客万一博主翻译,其他章节的翻译请参见: http://blog.csdn.net/column/details/gradle-translation.html 翻译项目请关注Githu ...
- mybatis源码之StatementHandler
/** * @author Clinton Begin */ public interface StatementHandler { Statement prepare(Connection conn ...
- error C4996: 'strcpy': This function or variable may be unsafe.
vs2012用strcpy遇到的错误. 错误描述:error C4996: 'strcpy': This function or variable may be unsafe. Consider us ...
- java面试笔试题大汇总
第一,谈谈final, finally, finalize的区别. 最常被问到. 第二,Anonymous Inner Class (匿名内部类) 是否可以extends(继承)其它类,是否可以 ...
- JavaScript脚本放在哪里用户体验好
javascript代码写在<head>里面: 由于这时候网页主体(body)还未加载,所以这里适合放一些不是立即执行的自定义函数,立即执行的语句则很可能会出错(视浏览器而定) javas ...
- eclipse中tomcat内存溢出设置
Eclipse里启动Tomcat,配置内存大小 2009年12月11日 星期五 10:50 一般安装完eclipse之后,在安装目录下你应该可以看到有一个 eclipse.ini 文件,对了,就是在这 ...
- 实例解析Collections源码,Iterator和ListIterator
比如一个视频或文章有多个页面标签设置,我们在看一篇文章或一个视频时,底部有为你推荐栏目. 如何根据这个文章或视频的标签,来实现这个推荐栏目呢. public List<VideoInfoVo&g ...
- ubuntu11.04安装nginx+php+mysql
先列参考内容,后面我再补充点东西: http://www.4wei.cn/archives/1001436 http://www.gidot.net/blog/article.asp?id=322 上 ...