HTML5 CSS3专题纯CSS打造相册效果的示例代码详解

百变鹏仔 2个月前 (10-18) #H5教程

文章标签示例

html5 css3专题纯css打造相册效果的示例代码详解：

今天偶然发现电脑里面还有这样的一个例子，感觉效果还不错，不记得啥时候下载的了，也好久没上w3cfuns了，怀念学习前台的日子，给大家分享下。

效果图：

效果是不是还是很不错的，最主要的是没有使用一行js，这才是亮点。

先看html文件：

<body><p id="gallery">    <h1>纯CSS3相册效果</h1>    <ul>        <li>            <span class="touch"><img  src="images/pic1.jpg"/ alt="HTML5 CSS3专题  纯CSS打造相册效果的示例代码详解" ></span>            <p style="display: block;">                <img  src="images/pic1.jpg"/ alt="HTML5 CSS3专题  纯CSS打造相册效果的示例代码详解" >            </p>        </li>        <li>            <span><img  src="images/pic2.jpg"/ alt="HTML5 CSS3专题  纯CSS打造相册效果的示例代码详解" ></span>            <p>                <img  src="images/pic2.jpg"/ alt="HTML5 CSS3专题  纯CSS打造相册效果的示例代码详解" >            </p>        </li>        <li>            <span><img  src="images/pic3.jpg"/ alt="HTML5 CSS3专题  纯CSS打造相册效果的示例代码详解" ></span>            <p>                <img  src="images/pic3.jpg"/ alt="HTML5 CSS3专题  纯CSS打造相册效果的示例代码详解" >            </p>        </li>        <li>            <span><img  src="images/pic4.jpg"/ alt="HTML5 CSS3专题  纯CSS打造相册效果的示例代码详解" ></span>            <p>                <img  src="images/pic4.jpg"/ alt="HTML5 CSS3专题  纯CSS打造相册效果的示例代码详解" >            </p>        </li>        <li>            <span><img  src="images/pic5.jpg"/ alt="HTML5 CSS3专题  纯CSS打造相册效果的示例代码详解" ></span>            <p>                <img  src="images/pic5.jpg"/ alt="HTML5 CSS3专题  纯CSS打造相册效果的示例代码详解" >            </p>        </li>    </ul>    <p class="clearfix"></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;}

文章推荐

HTML5 CSS3专题 纯CSS打造相册效果的示例代码详解

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集

HTML5 CSS3专题纯CSS打造相册效果的示例代码详解