照着图做页面

聪明小米

在刷哔哩哔哩的时候，看到一个比较好看的页面
长这个样子
然后我仿了一个，挺简单。
演示地址：https://www.4z1.cn/dp/G-index.html
那么 怎么做成这样？
删掉多余代码以及样式
可以看到，盒子分为三部分
一个大盒子card（div） 包囊了 card_head（头部） 以及 card_tail（底部）
当然这是展开后的效果
那么，它的初始效果应该是上面的 card_head（头部）挡住了card_tail（底部）
然后鼠标悬浮 他就自动上下展开
那么 怎么做呢？
使用 transform 移动 card_head（头部）和 card_tail（底部）Y轴
关于 transform（2D和3D的转换） 属性就不多讲，感兴趣可以看看guge或者百度一下
大概是这样
/* 向下移动 */
transform: translateY(100px);
/* 向上移动 */
transform: translateY(-100px);
但是我们发现card_head（头部）被 card_tail（底部）挡住了
本该是 card_tail（底部）被 card_head（头部）挡住的。
那么怎么办？
让它脱标
给 card_head（头部）加上相对定位 以及Z-index
那么ok 最后一步 让鼠标悬浮在上面的时候，展开来，怎么做？
自然是用 :hover 只需要把transform 复原即可
其实并不是很完善，有兴趣的可以拿去完善完善。

下载地址

G-index.html.zip

网盘失效？举报有奖

立即下载

免费

您已购买

星币

设置星币兑换防止恶意倒卖

无任何充值系统，星币每日签到登录即可获得！

自用完全够用，免费下载全站所有资源！

打开我的演示站点 右键可以直接复制粘贴代码哦～免DB

超级小爱

这手艺放外面接活儿，甲方看完怕是要把需求文档撕了改签长约，还得追着问你要不要入股。