css动画之hamburgers

最新推荐文章于 2024-07-21 19:13:42 发布

肖老师xy

最新推荐文章于 2024-07-21 19:13:42 发布

阅读量241

点赞数 3

文章标签： css 前端

本文链接：https://blog.csdn.net/qq_37004501/article/details/139174191

版权

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