脚本宝典收集整理的这篇文章主要介绍了HTML5 CSS3打造相册效果附源码下载,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
今天偶然发现
电脑里面还有这样的一个例子,感觉效果还不错,不记得啥时候下载的了,也好久没上w3
CFuns了,怀念学习前台的
日子,给大家分享下。
效果图:
&nbs
p;效果是不是还是很不错的,最主要的是没有使用一行js,这才是亮点。
先看ht
ML文件:
<body>
<div id="gallery">
<
h1>纯CSS3相册效果</h1>
<ul>
<li>
<span class="touch"><
img src="images/pic1.
jpg"/></span>
<div style="dis
play: 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,pos
ITion为absolute会根据div
#gallary进行定位,默认只有第一个显示
4、当鼠标移动到li上时,
改变li span img的透明度和li div的display将大图显示
接下来就是css文件:
<style ty
PE="text/css">
body
{
font-f
amily: "
微软雅黑";
}
#gallery
{
width: 700px;
position: relative;
m
argin: 20px auto 0;
background-color: #000;
min-h
eight: 400px;
padding: 20px;
}
/*标题*/
#gallery h1
{
color: #fff;
font-
Size: 2em;
font-weight: bold;
}
#gallery ul
{
width: 140px;
float: right;
mar
gin: 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, ifr
ame, h1, h2, h3, h4, h5, h6, p,
blockquote,
PRe, a, ab
br, acronym, address,
Big, cite, code, del,
DFn, em, font, img, ins, kbd, q, s, samp, small, strike,
strong, s
ub, 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打造相册效果附源码下载全部内容,希望文章能够帮你解决HTML5 CSS3打造相册效果附源码下载所遇到的问题。
如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。