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

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

2024-07-27 22:07:45 前端知识 前端哥 294 544 我要收藏

这个小练习来源于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>

 感谢你的阅读~

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/14347.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!