纯css+html实现发光伸缩卡片

效果展示

相信很多人都自学过css3，基础知识都知道但是没有很深刻的理解。我一直认为想要深刻理解，没有比在项目中应用更有效的方法了。
因为我本身是学后端的，前端css3这块也是最近写后端项目太累了，写写放松一下。废话不多说
先来看一下效果展示


使用css3+html，对整个body实现flex布局
在每个div的before和after属性上实现高斯模糊+颜色线性渐变效果进行渲染，
上下回缩是由hover引起height变化，由过渡时间渲染
对每个图片实现伸缩前后透明度变化

这里有我写好的效果网页，可以自己看一下
闪光伸缩卡片效果展示

代码展示

*{
			     margin: 0;
			     padding: 0;
			}
			body
			{
				/* flex布局 */
				display: flex;
				/* 页面主轴居中排列 */
				justify-content: center;
				/* 一行排不下自动换行 */
				flex-wrap: wrap;
			     /* 纵轴居中排列 */
				align-items: center;
				/* 元素最小高度 整个视窗高度的 1%  弹性布局 */
				min-height: 100vh;
				background-color: #010615;
			}
			 .box
			{
				position: relative;/* 子元素的定位 */
				/* 容器宽高 */
				width: 300px;
				height: 500px;
				/* flex布局 */
				display: flex;
				/* 页面主轴居中排列 */
				justify-content: center;
				align-items: center;
				/* 外边框 */
				margin: 40px;
			    background: #060c21;
				transition: 0.5s;
			} 
			 .box .imagebox
			{
				/* 绝对定位 */
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				/* 内边距 */
				padding: 10px;
			} 
			/* 鼠标放上去时 */
			.box:hover
			{
				height: 600px;
			}
			.box .imagebox img
			{
				max-width: 280px;
			    /* 透明度 */
				opacity: 0.1;
			    /* 持续时间 */
				transition: 0.5s;
			}
			.box:hover .imagebox img
			{
				max-width: 280px;
				opacity:1;
			}
			
			/* box属性之前加一个高斯模糊 */
			.box::before
			{
				/* 必须加入字符串,before和after才能有效果 */
				content: "";
				position: absolute;
				top: -2px;
				left: -2px;
				right: -2px;
				bottom: -2px;
			    background: #FFFFFF;
				z-index: -1;
				/* 给图像加一个高斯模糊 */
				filter: blur(40px);
			}
			
			/* box属性之后加一个高斯模糊 */
			.box::after
			{
				/* 必须加入字符串,before和after才能有效果 */
				content: "";
				position: absolute;
				top: -2px;
				left: -2px;
				right: -2px;
				bottom: -2px;
				 background: #FFFFFF; 
				z-index: -2;
				/* 给图像加一个高斯模糊 */
				filter: blur(40px);
			}
			
			/* 进行渲染 */
			/* box对应的父元素匹配的子元素中的属性 */
			 .box:nth-child(1)::before,.box:nth-child(1)::after
			{
			/* 背景色:线性渐变 */
				background: linear-gradient(235deg,#89ff00,#010615,#00bcd4);
			}
			.box:nth-child(2)::before,.box:nth-child(2)::after
			{
				background: linear-gradient(235deg,#ff005e,#010615,#fbff00);
			}
			.box:nth-child(3)::before,.box:nth-child(3)::after
			{
				background: linear-gradient(235deg,#772aff,#010615,#2196fc);
			} 
			
			.box .content
			{
				position: absolute;
			    height: 90px;
				left: 10px;
				right: 10px;
				bottom: 10px;
				text-align: center;
				display: flex;
				justify-content: center;
				align-items: center;
				/* 设置文字容器为透明 */
				opacity: 0;
				/* 过度的效果,时长 */
				transition: 0.5s;
			}
			
			.box:hover .content
			{
				opacity: 1;
			}
			
			.box .content h2
			{
				font-size: 20px;
				color:  #FFFFFF;
				font-weight: 500;
				line-height: 20px;
				letter-spacing: 1px;
			}
			.box .content h2 span
			{
				font-size: 14px;
				color:  #FFFFFF;
				font-weight: 200;
				line-height: 20px;
				letter-spacing: 1px;
			}