转载请标明出处: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;
}
源码点击下载
分享到:
相关推荐
纯CSS打造相册效果项目完整源码纯CSS打造相册效果项目完整源码纯CSS打造相册效果项目完整源码纯CSS打造相册效果项目完整源码纯CSS打造相册效果项目完整源码纯CSS打造相册效果项目完整源码纯CSS打造相册效果项目完整...
纯CSS3相册效果网页特效 纯CSS3相册效果网页特效 纯CSS3相册效果网页特效 纯CSS3相册效果网页特效 纯CSS3相册效果网页特效
html5 css3 3D立体式图片相册切换 html5 css3 3D立体式图片相册切换
纯CSS打造相册效果项目完整源码,只需要5积分,如有需要,请大家下载!!
高仿小米商城,纯HTML5和CSS3实现 高仿小米商城,纯HTML5和CSS3实现 高仿小米商城,纯HTML5和CSS3实现 高仿小米商城,纯HTML5和CSS3实现 高仿小米商城,纯HTML5和CSS3实现 高仿小米商城,纯HTML5和CSS3...
基于HTML5与CSS3的纯页面, 页面效果看个人喜好, 当然html不是很严格按照标准, 侧重于表现CSS3的新特性
基于css,jquery,html的3D旋转相册,炫酷实用,有效。
纯CSS3按钮3D效果,在鼠标点击按钮时,按钮会有下凹的视觉效果,非常好看。
CSS3-Slider是一款简单的带5种动画过渡效果的纯CSS3幻灯片特效。该幻灯片使用纯CSS3制作,使用非常简单,只需要按指定的格式编写HTML代码,并引入相应的CSS文件即可正常工作。
❤ (撩妹神器) HTML+css3+js 抖音3d旋转相册(生日送女友),动态生成效果,抖音很火的旋转相册,原来是这样制作的~,现在,越来越多的人喜欢用视频记录生活,照片多的友友也会选择制作动态相册视频,不仅创意十足,同时还能...
首先真的非常感谢世界上有了CSS3这么个东西,它使得很多网页特效不再需要依赖javascript脚本代码,使得浏览器执行起来更加方便快捷。但有一点我们得注意,因为目前绝大多数浏览器还是比较“旧”的版本,还不支持CSS3...
HTML5 CSS3实现3D感极强的彩色立体文字源码,这个效果超赞啊,这种三维风格我很喜欢,而且颜色很鲜艳,当然了,字符的颜色可以自己定义,具体请参见HTML演示文件,文字内容的自定义也很方便,在HTML中输入文字内容...
html5 纯css3小鸟飞动效果
代码为博客实例代码 http://blog.csdn.net/lmj623565791/article/details/32964301 有问题博客中留言
Turn.js:基于 HTML5 & CSS3 实现翻书效果,很好的翻书效果插件
Html5+js+CSS3实现3D旋转效果
HTML5与CSS3基础教程(中文第8版) 本书自第1版至今,一直是讲解HTML和CSS入门知识的经典畅销书,全面系统地阐述HTML5和CSS3 基础知识以及实际运用技术,通过大量实例深入浅出地分析了网页制作的方方面面。最新第8版...
HTML+CSS3+jQuery制作的3d相册!!!