九宫格特效

吃素的黑猫

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

阅读量121

点赞数

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

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

本文链接：https://blog.youkuaiyun.com/qq_44645934/article/details/130834947

版权

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

6 篇文章

订阅专栏

这段代码展示了如何使用CSS的弹性盒模型创建一个300pxx300px的图像容器，内部包含9个100pxx100px的图像项。通过设置不同的偏移量和:hover伪类，实现了当鼠标悬停时图片居中的动态效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

       <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>