你不知道的CSS妙用,纯CSS实现炫酷照片墙

演示地址:https://www.albertyy.com/2020/6/photo.html

原始效果:

鼠标经过效果:

鼠标点击效果:

代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>纯CSS实现照片墙</title>
		<style>
			/*
      *纯CSS实现照片墙:
      *公众号:AlbertYang
      */
			/* RESET */
			* {
				margin: 0;
				padding: 0;
			}

			body {
				font-family: Tahoma, Helvetica, "\5b8b\4f53", "Arial", sans-serif;
				font-size: 12px;
				color: #eeeeee;
			}

			.container {
				width: 90%;
				height: auto;
				margin: 6.25rem auto;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
			}

			.container .img-wrap {
				padding: 10px;
				margin: 10px;
				background: white;
				border: 1px solid #ddd;
				width: 160px;
				height: fit-content;
				box-shadow: 2px 2px 3px rgba(50, 50, 50, 0.4);
				-webkit-transition: all 0.5s ease-in;
				-moz-transition: all 0.5s ease-in;
				-ms-transition: all 0.5s ease-in;
				-o-transition: all 0.5s ease-in;
				transition: all 0.5s ease-in;
				z-index: 1;
				-webkit-filter: blur(1px);
				-moz-filter: blur(1px);
				-ms-filter: blur(1px);
				-o-filter: blur(1px);
				filter: blur(1px);
			}

			.container .img-wrap img {
				max-width: 100%;
				height: auto;
			}

			.container .img-wrap:after {
				content: attr(data-title);
				display: block;
				text-align: center;
				font-size: 15px;
				color: #FCC688;
			}

			.container .img-wrap:nth-child(1n) {
				transform: rotate(-5deg);
				-webkit-transform: rotate(-5deg);
			}

			.container .img-wrap:nth-child(2n) {
				transform: rotate(-20deg);
				-webkit-transform: rotate(-20deg);
			}

			.container .img-wrap:nth-child(3n) {
				transform: rotate(5deg);
				-webkit-transform: rotate(5deg);
			}

			.container .img-wrap:nth-child(4n) {
				transform: rotate(-10deg);
				-webkit-transform: rotate(-10deg);
			}

			.container .img-wrap:nth-child(5n) {
				transform: rotate(-30deg);
				-webkit-transform: rotate(-30deg);
			}

			.container .img-wrap:nth-child(6n) {
				transform: rotate(20deg);
				-webkit-transform: rotate(20deg);
			}

			.container .img-wrap:nth-child(7n) {
				transform: rotate(50deg);
				-webkit-transform: rotate(50deg);
			}

			.container .img-wrap:nth-child(8n) {
				transform: rotate(5deg);
				-webkit-transform: rotate(5deg);
			}

			.container .img-wrap:nth-child(9n) {
				transform: rotate(15deg);
				-webkit-transform: rotate(15deg);
			}

			.container .img-wrap:nth-child(10n) {
				transform: rotate(-15deg);
				-webkit-transform: rotate(-15deg);
			}

			.container .img-wrap:nth-child(11n) {
				transform: rotate(-25deg);
				-webkit-transform: rotate(-25deg);
			}

			.container .img-wrap:hover {
				box-shadow: 15px 15px 20px rgba(50, 50, 50, 0.4);
				transform: rotate(0deg) scale(1.50);
				-webkit-transform: rotate(0deg) scale(1.50);
				z-index: 2;
				position: relative;
				-webkit-filter: blur(0px);
				-moz-filter: blur(0px);
				-ms-filter: blur(0px);
				-o-filter: blur(0px);
				filter: blur(0px);
				cursor: pointer;
			}

			.container .img-wrap:active {
				background: rgba(50, 50, 50, 0.3);
				box-shadow: none;
				border: none;
				width: 100%;
				height: 100%;
				margin: auto;
				text-align: center;
				align-items: center;
				transform: rotate(0deg) translate(-50%, -50%);
				-webkit-transform: rotate(0deg) translate(-50%, -50%);
				-webkit-filter: blur(0px);
				-moz-filter: blur(0px);
				-ms-filter: blur(0px);
				-o-filter: blur(0px);
				filter: blur(0px);
				position: absolute;
				z-index: 3;
				left: 50%;
				top: 50%;
				cursor: zoom-in;
			}

			.container .img-wrap:active img {
				align-items: center;
				max-height: 600px;
				margin-top: 10%;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="img-wrap" data-title="照片1"><img src="http://dingyue.nosdn.127.net/3dI3RPSOI2eBbguqAvd3Tt8qeDZqVfBAIn2RRFktrpNe91512439810577.jpg"></div>
			<div class="img-wrap" data-title="照片2"><img src="http://01.minipic.eastday.com/20170207/20170207145729_d643e7de3fcaf066fe54e19b3293e074_4.jpeg"></div>
			<div class="img-wrap" data-title="照片3"><img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=335766965,268232045&fm=26&gp=0.jpg"></div>
			<div class="img-wrap" data-title="照片4"><img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1119298312,2521482562&fm=26&gp=0.jpg"></div>
			<div class="img-wrap" data-title="照片5"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592929071799&di=41e3159489c46603fbcc0525675ad915&imgtype=0&src=http%3A%2F%2Fimg0.imgtn.bdimg.com%2Fit%2Fu%3D3956123290%2C3155232422%26fm%3D214%26gp%3D0.jpg"></div>
			<div class="img-wrap" data-title="照片6"><img src="http://dingyue.nosdn.127.net/3dI3RPSOI2eBbguqAvd3Tt8qeDZqVfBAIn2RRFktrpNe91512439810577.jpg"></div>
			<div class="img-wrap" data-title="照片7"><img src="http://01.minipic.eastday.com/20170207/20170207145729_d643e7de3fcaf066fe54e19b3293e074_4.jpeg"></div>
			<div class="img-wrap" data-title="照片8"><img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=335766965,268232045&fm=26&gp=0.jpg"></div>
			<div class="img-wrap" data-title="照片9"><img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1119298312,2521482562&fm=26&gp=0.jpg"></div>
			<div class="img-wrap" data-title="照片10"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592929071799&di=41e3159489c46603fbcc0525675ad915&imgtype=0&src=http%3A%2F%2Fimg0.imgtn.bdimg.com%2Fit%2Fu%3D3956123290%2C3155232422%26fm%3D214%26gp%3D0.jpg"></div>
			<div class="img-wrap" data-title="照片1"><img src="http://dingyue.nosdn.127.net/3dI3RPSOI2eBbguqAvd3Tt8qeDZqVfBAIn2RRFktrpNe91512439810577.jpg"></div>
			<div class="img-wrap" data-title="照片2"><img src="http://01.minipic.eastday.com/20170207/20170207145729_d643e7de3fcaf066fe54e19b3293e074_4.jpeg"></div>
			<div class="img-wrap" data-title="照片3"><img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=335766965,268232045&fm=26&gp=0.jpg"></div>
			<div class="img-wrap" data-title="照片4"><img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1119298312,2521482562&fm=26&gp=0.jpg"></div>
			<div class="img-wrap" data-title="照片5"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592929071799&di=41e3159489c46603fbcc0525675ad915&imgtype=0&src=http%3A%2F%2Fimg0.imgtn.bdimg.com%2Fit%2Fu%3D3956123290%2C3155232422%26fm%3D214%26gp%3D0.jpg"></div>
			<div class="img-wrap" data-title="照片6"><img src="http://dingyue.nosdn.127.net/3dI3RPSOI2eBbguqAvd3Tt8qeDZqVfBAIn2RRFktrpNe91512439810577.jpg"></div>
			<div class="img-wrap" data-title="照片7"><img src="http://01.minipic.eastday.com/20170207/20170207145729_d643e7de3fcaf066fe54e19b3293e074_4.jpeg"></div>
			<div class="img-wrap" data-title="照片8"><img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=335766965,268232045&fm=26&gp=0.jpg"></div>
			<div class="img-wrap" data-title="照片9"><img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1119298312,2521482562&fm=26&gp=0.jpg"></div>
			<div class="img-wrap" data-title="照片10"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592929071799&di=41e3159489c46603fbcc0525675ad915&imgtype=0&src=http%3A%2F%2Fimg0.imgtn.bdimg.com%2Fit%2Fu%3D3956123290%2C3155232422%26fm%3D214%26gp%3D0.jpg"></div>
		</div>
	</body>
</html>
©️2020 CSDN 皮肤主题: 创作都市 设计师:CSDN官方博客 返回首页