zoukankan      html  css  js  c++  java

  • 你不知道的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, "5b8b4f53", "Arial", sans-serif;
				font-size: 12px;
				color: #eeeeee;
			}

			.container {
				 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;
				 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- 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;
				 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>
  • 相关阅读:
    linux ubuntu 指令
    java tomcat linux 环境变量设置
    ubuntu 窗口操作快捷键
    vim 常用命令
    ubuntu 语言设置
    SQL用户存在则更新不存在则插入
    下载组件Jspsmartupload中文乱码解决办法
    ExtJS学习
    JSP 通过Session和Cookie实现网站自动登录
    SpringMVC XXX-servlet.xml ApplicationContext.xml
  • 原文地址：https://www.cnblogs.com/yangxianyang/p/13675565.html
Copyright © 2011-2022 走看看