使用CSS实现百叶窗效果示例代码


Posted in HTML / CSS onMay 07, 2023

效果:

使用CSS实现百叶窗效果示例代码

实现:

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实现百叶窗效果的资料请关注三水点靠木其它相关文章!

 
HTML / CSS 相关文章推荐
纯CSS3实现绘制各种图形实现代码详细整理
Dec 26 HTML / CSS
利用纯css3实现的文字亮光特效的代码演示
Nov 27 HTML / CSS
CSS3实现的炫酷菜单代码分享
Mar 12 HTML / CSS
css3 仿写阿里云水纹效果的示例代码
Feb 10 HTML / CSS
CSS3 实现发光边框特效
Nov 11 HTML / CSS
移动端解决悬浮层(悬浮header、footer)会遮挡住内容的3种方法
Mar 27 HTML / CSS
HTML块级标签汇总(小篇)
Jul 13 HTML / CSS
详解移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android和ios)
Dec 15 HTML / CSS
可能这些是你想要的H5软键盘兼容方案(小结)
Apr 23 HTML / CSS
使用postMessage让 iframe自适应高度的方法示例
Oct 08 HTML / CSS
boostrap modal 闪现问题的解决方法
Sep 01 HTML / CSS
HTML5超文本标记语言的实现方法
Sep 24 HTML / CSS
使用CSS实现按钮边缘跑马灯动画
使用CSS实现音波加载效果
table不让td文字溢出操作方法
Dec 24 #HTML / CSS
table设置超出部分隐藏,鼠标移上去显示全部内容的方法
Dec 24 #HTML / CSS
td 内容自动换行 table表格td设置宽度后文字太多自动换行
Dec 24 #HTML / CSS
HTML页面点击按钮关闭页面的多种方式
Dec 24 #HTML / CSS
html用代码制作虚线框怎么做? dw制作虚线圆圈的技巧
Dec 24 #HTML / CSS
You might like
一家之言的经验之谈php+mysql扎实个人基本功
2008/03/27 PHP
一个简单的PHP验证码实现代码
2014/05/10 PHP
php中将一个对象保存到Session中的方法
2015/03/13 PHP
PHP学习笔记(一):基本语法之标记、空白、和注释
2015/04/17 PHP
php封装单文件上传到数据库(路径)
2017/10/15 PHP
Javascript对象中关于setTimeout和setInterval的this介绍
2012/07/21 Javascript
Jquery为单选框checkbox绑定单击click事件
2012/12/18 Javascript
iframe的父子窗口之间的对象相互调用基本用法
2013/09/03 Javascript
纯javascript模仿微信打飞机小游戏
2015/08/20 Javascript
vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)
2017/10/16 Javascript
微信小程序template模版的使用方法
2019/04/13 Javascript
在 Vue 应用中使用 Netlify 表单功能的方法详解
2019/06/03 Javascript
vue中nextTick用法实例
2019/09/11 Javascript
ES6之Proxy的get方法详解
2019/10/11 Javascript
解决Antd Table表头加Icon和气泡提示的坑
2020/11/17 Javascript
原生js实现弹幕效果
2020/11/29 Javascript
vue 通过base64实现图片下载功能
2020/12/19 Vue.js
Python解析nginx日志文件
2015/05/11 Python
python实现微信发送邮件关闭电脑功能
2018/02/22 Python
Python中利用xpath解析HTML的方法
2018/05/14 Python
BP神经网络原理及Python实现代码
2018/12/18 Python
python设定并获取socket超时时间的方法
2019/01/12 Python
html5 音乐播放器 audio 标签使用概述
2013/07/15 HTML / CSS
L*SPACE官网:比基尼、泳装和度假服装
2019/03/18 全球购物
What's the difference between Debug and Trace class? (Debug类与Trace类有什么区别)
2013/09/10 面试题
应聘编辑自荐信范文
2014/03/12 职场文书
学习经验交流会主持词
2014/04/01 职场文书
有关环保的标语
2014/06/13 职场文书
2014年安全生产责任书
2014/07/22 职场文书
行政专员岗位职责范本
2014/08/26 职场文书
关于读书的演讲稿400字
2014/08/27 职场文书
2014年妇幼卫生工作总结
2014/12/09 职场文书
小升初自荐信范文
2015/03/05 职场文书
计划生育目标责任书
2015/05/09 职场文书
sql中mod()函数取余数的用法
2021/05/29 SQL Server
Django模型层实现多表关系创建和多表操作
2021/07/21 Python