这个小练习来源于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>感谢你的阅读~
如果文章对你有用的话请点个赞支持一下吧~
