纯CSS3打造相册效果，感觉还不错，这里与大家分享下，最主要的是没有使用一行js，这才是亮点
今天偶然发现电脑里面还有这样的一个例子，感觉效果还不错，不记得啥时候下载的了，也好久没上w3cfuns了，怀念学习前台的日子，给大家分享下。
效果图：
效果是不是还是很不错的，最主要的是没有使用一行js，这才是亮点。
先看html文件：
代码如下:
<body> <p id=g all ery> <h1>纯CSS3相册效果</h1> <ul> <li> <span class=touch><img src=images/pic1.jpg/></span> <p style= display : block;> <img src=images/pic1.jpg/> </p> </li> <li> <span><img src=images/pic2.jpg/></span> <p> <img src=images/pic2.jpg/> </p> </li> <li> <span><img src=images/pic3.jpg/></span> <p> <img src=images/pic3.jpg/> </p> </li> <li> <span><img src=images/pic4.jpg/></span> <p> <img src=images/pic4.jpg/> </p> </li> <li> <span><img src=images/pic5.jpg/></span> <p> <img src=images/pic5.jpg/> </p> </li> </ul> <p class= clear fix></p> </p> </body>
简单描述一下：
1、ul 中 li决定了照片的个数
2、ul使用样式float:right，width:140px;使得显示在相册的右侧区域
3、li的float：left，使得li可以左浮动；li中存放大图的p，position为absolute会根据p#gallary进行定位，默认只有第一个显示
4、当鼠标移动到li上时，改变li span img的透明度和li p的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 p
{
display: block;
}
#gallery ul li p img
{
width: 460px;
height: 288px;
}
#gallery ul li p
{
display: none;
position: absolute;
top: 100px;
left: 30px;
border: 5px solid #fff;
}
.clearfix
{
clear: both;
}
</style>
css中没有什么复杂的样式，就不做描述了。此外html中我引入了一个重置样式的css , reset.css ，大家也可以使用自己习惯的重置样式：
代码如下:
html, body, p, 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; }
【相关推荐】
1. Html5免费视频教程
2. H5制作二维码扫描和解析的代码实例
3. HTML5本地数据库实例详解
4. 教你如何实现一个H5微场景
5. 详解H5的自定义属性data-*
以上就是H5和CSS3制作一个相册的代码实例的详细内容，更多请关注双恒网络其它相关文章！
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请联系管理员！
8. 精力有限，不少源码未能详细测试（解密），不能分辨部分源码是病毒还是误报，所以没有进行任何修改，大家使用前请进行甄别
9.本站默认解压密码为:www.sudo1.com
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的。
不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。
如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。
我们非常重视版权问题，如有侵权请邮件与我们联系处理。敬请谅解！
云资源网 » H5和CSS3制作一个相册的代码实例
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请联系管理员！
8. 精力有限，不少源码未能详细测试（解密），不能分辨部分源码是病毒还是误报，所以没有进行任何修改，大家使用前请进行甄别
9.本站默认解压密码为:www.sudo1.com
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的。
不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。
如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。
我们非常重视版权问题，如有侵权请邮件与我们联系处理。敬请谅解！
云资源网 » H5和CSS3制作一个相册的代码实例
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 你们有qq群吗怎么加入？
