使用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
最新评论