前端练习<Html&CSS>——悬浮抽卡片(附完整代码及实现效果)

avatar
作者
筋斗云
阅读量:0

这个小练习来源于b站up小K师兄,大家可以通过下面的链接学习哦~up讲的非常详细。

写一个好玩的悬浮抽卡片效果~

先看一下效果:

1.鼠标没有放置到card上

2.鼠标放到card上,所有card呈角度散开 

3.单击选中某一张卡片,卡片上浮高亮,其他卡片变暗 

HTML部分

  • <html> 标签定义了整个HTML文档。
  • <head> 标签包含了文档的元数据,如字符编码、标题和样式表。
  • <body> 标签包含了文档的主体内容,即展示给用户看的部分。

CSS部分

  • * 选择器用于选择所有元素,并设置它们的默认样式,包括去除默认的边距、填充、边框、盒模型和字体。
  • body 选择器设置了页面的背景颜色、居中对齐、最小高度和隐藏溢出内容。
  • .container 选择器设置了容器元素的样式,包括相对定位、宽度、居中对齐和居中对齐内容。
  • .card 选择器设置了卡片的样式,包括绝对定位、宽度、高度、背景颜色、边框、过渡效果、旋转原点、颜色、字体大小、字体粗细、阴影等。
  • .container:hover .card 选择器设置了鼠标悬停时卡片的旋转、平移、阴影、颜色和光标样式。
  • .container:active .card:not(:active) 选择器设置了鼠标按下时卡片的背景颜色。
  • .container .card:active 选择器设置了鼠标按下时卡片的平移和层级。

HTML元素

  • <div class="container"> 是一个容器元素,包含了多个卡片元素。
  • <div class="card" style="--i:-4">1</div> 等元素是卡片元素,通过CSS变量 --i 控制旋转角度。

实现原理

这段代码通过CSS的伪类选择器和变量实现了卡片的动态效果。当鼠标悬停在容器上时,卡片会根据CSS变量 --i 的值进行旋转和平移,从而产生动态效果。当鼠标按下时,卡片会改变背景颜色,并进一步平移和提升层级。

完整的代码:

<!DOCTYPE html> <html> 	<head> 		<meta charset="utf-8"> 		<title></title> 		<style type="text/css"> 			* { 				margin: 0; 				padding: 0; 				box-sizing: border-box; 				font-family: 'Poppins', sans-serif; 			}  			body { 				display: flex; 				justify-content: center; 				align-items: center; 				min-height: 100vh; 				background-color: #0f0f0f; 				overflow: hidden;  			}  			.container { 				position: relative; 				width: 100%; 				display: flex; 				justify-content: center; 				align-items: center; 			}   			.container .card { 				/* 设置卡片的位置、大小、背景颜色、边框、过渡效果、旋转原点、颜色、字体大小、字体粗细、阴影 */ 				position: absolute; 				width: 240px; 				height: 360px; 				background-color: #5e5cfc; 				border-radius: 8px; 				display: flex; 				justify-content: center; 				align-items: center; 				color: rgba(0, 0, 0, 0); 				font-size: 8em; 				font-weight: 700; 				border: 10px solid rgba(0, 0, 0, .1); 				transition: .5s; 				transform-origin: 50% 100%; 				filter: hue-rotate(calc(var(--i)*60deg)); 				box-shadow: 0 15px 50px rgba(0, 0, 0, .1); 			}  			.container:hover .card { 				/* 设置鼠标悬停时的卡片旋转、平移、阴影、颜色、光标样式 */ 				transform: rotate(calc(var(--i)*5deg)) translate(calc(var(--i)*120px), -50px); 				box-shadow: 0 15px 50px rgba(0, 0, 0, .25); 				color: rgba(0, 0, 0, .25); 				cursor: pointer; 			}  			.container:active .card:not(:active) { 				/* 设置鼠标按下时的卡片背景颜色 */ 				background-color: #333;  			}  			.container .card:active { 				/* 设置鼠标按下时的卡片平移、层级 */ 				translate: calc(var(--i)*20px) -50px; 				z-index: 999; 			} 		</style> 	</head> 	<body> 		<div class="container"> 			<!-- 设置每个卡片的样式,使用CSS变量--i来控制旋转角度 --> 			<div class="card" style="--i:-4">1</div> 			<div class="card" style="--i:-3">2</div> 			<div class="card" style="--i:-2">3</div> 			<div class="card" style="--i:-1">4</div> 			<div class="card" style="--i:0">5</div> 			<div class="card" style="--i:1">6</div> 			<div class="card" style="--i:2">7</div> 			<div class="card" style="--i:3">8</div> 			<div class="card" style="--i:4">9</div> 		</div>  	</body> </html>

 感谢你的阅读~

如果文章对你有用的话请点个赞支持一下吧~

广告一刻

为您即时展示最新活动产品广告消息,让您随时掌握产品活动新动态!