使用CSS实现百叶窗效果示例代码
csdn 发布时间：2023-04-28 15:39:20 作者：北极光之夜。 
我要评论
我要评论这篇文章主要介绍了使用CSS实现百叶窗效果示例代码,技术上只使用了css+html,还是非常容易学习的，做出来的百叶窗效果也是很丝滑，文中提供了详细的代码,需要的朋友可以参考下
效果：
实现：
1.定义父盒子，放入5张图片：
<ul>
<li><img src="1.jpg" alt=""><div>Night</div></li>
<li><img src="2.jpg" alt=""><div>Night</div></li>
<li><img src="4.jpg" alt=""><div>Night</div></li>
<li><img src="3.jpg" alt=""><div>Night</div></li>
<li><img src="5.jpg" alt=""><div>Night</div></li>
</ul>
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;
}
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
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;
}
</style>
</head>
<body>
<ul>
<li><img src="1.jpg" alt=""><div>Night</div></li>
<li><img src="2.jpg" alt=""><div>Night</div></li>
<li><img src="4.jpg" alt=""><div>Night</div></li>
<li><img src="3.jpg" alt=""><div>Night</div></li>
<li><img src="5.jpg" alt=""><div>Night</div></li>
</ul>
</body>
</html>
以上就是使用CSS实现百叶窗效果示例代码的详细内容，更多关于CSS实现百叶窗效果的资料请关注脚本之家其它相关文章！
相关文章
这篇文章将介绍如何使用CSS实现交融文字效果，这是一种独特的标题设计，可以增加页面的视觉吸引力和用户体验。通过使用CSS的letter-spacing属性，我们可以创建出字母之间交2023-04-27
这篇文章主要介绍了使用CSS实现音波加载效果,技术上只使用了css+html,还是非常容易学习的，文中提供了详细的代码,需要的朋友可以参考下2023-04-28
这篇文章主要介绍了使用css实现水波加载动画效果,技术上只用到了css+html，还是非常容易学习的，做出来的效果也很不错,需要的朋友可以参考下2023-04-23
本文主要介绍了CSS+JS实现动态翻书效果，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-17
这篇文章主要介绍了CSS实现鼠标悬停svg图标描边效果,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-03-30
本文主要介绍了纯CSS实现了下划线的交互动画效果，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学2023-03-06
按钮在开发中使用的频率非常的高，ui 框架中的按钮组件也都是层出不穷，今天教大家仅用 css 实现一些非常炫酷的按钮效果，感兴趣的朋友跟随小编一起学习吧2023-02-28
现如今网页越来越趋近于动画，相信大家平时浏览网页或多或少都能看到一些动画效果，今天我们来做一个有意思的动画效果，通过 css3 实现元素融合效果，感兴趣的朋友跟随小编2023-02-14
平时我们在浏览网页时，如下图的导航栏已经屡见不鲜了，当鼠标放上去时，右侧隐藏的内容就会慢慢平滑展开，非常美观且实用，今天小编通过本文给大家分享基于CSS实现网页悬2023-02-13
现如今网页越来越趋近于动画，相信大家平时浏览网页或多或少都能看到一些动画效果，今天我们来做一个有意思的动画效果，纯 css 实现 loading 加载中（多种展现形式），下面2023-02-08
最新评论