svg菜单图标和关闭图标动态切换

最新推荐文章于 2022-09-21 10:56:30 发布

console.log( )

最新推荐文章于 2022-09-21 10:56:30 发布

阅读量832

点赞数

分类专栏：前端文章标签： css3 动画

本文链接：https://blog.csdn.net/kingjordon/article/details/116522480

版权

前端专栏收录该内容

50 篇文章 4 订阅

订阅专栏

下面的代码是网站第一个例子

svg动画

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
		<style type="text/css">
			body {
			  align-items: center;
			  display: flex;
			  height: 100%;
			  justify-content: center;
			  margin: 0;
			  overflow: hidden;
			  position: absolute;
			  width: 100%;
			}
			.ham {
			  cursor: pointer;
			  -webkit-tap-highlight-color: transparent;
			  transition: transform 400ms;
			  -moz-user-select: none;
			  -webkit-user-select: none;
			  -ms-user-select: none;
			  user-select: none;
			}
			.hamRotate.active {
			  transform: rotate(45deg);
			}
			.hamRotate180.active {
			  transform: rotate(180deg);
			}
			.line {
			  fill:none;
			  transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
			  stroke:#000;
			  stroke-width:5.5;
			  stroke-linecap:round;
			}
			.ham1 .top {
			  stroke-dasharray: 40 139;
			}
			.ham1 .bottom {
			  stroke-dasharray: 40 180;
			}
			.ham1.active .top {
			  stroke-dashoffset: -98px;
			}
			.ham1.active .bottom {
			  stroke-dashoffset: -138px;
			}
		</style>
	</head>
	<body>
		<svg class="ham hamRotate ham1" viewBox="0 0 100 100" width="80" onclick="this.classList.toggle('active')">
		  <path
		        class="line top"
		        d="m 30,33 h 40 c 0,0 9.044436,-0.654587 9.044436,-8.508902 0,-7.854315 -8.024349,-11.958003 -14.89975,-10.85914 -6.875401,1.098863 -13.637059,4.171617 -13.637059,16.368042 v 40" />
		  <path
		        class="line middle"
		        d="m 30,50 h 40" />
		  <path
		        class="line bottom"
		        d="m 30,67 h 40 c 12.796276,0 15.357889,-11.717785 15.357889,-26.851538 0,-15.133752 -4.786586,-27.274118 -16.667516,-27.274118 -11.88093,0 -18.499247,6.994427 -18.435284,17.125656 l 0.252538,40" />
		</svg>
	</body>
</html>

console.log( )

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
svg菜单图标和关闭图标动态切换

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <style type="text/css"> bo...
复制链接

扫一扫

专栏目录