css动画之hamburgers

动效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>

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值