【css列表卡片】鼠标经过时铺满背景，鼠标离开时缩回到右上角，并且自适应页面

最近做web端的页面，需要做小卡片形式的目录，增加了一些动态效果，当鼠标经过时，铺满背景，鼠标离开时，缩回到右上角色块，并且能适应不同页面，实现自适应，效果如下：

纯css实现效果，代码写的不是很严谨，欢迎小伙伴前来指导，主要用到了以下css属性：

position

这个例子中，.ben-item_link是父级，.ben-item_bg是子级，相对于.ben-item_link定位。

flex-basis

flex-basis 指定了 flex 元素在主轴方向上的初始大小，也就是设置了flex元素的初始长度。

transform

这个例子用到了transform的scale缩放，当鼠标移动到卡片时，放大10倍，背景充满卡片。

:nth-child

CSS中的:nth-child伪类选择器用于选择一组子元素中的特定元素，并对其应用样式。li:nth-child特别用于选择列表中的元素。‌

这个例子中，设置了.ben-item子元素不同的背景颜色。

@media

@media 可以针对不同的屏幕尺寸设置不同的样式，特别是需要设置设计响应式的页面，@media 是非常有用的。

这个例子中，为了让页面适应不同分辨率，设置了@media only screen and (max-width: 979px)，@media only screen and (max-width: 767px)，@media only screen and (max-width: 639px)，并且调整了不同分辨率下一些元素的样式，小伙伴们可以根据自己的项目需求来修改。

页面代码：

			

				

					
						

						
 学习前端 
						
 关注  这个博主
						
					
				
				

					
						

						
 学习前端 
						
 关注  这个博主
						
					
				
				

					
						

						
 学习前端 
						
 关注  这个博主
						
					
				
			
		

Css样式：

实现这个效果，一共需要四层，最外一层控制整体的宽度，第二层包裹着所有卡片，第三层是卡片本身，第四层是a链接，当鼠标触碰到a链接时，背景铺满整个卡片，鼠标离开时，背景缩回右上角，实现效果。

感谢你，能读到这里！