CSS3로 아름다운 사진 벽을 만들기 위한 구현 코드 공유-CSS 튜토리얼-php.cn

CSS3로 아름다운 사진 벽을 만들기 위한 구현 코드 공유

高洛峰

풀어 주다： 2017-03-09 10:36:32

원래의

3642명이 탐색했습니다.

CSS3로 애니메이션을 만들 수 있다는 사실은 다들 잘 아실 텐데요. 그런데 이 기능을 교묘하게 사용하여 아름다운 포토 월을 만들어 본 적이 있나요?

그래서 오늘은 CSS3 애니메이션 기능을 사용하여 함께 아름다운 포토 월을 만들어 보겠습니다!

CSS3로 아름다운 사진 벽을 만들기 위한 구현 코드 공유

1부: HTML

여기서 먼저 페이지에 10개의 사진을 넣습니다. (예쁜 사진 있으면 올려주세요!)

아아아아

2부: CSS3

이 부분 is us 이 섹션의 초점은 위 그림과 같이 사진의 위치가 다르다는 것입니다. 우리는 CSS3의 다음 지식 포인트를 확실히 사용할 것입니다:

•CSS3 회전 회전
•CSS3 스케일
•CSS3 섀도우 박스-섀도

예, 이러한 기능을 사용하면 아름다운 사진 벽을 만들 수 있습니다. 여기에는 코드의 일부만 표시되어 있습니다. 똑똑한 친구들은 어떻게 하는지 알아야 합니다!

<p class="content">
    <img  class="pic1" src="img/1.jpg" / alt="CSS3로 아름다운 사진 벽을 만들기 위한 구현 코드 공유" >
    <img  class="pic2" src="img/2.jpg" / alt="CSS3로 아름다운 사진 벽을 만들기 위한 구현 코드 공유" >
    <img  class="pic3" src="img/3.jpg" / alt="CSS3로 아름다운 사진 벽을 만들기 위한 구현 코드 공유" >
    <img  class="pic4" src="img/4.jpg" / alt="CSS3로 아름다운 사진 벽을 만들기 위한 구현 코드 공유" >
    <img  class="pic5" src="img/5.jpg" / alt="CSS3로 아름다운 사진 벽을 만들기 위한 구현 코드 공유" >
    <img  class="pic6" src="img/6.jpg" / alt="CSS3로 아름다운 사진 벽을 만들기 위한 구현 코드 공유" >
    <img  class="pic7" src="img/7.jpg" / alt="CSS3로 아름다운 사진 벽을 만들기 위한 구현 코드 공유" >
    <img  class="pic8" src="img/8.jpg" / alt="CSS3로 아름다운 사진 벽을 만들기 위한 구현 코드 공유" >
    <img  class="pic9" src="img/9.jpg" / alt="CSS3로 아름다운 사진 벽을 만들기 위한 구현 코드 공유" >
    <img  class="pic10" src="img/10.jpg" / alt="CSS3로 아름다운 사진 벽을 만들기 위한 구현 코드 공유" >
 </p>

로그인 후 복사

이런 간단한 코드만으로도 위 그림과 같은 효과를 얻을 수 있습니다. 관심이 있으시면 직접 시도해보고 아름다운 사진을 게시하여 보실 수 있습니다.

PS: CSS3를 사용하면 더욱 멋지고 멋진 효과를 만들 수도 있습니다. 관심이 있으시면 깊이 있게 공부해 보세요!

위 CSS3로 아름다운 포토 월을 만들기 위한 구현 코드는 모두 편집자가 공유한 내용이므로 참고가 되셨으면 좋겠습니다. PHP 중국어 홈페이지에도 많은 지원 부탁드립니다.

위 내용은 CSS3로 아름다운 사진 벽을 만들기 위한 구현 코드 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!