您正在使用 IPV4 [3.239.96.229] 访问本站,您本次已经查看了 1 页
用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器
悟空收录网       [公益]保护绿色环境,构建和谐社会      

【腾讯云】 爆款2核2G3M云服务器首年 61元,叠加红包再享折上折      
[公益] 地球是我家,绿化靠大家      
2024年 清明节 006
2024年 劳动节 033
2025年 元 旦 278
2025年 春 节 306
 
您现在的位置:首页 >> 脚本代码 >> 内容
本类新增
本类热门
使用CSS实现百叶窗效果示例代码
内容摘要: !DOCTYPEhtmlhtmllang='en'headmetacharset='UTF-8'metaname='viewport'content='width=device-width,initial-scale=1.0'titleDocument/titlestyle*{margin:0;padding:0;box-sizing:border-box;......
<!DOCTYPEhtml>

<htmllang="en">

<head>

<metacharset="UTF-8">

<metaname="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:all1s;

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:hoverli{

width:25px;

}

ulli:hover{

width:450px;

}

</style>

</head>

<body>

<ul>

<li><imgsrc="1.jpg"alt=""><div>Night</div></li>

<li><imgsrc="2.jpg"alt=""><div>Night</div></li>

<li><imgsrc="4.jpg"alt=""><div>Night</div></li>

<li><imgsrc="3.jpg"alt=""><div>Night</div></li>

<li><imgsrc="5.jpg"alt=""><div>Night</div></li>

</ul>

</body>

</html>

版权声明:本内容来源于网络,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。
上一篇:JS实现的邮箱提示补全效果

 

下一篇:使用CSS实现按钮边缘跑马灯动画

发布日期:2023/5/2
手机扫二维码直达本页
发布时间:13:01:48
点  击:11
录  入:壹家怡园
相关文章
Baidu
YiJiaCMS 7.3.8 build231228(MSSQL) 闽ICP备05000814号-1
本空间由腾讯云(轻量应用服务器)提供,Cloudflare提供加速防护
运行时间载入中.....