念念不忘
必有回响

B站网页特效学习 — 自适应相册

看到B站讲的不错的网页特效视频,在GitHub也有分享的demo,顺便记录一下总结,需要引入的CDN资源

<!-- font-awesome -->
<link href="https://cdn.bootcss.com/font-awesome/5.8.0/css/all.css" rel="stylesheet" />

自适应相册演示:demo

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>自适应相册</title>
		<link href="https://cdn.bootcss.com/magnific-popup.js/1.1.0/magnific-popup.min.css" rel="stylesheet" />
		<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
		<script src="https://cdn.bootcss.com/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
		<style>
			* {
				margin: 0;
				padding: 0;
				font-family: 'montserrat', sans-serif;
				box-sizing: border-box;
			}
			.gallery-section {
				width: 100%;
				padding: 60px 0;
				background: #f1f1f1;
			}
			.inner-width {
				width: 100%;
				max-width: 1200px;
				margin: auto;
				padding: 0 20px;
			}
			.gallery-section h1 {
				text-align: center;
				text-transform: uppercase;
				color: #333;
			}
			.border {
				width: 180px;
				height: 4px;
				background: #333;
				margin: 60px auto;
			}
			.gallery-section .gallery {
				display: flex;
				flex-wrap: wrap-reverse;
				justify-content: center;
			}
			.gallery-section .image {
				flex: 25%;
				overflow: hidden;
				cursor: pointer;
			}
			.gallery-section .image img {
				width: 100%;
				height: 100%;
				transition: 0.4s;
			}
			.gallery-section .image:hover img {
				transform: scale(1.4) rotate(15deg);
			}
			@media screen and (max-width: 960px) {
				.gallery-section .image {
					flex: 33.33%;
				}
			}
			@media screen and (max-width: 768px) {
				.gallery-section .image {
					flex: 50%;
				}
			}
			@media screen and (max-width: 480px) {
				.gallery-section .image {
					flex: 100%;
				}
			}
		</style>
	</head>
	<body>
		<div class="gallery-section">
			<div class="inner-width">
				<h1>My Gallery</h1>
				<div class="border"></div>
				<div class="gallery">
					<a href="../images/71.jpg" class="image">
						<img src="../images/71.jpg" alt="" />
					</a>
					<a href="../images/93.jpg" class="image">
						<img src="../images/93.jpg" alt="" />
					</a>
					<a href="../images/104.jpg" class="image">
						<img src="../images/104.jpg" alt="" />
					</a>
					<a href="../images/114.jpg" class="image">
						<img src="../images/114.jpg" alt="" />
					</a>
					<a href="../images/156.jpg" class="image">
						<img src="../images/156.jpg" alt="" />
					</a>
					<a href="../images/171.jpg" class="image">
						<img src="../images/171.jpg" alt="" />
					</a>
					<a href="../images/264.jpg" class="image">
						<img src="../images/264.jpg" alt="" />
					</a>
					<a href="../images/265.jpg" class="image">
						<img src="../images/265.jpg" alt="" />
					</a>
				</div>
			</div>
		</div>
		<script>
			$('.gallery').magnificPopup({
				delegate: 'a',
				type: 'image',
				gallery: {
					enabled: true
				}
			})
		</script>
	</body>
</html>

效果图:

赞(0) 打赏
未经允许不得转载:小蚁上树 » B站网页特效学习 — 自适应相册
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址