使用html+css实现百叶窗效果
2020-06-04 05:22
633 查看
目录结构
images
2.jpg
3.jpg
4.jpg
5.jpg
bg.png
index.html
- root index.html
- css index.css
-
1.jpg
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width" ,initial-scale=1.0> <title>百叶窗</title> <link rel="stylesheet" href="css/index.css"> <style> </style> </head> <body> <ul class="main"> <li> <img src="images/1.jpg" alt=""> <div class="flag">glint</div> </li> <li> <img src="images/2.jpg" alt=""> <div class="flag">glint</div> </li> <li> <img src="images/3.jpg" alt=""> <div class="flag">glint</div> </li> <li> <img src="images/4.jpg" alt=""> <div class="flag">glint</div> </li> <li> <img src="images/5.jpg" alt=""> <div class="flag">glint</div> </li> </ul> </body> </html>index.css
*{ margin: 0; padding: 0; } ul, ol{ list-style: none; } body{ background:url("../images/bg.png"); } .main{ width: 805px; height: 320px; margin:150px auto; overflow: hidden; } li{ width: 160px; float: left; border-left: 1px solid #fff; position: relative; transition: all 1s; } .flag{ position: absolute; left: 0; bottom: 0; width: 100%; height: 60px; line-height: 60px; text-align: center; color: #fff; background: rgba(0, 0, 0, 0.5); } .main:hover li{ width:40px; } .main li:hover{ width:500px; }
代码参考码小渣
相关文章推荐
- HTML+CSS项目实践五:使用纯CSS实现点击文字切换图片效果(不使用JS)
- 使用html+css实现聚光灯效果
- 使用HTML+CSS实现图片滚动效果
- 使用html+css实现流光效果按钮
- html 使用js+css+html实现图片划过预览效果
- 前端使用html+css,表单型效果自我实现
- 使用HTML+css实现京东图片自动轮播效果(自己写的)
- 使用html+js+css 实现页面轮播图效果(实例讲解)
- 使用Html+Css+js技术编写一个完整的表格列表内容中 实现 复选框的全选 反选效果
- 使用Jquery+CSS实现的表格隔行凸显和当前行高亮效果
- 分享使用jQuery和CSS实现的一个超酷缩略图悬浮逼近效果
- JS与HTML结合使用marquee标签实现无缝滚动效果代码
- CSS实现的排行榜效果,不使用OL
- 使用html+css实现三角标示符号
- 使用HTML和CSS实现大白
- 【ife】任务九:使用HTML/CSS实现一个复杂页面
- 分享使用jQuery和CSS实现的一个超酷缩略图悬浮逼近效果
- 一个小型的网站,比如个人网站,可以使用最简单的html静态页面就实现了,配合一些图片达到美化效果,所有的页面均存放在一个目录下,这样的网站对系统架构、性能的要求都很简单,随着互联网业务的不断丰富,网站
- atitit.按钮光标滑过高亮切换以及其他动态效果的实现css html js --attilax总结
- 使用CSS实现中间镂空的图片遮罩效果