效果:
实现:
1.定义父盒子,放入5张图片:
-
Night
-
Night
-
Night
-
Night
-
Night
2.给父亲元素宽,高:
ul{ width: 550px; height: 300px; overflow: hidden; cursor: pointer; }
3.li先默认宽110px:
li{ float: left; width: 110px; height: 300px; list-style: none; transition: all 1s; position: relative; }
img{ height: 100%; width: 450px; }
4.图片下面那个文字通过定义伪类元素定位上去
li::after{ content: 'Night'; position: absolute; bottom: 0; left: 0; width: 450px; height: 30px; line-height: 30px; font-size: 16px; text-align: center; color: rgb(243, 230, 230); background-color: rgba(48, 46, 46,.5); }
5.鼠标经过的li变450px宽,其它li显示25px宽:
ul:hover li{ width: 25px; } ul li:hover{ width: 450px; }
完整代码:
Document *{ margin: 0; padding: 0; box-sizing: border-box; } body{ height: 100vh; display: flex; justify-content: center; align-items: center; background-image: radial-gradient(white,black); } ul{ width: 550px; height: 300px; overflow: hidden; cursor: pointer; } li{ float: left; width: 110px; height: 300px; list-style: none; transition: all 1s; position: relative; } li::after{ content: 'Night'; position: absolute; bottom: 0; left: 0; width: 450px; height: 30px; line-height: 30px; font-size: 16px; text-align: center; color: rgb(243, 230, 230); background-color: rgba(48, 46, 46,.5); } img{ height: 100%; width: 450px; } ul:hover li{ width: 25px; } ul li:hover{ width: 450px; }
-
Night
-
Night
-
Night
-
Night
-
Night
以上就是使用CSS实现百叶窗效果示例代码的详细内容,更多关于CSS实现百叶窗效果的资料请关注IT俱乐部其它相关文章!