目錄

• 效果展示
• 代碼展示

效果展示

相信很多人都自學過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;}

總結

以上是生活随笔為你收集整理的纯css+html实现发光伸缩卡片的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。