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:

 
 
纯CSS3相册效果
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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:

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

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