在刷哔哩哔哩的时候,看到一个比较好看的页面 长这个样子 然后我仿了一个,挺简单。 演示地址: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 复原即可 其实并不是很完善,有兴趣的可以拿去完善完善。 |
[NeadPay]
HOT