SVG互动（向左箭头菜单）

下载代码

html

css

分享到微信朋友圈

html

<h1>SVG Interaction</h1>
    <div class="icons">
      <svg
        width="300"
        height="300"
        viewBox="0 0 32 42"
        xmlns="http://www.w3.org/2000/svg"
        onclick="this.classList.toggle('active')"
      >
        <g transform="matrix(1,0,0,1,-389.5,-264.004)">
          <g id="arrow_left2">
            <g transform="matrix(1,0,0,1,0,5)">
              <path
                id="top"
                d="M390,270L420,270L420,270C420,270 420.195,250.19 405,265C389.805,279.81 390,279.967 390,279.967"
              />
            </g>
            <g
              transform="matrix(1,1.22465e-16,1.22465e-16,-1,0.00024296,564.935)"
            >
              <path
                id="bottom"
                d="M390,270L420,270L420,270C420,270 420.195,250.19 405,265C389.805,279.81 390,279.967 390,279.967"
              />
            </g>
            <path id="middle" d="M390,284.967L420,284.967" />
          </g>
        </g>
      </svg>
      <svg
        width="300"
        height="300"
        viewBox="0 0 32 42"
        xmlns="http://www.w3.org/2000/svg"
        onclick="this.classList.toggle('active')"
      >
        <g transform="matrix(1,0,0,1,-438.286,-264.004)">
          <g id="arrow_left1">
            <g
              transform="matrix(-1,-1.22465e-16,1.22465e-16,-1,858.787,564.935)"
            >
              <path
                id="top"
                d="M390,270L420,270L420,270C420,270 420.195,250.19 405,265C389.805,279.81 390,279.967 390,279.967"
              />
            </g>
            <g transform="matrix(-1,-2.44929e-16,-2.44929e-16,1,858.786,5)">
              <path
                id="bottom"
                d="M390,270L420,270L420,270C420,270 420.195,250.19 405,265C389.805,279.81 390,279.967 390,279.967"
              />
            </g>
            <g
              transform="matrix(-1,-1.22465e-16,1.22465e-16,-1,858.787,569.935)"
            >
              <path id="middle" d="M390,284.967L420,284.967" />
            </g>
          </g>
        </g>
      </svg>
      <svg
        width="265"
        height="265"
        viewBox="0 0 36 22"
        xmlns="http://www.w3.org/2000/svg"
        onclick="this.classList.toggle('active')"
      >
        <g transform="matrix(1,0,0,1,-419.5,-274.131)">
          <g id="arrow_rocket">
            <path
              id="top"
              d="M420,274.631L450,274.631C450,274.631 459.044,284.599 450,284.599C440.956,284.599 420,284.646 420,284.646L430.014,274.631"
            />
            <g transform="matrix(1,-1.22465e-16,-1.22465e-16,-1,0,569.277)">
              <path
                id="bottom"
                d="M420,274.631L450,274.631C450,274.631 459.044,284.599 450,284.599C440.956,284.599 420,284.646 420,284.646L430.014,274.631"
              />
            </g>
            <g transform="matrix(1,0,0,1,0,-0.0234189)">
              <path id="middle" d="M420,284.646L450,284.646" />
            </g>
          </g>
        </g>
      </svg>
    </div>

css

svg {
	fill-rule:evenodd;
	clip-rule:evenodd;
	stroke-linecap:round;
	stroke-linejoin:round;
	stroke-miterlimit:1.5;
}
svg path {
	fill:none;
	stroke:white;
	stroke-width:1px;
}
svg + svg {
	margin-left:1.5rem;
}
* {
	margin:0;
	padding:0;
	box-sizing:border-box;
	font-family:Segoe UI,sans-serif;
}
body {
	min-height:100vh;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	flex-wrap:wrap;
	background:#7f00ff;
	background:-webkit-linear-gradient(to right,#e100ff,#7f00ff);
	background:linear-gradient(to right,#e100ff,#7f00ff);
	color:white;
	padding:1rem;
}
h1 {
	font-size:2.5rem;
	text-transform:uppercase;
	letter-spacing:5px;
	text-align:center;
	margin-bottom:2rem;
}
.icons {
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	align-items:center;
}
#top,#bottom {
	stroke-dasharray:30,75.39;
	transition:all 0.6s cubic-bezier(0.6,0.33,0.67,1.29);
}
svg.active #top,svg.active #bottom {
	stroke-dasharray:75.39;
	stroke-dashoffset:-60;
}
svg:nth-child(2) {
	transform:rotate(0deg);
	transition:transform 0.6s cubic-bezier(0.165,0.84,0.44,1);
}
svg:nth-child(2) path {
	transition:all 0.4s ease-in-out 0.6s;
}
svg:nth-child(2).active {
	transform:rotate(180deg);
}
.rocket #top {
	stroke-dasharray:30,88;
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg