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

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

先看一下效果：

1.鼠标没有放置到card上

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

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

HTML部分

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

CSS部分

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

HTML元素

•  是一个容器元素，包含了多个卡片元素。
• 1
   等元素是卡片元素，通过CSS变量 --i 控制旋转角度。

实现原理

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

完整的代码：

  	 		 		 		 	 	 		
 			 			
1
 			
2
 			
3
 			
4
 			
5
 			
6
 			
7
 			
8
 			
9
 		
  	 

 感谢你的阅读~

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