动效1
代码如下：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><div><label class="hamburger"><input type="checkbox"><svg viewBox="0 0 32 32"><path class="line line-top-bottom"d="M27 10 13 10C10.8 10 9 8.2 9 6 9 3.5 10.8 2 13 2 15.2 2 17 3.8 17 6L17 26C17 28.2 18.8 30 21 30 23.2 30 25 28.2 25 26 25 23.8 23.2 22 21 22L7 22"></path><path class="line" d="M7 16 27 16"></path></svg></label></div></body><style>html {background-color: #000;}.hamburger {cursor: pointer;}.hamburger input {display: none;}.hamburger svg {height: 3em;transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);}.line {fill: none;stroke: white;stroke-linecap: round;stroke-linejoin: round;stroke-width: 3;transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);}.line-top-bottom {stroke-dasharray: 12 63;}.hamburger input:checked+svg {transform: rotate(-45deg);}.hamburger input:checked+svg .line-top-bottom {stroke-dasharray: 20 300;stroke-dashoffset: -32.42;}</style>
</html>动效2
代码如下：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><input id="checkbox" type="checkbox"><label class="toggle" for="checkbox"><div id="bar1" class="bars"></div><div id="bar2" class="bars"></div><div id="bar3" class="bars"></div></label><style>html {background-color: #000;}#checkbox {display: none;}.toggle {position: relative;width: 30px;height: 30px;cursor: pointer;display: flex;flex-direction: column;align-items: center;justify-content: center;gap: 7px;transition-duration: .5s;}.bars {width: 100%;height: 4px;background-color: #fff;border-radius: 4px;}#bar2 {transition-duration: .8s;}#checkbox:checked+.toggle .bars {position: absolute;transition-duration: .5s;}#checkbox:checked+.toggle #bar2 {transform: scaleX(0);transition-duration: .5s;}#checkbox:checked+.toggle #bar1 {width: 100%;transform: rotate(45deg);transition-duration: .5s;}#checkbox:checked+.toggle #bar3 {width: 100%;transform: rotate(-45deg);transition-duration: .5s;}#checkbox:checked+.toggle {transition-duration: .5s;transform: rotate(180deg);}</style></body>
</html>动效3
代码如下：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><label class="menuButton" for="check"><input type="checkbox" id="check"><span class="top"></span><span class="mid"></span><span class="bot"></span></label><style>html {background-color: #000;}.menuButton {display: flex;justify-content: center;align-items: center;flex-direction: column;gap: 7px;width: 30px;height: 30px;}input[type="checkbox"] {-webkit-appearance: none;display: none;visibility: hidden;}.menuButton span {width: 30px;height: 4px;background: #fff;border-radius: 100px;transition: 0.3s ease;}input[type]:checked~span.top {transform: translateY(290%) rotate(45deg);width: 40px;}input[type]:checked~span.bot {transform: translateY(-270%) rotate(-45deg);width: 40px;}input[type]:checked~span.mid {transform: translateX(-20px);opacity: 0;}</style></body>
</html>动效4
代码如下：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><input type="checkbox" id="checkbox"><label for="checkbox" class="toggle"><div class="bars" id="bar1"></div><div class="bars" id="bar2"></div><div class="bars" id="bar3"></div></label><style>html {background-color: #000;}#checkbox {display: none;}.toggle {position: relative;width: 30px;height: 30px;cursor: pointer;display: flex;flex-direction: column;align-items: center;justify-content: center;gap: 7px;transition-duration: .3s;}.bars {width: 100%;height: 4px;background-color: #fff;border-radius: 5px;transition-duration: .3s;}#checkbox:checked+.toggle .bars {margin-left: 13px;}#checkbox:checked+.toggle #bar2 {transform: rotate(135deg);margin-left: 0;transform-origin: center;transition-duration: .3s;opacity: 0;}#checkbox:checked+.toggle #bar1 {transform: rotate(45deg);transition-duration: .3s;transform-origin: left center;}#checkbox:checked+.toggle #bar3 {transform: rotate(-45deg);transition-duration: .3s;transform-origin: left center;}</style></body>
</html>动效5
代码如下：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><label for="menu-icon" class="menu-icon"><input id="menu-icon" type="checkbox" /><span></span><span></span><span></span></label><style>html {background-color: #000;}.menu-icon {width: 30px;height: 30px;cursor: pointer;display: flex;flex-direction: column;justify-content: center;align-items: center;gap: 7px;}.menu-icon input {display: none;}.menu-icon span {height: 4px;width: 30px;background: #fff;border-radius: 10px;transition: 0.3s ease-in-out;}.menu-icon span {transform-origin: left center;}.menu-icon input:checked~span {background: #fff;}.menu-icon input:checked~span:nth-of-type(1) {transform: rotate(45deg);}.menu-icon input:checked~span:nth-of-type(2) {opacity: 0;}.menu-icon input:checked~span:nth-of-type(3) {transform: rotate(-45deg);}</style></body>
</html>动效6
代码如下：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><input id="toggleChecker" type="checkbox"><label id="togglerLable" for="toggleChecker"><div class="checkboxtoggler"><div class="line-1"></div><div class="line-2"></div><div class="line-3"></div></div></label><style>html {background-color: #000;}.checkboxtoggler {width: 30px;height: 30px;display: flex;flex-direction: column;align-items: center;justify-content: center;gap: 7px;cursor: pointer;}.line-1 {background: #fff;width: 30px;height: 4px;border-radius: 10px;transition-duration: 500ms;}.line-2 {background: #fff;width: 30px;height: 4px;border-radius: 10px;transition-duration: 500ms;}.line-3 {background: #fff;width: 30px;height: 4px;border-radius: 10px;transition-duration: 500ms;}#toggleChecker {height: 4px;width: 100%;display: none;}#toggleChecker:checked+#togglerLable .checkboxtoggler .line-1 {transform: rotate(45deg) translateY(8px) translateX(8px);}#toggleChecker:checked+#togglerLable .checkboxtoggler .line-2 {transform: rotate(-45deg) translateY(0px) translateX(0px);}#toggleChecker:checked+#togglerLable .checkboxtoggler .line-3 {transform: scaleX(0);transform-origin: left;}</style></body>
</html>
