Code example for making a photo album with H5 and CSS3-H5 Tutorial-php.cn

Code example for making a photo album with H5 and CSS3

Y2J

Release： 2018-05-17 10:59:21

Original

7420 people have browsed it

Pure CSS3 creates a photo album effect, which feels pretty good. I would like to share it with you. The most important thing is that it does not use a single line of js. This is the highlight. Today I accidentally discovered that there is such an example in my computer. I feel that the effect is pretty good. I don’t remember when I downloaded it. I haven’t used w3cfuns for a long time. I miss the days of learning the front desk, so I would like to share it with you.

Rendering:

The effect is still very good. The most important thing is that no line of js is used. This is the highlight.
Look at the html file first:

The code is as follows:

<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>

Copy after login

Describe briefly:
1. li in ul determines the number of photos
2. ul uses the style float :right, width:140px; to display it in the right area of the album
3. li's float: left , so that li can float to the left; the p of the large image is stored in li, position is absolute and will be positioned according to p#gallary. By default, only the first one is displayed 4. When the mouse moves over li, change the transparency of li span img and the display of li p to display the large image
The next step is the css file:

The code is as follows:

<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>

Copy after login

There are no complicated styles in css, so I won’t describe them here. In addition, I introduced a reset style css in html,

reset.css. You can also use your own reset style:

The code is as follows:

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; }

Copy after login

[Related recommendations]

Html5 free video tutorial

H5 code example for making QR code scanning and parsing

Detailed explanation of HTML5 local database instance

Teach you how to implement an H5 micro-scenario

Detailed explanation of H5’s custom attributes data-*

The above is the detailed content of Code example for making a photo album with H5 and CSS3. For more information, please follow other related articles on the PHP Chinese website!