使用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实现的动画加载导航
Oct 08 HTML / CSS
CSS3的resize属性使用初探
Sep 27 HTML / CSS
详解Sticky Footer 绝对底部的两种套路
Nov 03 HTML / CSS
详解rem 适配布局
Oct 31 HTML / CSS
canvas画布实现手写签名效果的示例代码
Apr 23 HTML / CSS
html5 canvas实现圆形时钟代码分享
Dec 25 HTML / CSS
html5画布旋转效果示例
Jan 27 HTML / CSS
HTML5不支持标签和新增标签详解
Jun 27 HTML / CSS
详解HTML5中的拖放事件(Drag 和 drop)
Nov 14 HTML / CSS
html5清空画布方法(三种)
Oct 16 HTML / CSS
CSS文本阴影 text-shadow 悬停效果详解
May 25 HTML / CSS
html原生table实现合并单元格以及合并表头的示例代码
May 07 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多态的实现详解
2013/06/09 PHP
判断php数组是否为索引数组的实现方法
2013/06/13 PHP
PHP 下载文件时自动添加bom头的方法实例
2014/01/10 PHP
PHP实现QQ空间自动回复说说的方法
2015/12/02 PHP
利用ajax和PHP实现简单的流程管理
2017/03/23 PHP
CentOS7编译安装php7.1的教程详解
2019/04/18 PHP
基于php+MySql实现学生信息管理系统实例
2020/08/04 PHP
javascript 常用方法总结
2009/06/03 Javascript
jQuery实现的类flash菜单效果代码
2010/05/17 Javascript
js和php如何获取当前url的内容
2013/09/22 Javascript
JQuery的Ajax请求实现局部刷新的简单实例
2014/02/11 Javascript
jquery实现通用版鼠标经过淡入淡出效果
2014/06/15 Javascript
jQuery对象的selector属性用法实例
2014/12/27 Javascript
js实现模拟银行卡账号输入显示效果
2015/11/18 Javascript
jQueryUI中的datepicker使用方法详解
2016/05/25 Javascript
JS 动态加载js文件和css文件 同步/异步的两种简单方式
2016/09/23 Javascript
jQuery点击头像上传并预览图片
2017/02/23 Javascript
Vue 2.X的状态管理vuex记录详解
2017/03/23 Javascript
浅谈Vue.js中的v-on(事件处理)
2017/09/05 Javascript
Vue仿支付宝支付功能
2018/05/25 Javascript
JavaScript中的连续赋值问题实例分析
2019/07/12 Javascript
javascript this指向相关问题及改变方法
2020/11/19 Javascript
Python处理字符串之isspace()方法的使用
2015/05/19 Python
使用Python的Django框架结合jQuery实现AJAX购物车页面
2016/04/11 Python
python将unicode转为str的方法
2017/06/21 Python
pandas.DataFrame.drop_duplicates 用法介绍
2020/07/06 Python
scrapy处理python爬虫调度详解
2020/11/23 Python
matplotlib相关系统目录获取方式小结
2021/02/03 Python
Omio波兰:全欧洲低价大巴、火车和航班搜索和比价
2018/02/16 全球购物
优秀员工自荐信范文
2013/10/05 职场文书
经销商培训邀请函
2014/01/21 职场文书
元旦晚会策划方案
2014/02/18 职场文书
环保宣传标语
2014/06/12 职场文书
2015年学校食堂工作总结
2015/04/22 职场文书
《世界多美呀》教学反思
2016/02/22 职场文书
python机器学习创建基于规则聊天机器人过程示例详解
2021/11/02 Python