css实现列表局部放大和压缩效果

最新推荐文章于 2024-04-24 09:59:26 发布

bdawn

最新推荐文章于 2024-04-24 09:59:26 发布

阅读量723

点赞数

分类专栏： css 文章标签： css 列表局部放大 css 压缩效果局部放大

本文链接：https://blog.csdn.net/BDawn/article/details/102465804

版权

css 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

不废话先看效果

在这里插入图片描述

代码分析

布局和js代码

<body>
	<div class="content">
	</div>
	
	<template id="my-temp">
		<div class="temp">
			<div></div>
			<div></div>
		</div>
	</template>

<script>
	if('content' in document.createElement("template")){
		let t = document.querySelector("#my-temp")
		let c = t.content.querySelectorAll("div")[0]
		let items = c.querySelectorAll("div")
		let tb = document.querySelector(".content");
		for(let i = 0;i < 10; i++ ){
			items[0].textContent = i
			items[1].textContent  = '数据' + i
			let clone = document.importNode(t.content, true);
			tb.appendChild(clone)
		}
	}
</script>

</body>

css样式

<style>
		.content{
			height: 500px;
			display: flex;
			margin: 100px;
			flex-direction: column;
			justify-content: space-between;
		}
		
		.temp{
			width: 200px;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			transition-duration: .2s
		}
		
		.temp:hover{
			padding: 3px;
			transform: scale(1.3,1.3);
			box-shadow: 3px 3px 10px rgba(162, 162, 162, 0.6)
		}
	
	</style>

放大效果主要是通过.temp:hover中的transform: scale(1.3,1.3);实现，不多解释
看一下压缩效果的实现方式
首先列表容器样式.content

display: flex;
margin: 100px;
flex-direction: column;
justify-content: space-between;

列表容器设置了justify-content: space-between;样式
在子项的hover样式中调整padding，子项的高度变大，使列表容器的空白空间变小，所以其他子项会向上或向下移动，距离鼠标所在子项越近位移就越明显，所以视觉上会有压缩效果

完整代码

<!DOCTYPE html>
<html lang="zh" >

<head>
	<title>Template</title>
	
	<style>
		.content{
			height: 500px;
			display: flex;
			margin: 100px;
			flex-direction: column;
			justify-content: space-between;
		}
		
		.temp{
			width: 200px;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			transition-duration: .2s
		}
		
		.temp:hover{
			padding: 3px;
			transform: scale(1.3,1.3);
			box-shadow: 3px 3px 10px rgba(162, 162, 162, 0.6)
		}
	
	</style>
</head>

<body>
	<div class="content">
	</div>
	
	<template id="my-temp">
		<div class="temp">
			<div></div>
			<div></div>
		</div>
	</template>

<script>
	if('content' in document.createElement("template")){
		let t = document.querySelector("#my-temp")
		let c = t.content.querySelectorAll("div")[0]
		let items = c.querySelectorAll("div")
		let tb = document.querySelector(".content");
		for(let i = 0;i < 10; i++ ){
			items[0].textContent = i
			items[1].textContent  = '数据' + i
			let clone = document.importNode(t.content, true);
			tb.appendChild(clone)
		}
	}
</script>

</body>

</html>

bdawn

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
css实现列表局部放大和压缩效果

不废话先看效果代码分析布局和js代码<body> <div class="content"> </div> <template id="my-temp"> <div class="temp"> <div></div> <div></div> </d...
复制链接

扫一扫