html在线练习,HTML5在线教程练习题 - 汉堡菜单变形

刺骨的言语ヽ痛彻心扉 2022-10-06 10:58 104阅读 0赞

CSS

语言：

CSSSCSS

确定

\* \{

padding: 0;

margin: 0;

body \{

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

\-webkit-box-pack: center;

\-webkit-justify-content: center;

\-ms-flex-pack: center;

justify-content: center;

\-webkit-box-align: center;

\-webkit-align-items: center;

\-ms-flex-align: center;

align-items: center;

width: 100%;

height: 100vh;

button.burger \{

width: 60px;

height: 30px;

border: none;

background: transparent;

position: relative;

cursor: pointer;

margin: 50px;

button.burger:focus \{

outline: none;

button.burger.burger1:after,

button.burger.burger1:before,

button.burger.burger1 span \{

width: 100%;

height: 4px;

border-radius: 100px;

position: absolute;

left: 0px;

background: \#923cbe;

button.burger.burger1:after,

button.burger.burger1:before \{

content: "";

button.burger.burger1:after \{

top: 0px;

margin-top: 0px;

\-webkit-transition: 0.2s all 0.4s, -webkit-transform 0.2s;

transition: 0.2s all 0.4s, -webkit-transform 0.2s;

transition: transform 0.2s, 0.2s all 0.4s;

transition: transform 0.2s, 0.2s all 0.4s, -webkit-transform 0.2s;

button.burger.burger1:before \{

bottom: 0px;

margin-bottom: 0px;

\-webkit-transition: 0.2s all 0.4s, -webkit-transform 0.2s;

transition: 0.2s all 0.4s, -webkit-transform 0.2s;

transition: transform 0.2s, 0.2s all 0.4s;

transition: transform 0.2s, 0.2s all 0.4s, -webkit-transform 0.2s;

button.burger.burger1 span \{

top: 50%;

margin-top: -2px;

visibility: visible;

opacity: 1;

\-webkit-transition: opacity 0.2s, svisibility 0.2s;

transition: opacity 0.2s, svisibility 0.2s;

button.burger.burger1.on:after \{

\-webkit-transform: rotate(45deg);

transform: rotate(45deg);

top: 50%;

margin-top: -2px;

\-webkit-transition: all 0.2s, 0.2s transform 0.4s;

transition: all 0.2s, 0.2s transform 0.4s;

button.burger.burger1.on:before \{

\-webkit-transform: rotate(-45deg);

transform: rotate(-45deg);

bottom: 50%;

margin-bottom: -2px;

\-webkit-transition: all 0.2s, 0.2s transform 0.4s;

transition: all 0.2s, 0.2s transform 0.4s;

button.burger.burger1.on span \{

visibility: hidden;

\-webkit-transition: opacity 0.4s, visibility 0.4s;

transition: opacity 0.4s, visibility 0.4s;

opacity: 0;

button.burger.burger2:after,

button.burger.burger2:before,

button.burger.burger2 span \{

width: 100%;

height: 4px;

border-radius: 100px;

position: absolute;

display: block;

background: \#923cbe;

button.burger.burger2:after,

button.burger.burger2:before \{

content: "";

\-webkit-transition: 0.3s width 0.4s;

transition: 0.3s width 0.4s;

button.burger.burger2:after \{

top: 0px;

left: 0px;

margin-top: 0px;

button.burger.burger2:before \{

bottom: 0px;

right: 0px;

margin-bottom: 0px;

button.burger.burger2 span \{

top: 50%;

margin-top: -2px;

\-webkit-transition: -webkit-transform 0.3s;

transition: -webkit-transform 0.3s;

transition: transform 0.3s;

transition: transform 0.3s, -webkit-transform 0.3s;

button.burger.burger2 span:before \{

content: "";

background: \#923cbe;

width: 100%;

height: 4px;

border-radius: 100px;

position: absolute;

left: 0px;

\-webkit-transition: -webkit-transform 0.3s;

transition: -webkit-transform 0.3s;

transition: transform 0.3s;

transition: transform 0.3s, -webkit-transform 0.3s;

button.burger.burger2.on:after \{

\-webkit-transition: all 0.2s;

transition: all 0.2s;

width: 0%;

left: 0px;

button.burger.burger2.on:before \{

\-webkit-transition: all 0.2s;

transition: all 0.2s;

width: 0%;

right: 0px;

button.burger.burger2.on span \{

\-webkit-transform: rotate(45deg);

transform: rotate(45deg);

\-webkit-transition: 0.3s transform 0.4s;

transition: 0.3s transform 0.4s;

button.burger.burger2.on span:before \{

\-webkit-transform: rotate(-90deg);

transform: rotate(-90deg);

\-webkit-transition: 0.3s transform 0.4s;

transition: 0.3s transform 0.4s;

button.burger.burger3:after,

button.burger.burger3:before,

button.burger.burger3 span \{

width: 100%;

height: 4px;

border-radius: 100px;

position: absolute;

left: 0px;

background: \#923cbe;

\-webkit-transform: rotate(0deg);

transform: rotate(0deg);

button.burger.burger3:after,

button.burger.burger3:before \{

content: "";

button.burger.burger3:after \{

top: 0px;

margin-top: 0px;

\-webkit-transition: 0.2s all 0.4s, -webkit-transform 0.2s;

transition: 0.2s all 0.4s, -webkit-transform 0.2s;

transition: transform 0.2s, 0.2s all 0.4s;

transition: transform 0.2s, 0.2s all 0.4s, -webkit-transform 0.2s;

button.burger.burger3:before \{

bottom: 0px;

margin-bottom: 0px;

button.burger.burger3 span \{

top: 50%;

margin-top: -2px;

\-webkit-transition: all 0.2s;

transition: all 0.2s;

button.burger.burger3.on:after \{

\-webkit-transform: rotate(-135deg) translate(-10px, -10px);

transform: rotate(-135deg) translate(-10px, -10px);

\-webkit-transition: all 0.2s;

transition: all 0.2s;

button.burger.burger3.on:before \{

\-webkit-transform: rotate(-135deg) translate(-10px, -10px);

transform: rotate(-135deg) translate(-10px, -10px);

bottom: 50%;

margin-bottom: -2px;

\-webkit-transition: all 0.2s;

transition: all 0.2s;

button.burger.burger3.on span \{

\-webkit-transform: rotate(135deg);

transform: rotate(135deg);

html在线练习,HTML5在线教程练习题 - 汉堡菜单变形

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 html在线练习,HTML5在线教程练习题 - 汉堡菜单变形

相关 html5 在线编辑图片大小,html5画布编辑图片问题

相关 html怎么让左菜单置顶,html5水平滑动菜单 html5 浮动侧滑菜单栏怎样实现

相关【Html5每日练习】canvas笑脸

相关【html5每日练习】 html5 canvas "米"

相关【html5每日练习】html5 canvas画线

相关 HTML HTML 教程 (HTML5 标准) (stage1-8)

相关 HTML5在线摄像头应用

相关 html、css练习题

相关 HTML5练习题