效果：
实现：
1.定义父盒子，放入5张图片：
1 |
-
Night -
Night -
Night -
Night -
Night
2.给父亲元素宽，高：
1 2 3 4 5 6 | ul{ width: 550px; height: 300px; overflow: hidden; cursor: pointer; } |
3.li先默认宽110px：
1 2 3 4 5 6 7 8 | li{ float: left; width: 110px; height: 300px; list-style: none; transition: all 1s; position: relative; } |
1 2 3 4 5 | img{ height: 100%; width: 450px; } |
4.图片下面那个文字通过定义伪类元素定位上去
1 2 3 4 5 6 7 8 9 10 11 12 13 | 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宽：
1 2 3 4 5 6 7 | ul:hover li{ width: 25px; } ul li:hover{ width: 450px; } |
完整代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | <title>Document</title> *{ 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俱乐部其它相关文章！
