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