使用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学习之2D转换功能详解
Dec 23 HTML / CSS
CSS3中Color的一些特性介绍
May 27 HTML / CSS
css3.0 图形构成实例练习一
Mar 19 HTML / CSS
初探CSS3中的calc()功能
Jul 14 HTML / CSS
可自定义箭头样式的CSS3气泡提示框
Mar 16 HTML / CSS
使用css实现android系统的loading加载动画
Jul 25 HTML / CSS
HTML5实现锚点时请使用id取代name
Sep 06 HTML / CSS
canvas需要在标签里直接定义宽高
Dec 17 HTML / CSS
谈一谈HTML5本地存储技术
Mar 02 HTML / CSS
html+js 实现markdown编辑器效果
Oct 23 HTML / CSS
CSS 圆形进度栏
Apr 06 HTML / CSS
为什么你写的height:100%不起作用
May 10 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
人大复印资料处理程序_输入篇
2006/10/09 PHP
PHP性能优化 产生高度优化代码
2011/07/22 PHP
基于php-fpm 参数的深入理解
2013/06/03 PHP
Linux系统递归生成目录中文件的md5的方法
2015/06/29 PHP
PHP7引入的&quot;??&quot;和&quot;?:&quot;的区别讲解
2019/04/08 PHP
深入分析PHP设计模式
2020/06/15 PHP
JS正则表达式获取分组内容的方法详解
2013/11/15 Javascript
jQuery中 prop() attr()使用详解
2015/05/19 Javascript
JS中位置与大小的获取方法
2016/11/22 Javascript
解析利用javascript如何判断一个数为素数
2016/12/08 Javascript
JavaScript获取URL参数的方法之一
2017/03/24 Javascript
使用Math.max,Math.min获取数组中的最值实例
2017/04/25 Javascript
深究AngularJS——ng-checked(回写:带真实案例代码)
2017/06/13 Javascript
jQuery Validate插件ajax方式验证输入值的实例
2017/12/21 jQuery
一步快速解决微信小程序中textarea层级太高遮挡其他组件
2019/03/04 Javascript
layui表格数据复选框回显设置方法
2019/09/13 Javascript
原生JS无缝滑动轮播图
2019/10/22 Javascript
vue3 源码解读之 time slicing的使用方法
2019/10/31 Javascript
[02:39]DOTA2国际邀请赛助威团西雅图第一天
2013/08/08 DOTA
[49:27]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第一场
2018/04/05 DOTA
python分割和拼接字符串
2013/11/01 Python
python使用nntp读取新闻组内容的方法
2015/05/08 Python
详解Python中dict与set的使用
2015/08/10 Python
用python做一个搜索引擎(Pylucene)的实例代码
2017/07/05 Python
Python动态参数/命名空间/函数嵌套/global和nonlocal
2019/05/29 Python
HTML5拖放API实现自动生成相框功能
2020/04/07 HTML / CSS
购买澳大利亚最好的服装和内衣在线:BONDS
2016/10/14 全球购物
欧洲最大的高尔夫零售商:American Golf
2019/09/02 全球购物
大学生自我鉴定
2013/12/16 职场文书
库房管理员岗位职责
2014/03/09 职场文书
体育教师求职信
2014/05/24 职场文书
模特大赛策划方案
2014/05/28 职场文书
上级领导检查欢迎词
2015/09/30 职场文书
观看《杨善洲》宣传教育片心得体会
2016/01/23 职场文书
javascript数组includes、reduce的基本使用
2021/07/02 Javascript
「月刊Action」2022年5月号封面公开
2022/03/21 日漫