九宫格特效

吃素的黑猫

已于 2023-05-23 21:40:49 修改

阅读量61

点赞数

分类专栏： Web开发——HTML(css) 文章标签： html css css3

于 2023-05-23 20:38:30 首次发布

本文链接：https://blog.csdn.net/qq_44645934/article/details/130834947

版权

Web开发——HTML(css) 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

       <style>
			.img-container {
				width: 300px;
				height: 300px;

				/* 水平垂直居中 */
				margin: auto auto;
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;

				/* 弹性布局 */
				display: flex;
				flex-wrap: wrap;
			}

			.img-container .img-item {
				width: 100px;
				height: 100px;
				background: url('https://img.duoziwang.com/2016/12/08/1534461599.jpg') repeat fixed center;
				position: relative;
				box-sizing: border-box;
			}
			.img-container .img-item:nth-child(3n+1){
				 left: -10px;
			}
			.img-container .img-item:nth-child(3n+3){
				 left: 10px;
			}
			.img-container .img-item:nth-child(-n+3){
				 top: -10px;
			}
			.img-container .img-item:nth-child(n+7){
				 top: 10px;
			}
			.img-container:hover .img-item {
				top: 0;
				left: 0;
			}
		</style>

<div class="img-container">
	<div class="img-item"></div>
	<div class="img-item"></div>
	<div class="img-item"></div>
	<div class="img-item"></div>
	<div class="img-item"></div>
	<div class="img-item"></div>
	<div class="img-item"></div>
	<div class="img-item"></div>
	<div class="img-item"></div>
</div>