照着图做页面

左岸

在刷哔哩哔哩的时候，看到一个比较好看的页面
长这个样子

然后我仿了一个，挺简单。
那么怎么做成这样？
删掉多余代码以及样式
可以看到，盒子分为三部分
一个大盒子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复原即可
其实并不是很完善，有兴趣的可以拿去完善完善。
20243392396[下载].rar

2022-6-19 20:24 上传

文件大小: 3 KB
下载次数: 0