纯css实现九宫格带过度效果

最新推荐文章于 2024-09-06 18:18:08 发布

Withered heart

最新推荐文章于 2024-09-06 18:18:08 发布

阅读量148

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_42401135/article/details/127673182

版权

正常效果
在这里插入图片描述
hover时的效果
鼠标停留效果

<!DOCTYPE html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="container">
			<div class="image"></div>
			<div class="image"></div>
			<div class="image"></div>
			<div class="image"></div>
			<div class="image"></div>
			<div class="image"></div>
			<div class="image"></div>
			<div class="image"></div>
			<div class="image"></div>
		</div>
	</body>
</html>
<style>
	body{
		height: 100vh;
		display: flex;
		justify-content: center; /* 相对父元素水平居中 */
		align-items: center;
		background:black;
	}
		.container{
			width: 450px;
			height: 600px;
			display: grid;
			grid-template-columns: repeat(3,1fr);
		}
		.image {
			box-shadow: inset 0 0 0 1px #fff;
			transition: 0.5s;
			background-size: 450px 600px;
			background-image: url(./queen.webp);
			position: relative;
		}
		.image:nth-child(3n+1){
			left: -25px;
			background-position-x: 0;
		}
		.image:nth-child( 3n+2 ){
			left: 0px;
			background-position-x: -150px;
		}
		.image:nth-child( 3n){
			left: 25px;
			background-position-x: -300px;
		}
		.image{
			top: 25px;
			background-position-y: -400px;
		}
		.image:nth-child(-n + 6){
			top: 0;
			background-position-y: -200px;
		}
		.image:nth-child(-n + 3){
			top: -25px;
			background-position-y: 0px;
		}
		.container:hover .image{
			left: 0;
			top:0;
			box-shadow: inset 0 0 0 0px #fff;
		}
		
</style>