前端练习＜Html&CSS＞——悬浮抽卡片（附完整代码及实现效果）
Blusher1 2024-07-31 08:33:05 阅读 96
这个小练习来源于b站up小K师兄，大家可以通过下面的链接学习哦~up讲的非常详细。
写一个好玩的悬浮抽卡片效果～
先看一下效果：
1.鼠标没有放置到card上
2.鼠标放到card上，所有card呈角度散开
3.单击选中某一张卡片，卡片上浮高亮，其他卡片变暗
HTML部分
<code><html> 标签定义了整个HTML文档。<head> 标签包含了文档的元数据，如字符编码、标题和样式表。<body> 标签包含了文档的主体内容，即展示给用户看的部分。
CSS部分
* 选择器用于选择所有元素，并设置它们的默认样式，包括去除默认的边距、填充、边框、盒模型和字体。body 选择器设置了页面的背景颜色、居中对齐、最小高度和隐藏溢出内容。.container 选择器设置了容器元素的样式，包括相对定位、宽度、居中对齐和居中对齐内容。.card 选择器设置了卡片的样式，包括绝对定位、宽度、高度、背景颜色、边框、过渡效果、旋转原点、颜色、字体大小、字体粗细、阴影等。.container:hover .card 选择器设置了鼠标悬停时卡片的旋转、平移、阴影、颜色和光标样式。.container:active .card:not(:active) 选择器设置了鼠标按下时卡片的背景颜色。.container .card:active 选择器设置了鼠标按下时卡片的平移和层级。
HTML元素
<div class="container">code> 是一个容器元素，包含了多个卡片元素。<div class="card" style="--i:-4">1</div>code> 等元素是卡片元素，通过CSS变量 --i 控制旋转角度。
实现原理
这段代码通过CSS的伪类选择器和变量实现了卡片的动态效果。当鼠标悬停在容器上时，卡片会根据CSS变量 --i 的值进行旋转和平移，从而产生动态效果。当鼠标按下时，卡片会改变背景颜色，并进一步平移和提升层级。
完整的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">code>
<title></title>
<style type="text/css">code>
* {
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">code>
<!-- 设置每个卡片的样式，使用CSS变量--i来控制旋转角度 -->
<div class="card" style="--i:-4">1</div>code>
<div class="card" style="--i:-3">2</div>code>
<div class="card" style="--i:-2">3</div>code>
<div class="card" style="--i:-1">4</div>code>
<div class="card" style="--i:0">5</div>code>
<div class="card" style="--i:1">6</div>code>
<div class="card" style="--i:2">7</div>code>
<div class="card" style="--i:3">8</div>code>
<div class="card" style="--i:4">9</div>code>
</div>
</body>
</html>
感谢你的阅读~
如果文章对你有用的话请点个赞支持一下吧~
上一篇： Vue3 - 详细实现下载从服务端返回的文件流 Blob 对象教程，前端下载后端接口返回的文件流并自动保存到本地，支持任何格式的文件下载（从后端拿到二进制文件流 Blob 对象，前端实现点击下载功能）
下一篇： Java WEB管理系统
本文标签
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。