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

【腾讯云】2核2G4M云服务器新老同享99元/年,续费同价      
[公益] 地球是我家,绿化靠大家      
2024年 劳动节 006
2024年 端午节 046
2025年 元 旦 251
2025年 春 节 279
综合数码金融娱乐服务报刊政府机构 推荐 排名 今日 申请 友情  
您现在的位置:首页 >> 脚本代码 >> 内容
本类新增
本类热门
使用CSS实现有趣的汉堡菜单按钮
内容摘要: html页面!DOCTYPEhtmlhtmllang='zh'headmetacharset='utf-8'linkrel='stylesheet'href='style.css'title汉堡菜单按钮/title/headbodydivclass='app'labelclass='label16'inputclass='inp16'type='checkb......
html页面

<!DOCTYPEhtml>

<htmllang="zh">

<head>

<metacharset="utf-8">

<linkrel="stylesheet"href="style.css">

<title>汉堡菜单按钮</title>

</head>

<body>

<divclass="app">

<labelclass="label16">

<inputclass="inp16"type="checkbox">

<spanclass="line16"></span>

<spanclass="line16"></span>

<spanclass="line16"></span>

</label>

</div>

</body>

</html>

css样式

/**style.css**/

.app{

width:100%;

height:100vh;

background-color:#ffffff;

position:relative;

display:flex;

justify-content:center;

align-items:center;

}

.label16{

width:48px;

height:36px;

display:block;

position:relative;

cursor:pointer;

}

.inp16{

display:none;

}

.line16{

width:inherit;

height:4px;

border-radius:2px;

display:block;

background-color:#3d3d3d;

position:absolute;

top:0;

transition:all0.24sease-in-out;

}

.line16:nth-of-type(2){

top:16px;

}

.line16:nth-of-type(3){

top:32px;

}

.inp16:checked~.line16:nth-of-type(1){

transform:rotate(45deg);

top:16px;

}

.inp16:checked~.line16:nth-of-type(2){

width:0;

}

.inp16:checked~.line16:nth-of-type(3){

transform:rotate(-45deg);

top:16px;

}

版权声明:本内容来源于网络,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。
上一篇:css3实现四周线条环绕流动效果

 

下一篇:使用CSS实现多行文本擦除效果

发布日期:2024/2/26
手机扫二维码直达本页
发布时间:13:25:02
点  击:14
录  入:壹家怡园
相关文章
Baidu
YiJiaCMS 7.3.8 build231228(MSSQL) 闽ICP备05000814号-1
本空间由腾讯云(轻量应用服务器)提供,奇安信网站卫士提供加速防护
运行时间载入中.....