HTML+CSS实现百叶窗效果

    <style>/* 清除默认边距 */*{margin: 0;padding: 0;}/* 去除li的默认样式 */li{list-style: none;}/* 去除a的下划线 */a{text-decoration: none;}/* 清除img撑大3像素问题 */img{display: block;}body{overflow: hidden;background-color: white;}ul{margin: auto;margin-top: 100px;width: 805px;height: 320px;/* 溢出隐藏 */overflow: hidden;display: flex;/* 盒子阴影 */box-shadow: 2px 2px 5px 5px ;}ul li {/* 关键点一：当没有鼠标悬停时，正常宽度为160px */width: 160px;border-left: 1px solid black;position: relative;/* 过渡动画，不会的详见我的博客 css3过渡属性*/transition: 0.5s;box-shadow: -2px 0 5px 1px;}/* 关键点二：当ul上有鼠标悬停时所有的li宽度都变为40px */ul:hover li{width: 40px;}/* 关键点三 ：当某个li上有鼠标悬停时这个li的宽度为640px*/ul li:hover{width: 640px;}/* 设置图片下方半透明黑框以及字体 */ul li a{display: block;width: 640px;position: absolute;bottom: 0;padding: 20px;color: white;font-size: 30px;text-align: left;background-color: rgb(0,0,0,0.5);}</style>
</head>
<body><ul><li><img src="img/img1.jpg" alt=""><a href="">功 夫 熊 猫</a></li><li><img src="img/img2.jpg" alt=""><a href="">玩 具 总 动 员</a></li><li><img src="img/img3.jpg" alt=""><a href="">外 星 人</a></li><li><img src="img/img4.jpg" alt=""><a href="">飞 屋 历 险 记</a></li><li><img src="img/img5.jpg" alt=""><a href="">汽 车 总 动 员</a></li></ul>
</body>

运行结果：

码字不易，点个赞吧~~~

HTML+CSS实现百叶窗效果相关推荐

如何用css实现百叶窗效果
1.效果图利用纯css实现百叶窗效果效果如下: 2.代码如下: 1.创建一个div 2.设置无序列表,插入事先准备好的图片 <!DOCTYPE html> <html lan ...
css简易百叶窗效果
参考样式 <style>.Box {width: 1000px;height: 400px;border: 1px solid #000;margin: 200px auto;transi ...
html百叶窗效果代码,纯CSS 3D百叶窗图像过渡特效
你可能已经在网上看到过不少使用jQuery制作的百叶窗效果,我们可不可以使用纯CSS来完成这项工作呢?答案是肯定的.我们不仅可以制作出这种百叶窗效果,还可以使它具有响应性. 要制作纯CSS的百叶窗效果 ...
css实现图片百叶窗效果
作品很翻车啊: 用css实现了一款百叶窗效果,但是不知道图片不能完全显出来,有谁知道怎样使大的图片自适应小窗口吗,太难了爬... 后续更新一下:只需在css中加入: img{width: 805px; ...
教你用HTML+CSS实现百叶窗动画效果
推荐学习专栏: [JavaWeb]Web前端 JavaWeb学习专栏文章目录前言 1.百叶窗效果 2.原理讲解 3.制作百叶窗 4.资源下载 5.完整代码总结前言我们浏览网页的时候总能看见一 ...
百叶窗设计原理 html5,Html5百叶窗效果的示例代码_html5教程技巧
本篇文章主要介绍了Html5百叶窗效果的示例代码,小编觉得挺不错的,现在分享给大家HTML5源码和解释,也给大家做个参考.对HTML5感兴趣的小伙伴可以一起跟随小编过来看看吧本文介绍了Html5百叶 ...
网页图片实现百叶窗效果
网页图片实现百叶窗效果制作或者观看过幻灯片的网友,一定不会对幻灯片的切换效果感到陌生,垂直百叶窗式.纵向棋盘式等切换效果是否让你还记忆犹新呢?其实我们也可以把网页中的图片做出这种效果. 预想效果: ...
html css鼠标手型效果
html css鼠标手型效果 style="cursor:pointer" 转载于:https://blog.51cto.com/chengang/1288597
纯 CSS 实现波浪效果！
一直以来,使用纯 CSS 实现波浪效果都是十分困难的. 因为实现波浪的曲线需要借助贝塞尔曲线. 而使用纯 CSS 的方式,实现贝塞尔曲线,额,暂时是没有很好的方法. 当然,借助其他力量(SVG.CAN ...

HTML+CSS实现百叶窗效果

HTML+CSS实现百叶窗效果相关推荐

最新文章

热门文章