vue3+gsap实现图标logo点击边框扩散动画效果代码-html代码-BFW代码库

vue3+gsap实现图标logo点击边框扩散动画效果代码

代码语言：html

所属分类：动画

代码描述：vue3+gsap实现图标logo点击边框扩散动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	min-height: 100vh;
	display: grid;
	place-items: center;

	--black: #222020;
	--white: #f5f1f1;
	--red: #ff4980;

	font-family: "Montserrat", sans-serif;

	background-color: var(--black);
}

.container {
	width: 70vmin;
	height: 70vmin;
	overflow: hidden;
	position: relative;
}

.label {
	position: fixed;
	top: 10vmin;
	left: 50%;
	transform: translate(-50%, -50%);
	transform-origin: center center;
	text-transform: uppercase;
	color: var(--red);
	font-size: 1.2rem;
}

.hex {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.hex g {
	stroke: var(--white);
	stroke-width: 1;
	fill: none;
	transform-origin: center center;
}

.hexButton {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transform-origin: center center;
	z-index: 40;
	cursor: pointer;
}
.hexButton g {
	stroke: none;
	/* fill: var(--red); */
	transition: fill 1s;
}
.hexButton #path-1,
.hexButton #path-2 {
	stroke: var(--black);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	fill: none;
}
</style>


  
  
</head>

<body translate="no">
  <div class="container" id="app">
	<div class="label">LIGHT | DARK</div>
	<div class="hex" ref="hex" :style="hexMultiply(h)" v-for="h in numOfHexs">
		<svg viewBox="0 0 25 25">
			<g>
				<path vector-effect="non-scaling-stroke" d="M0 5, L5 0, 20 0, 25 5, 25 20, 20 25, 5 25, 0 20 Z" />
			<.........完整代码请登录后点击上方下载按钮下载查看