H5 및 CSS3를 사용하여 사진 앨범을 만드는 코드 예-H5 튜토리얼-php.cn

집

웹 프론트엔드

H5 튜토리얼

H5 및 CSS3를 사용하여 사진 앨범을 만드는 코드 예

Y2J

May 17, 2018 am 10:59 AM

css3 html5 사진 앨범

순수한 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가 float 를 떠날 수 있도록 큰 이미지의 p는 li에 저장되며 position은 절대값입니다. p#gallary에 따라 위치 지정. 기본적으로 첫 번째 것만 표시됩니다
4. li 위로 마우스를 이동하면 lispan img의 투명도와 li p의 표시를 변경하여 큰 이미지를 표시합니다
다음 단계는 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. QR코드 스캔 및 파싱을 위한 H5 코드 예시 🎜>

HTML5 로컬 데이터베이스 인스턴스에 대한 자세한 설명

H5 마이크로 시나리오 구현 방법을 가르쳐줍니다

H5의 커스텀 속성 데이터에 대한 자세한 설명-*

위 내용은 H5 및 CSS3를 사용하여 사진 앨범을 만드는 코드 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.