gsap实现密码输入框显示或隐藏字符切换动画效果代码-html代码-BFW代码库

gsap实现密码输入框显示或隐藏字符切换动画效果代码

代码语言：html

代码描述：gsap实现密码输入框显示或隐藏字符切换动画效果代码，结合了MorphSVGPlugin3及ScrambleTextPlugin3，实现隐藏时眼睛盯着鼠标旋转，关闭与显示时有字符逐个显示隐藏动画效果。

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

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

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

  
  
<style>
@font-face {
  font-family: "Geist Mono";
  src: url("//repo.bfw.wiki/bfwrepo/font/GeistMonoVariableVF.ttf") format("truetype");
}

:root {
	--grid-offset: calc(50% + 80px);
	--color: hsl(0 0% 6%);
	--bg: hsl(0 0% 96%);
	--color-alpha: hsl(0 0% 60%);
	--selection: hsl(0 0% 80%);
	--bg-size: 180px;
	--grid-line: hsl(0 0% 80%);
	--input-bg: hsl(0 0% 100% / 0.2);
	--grid-accent: hsl(280 0% 10% / 0.1);
	--glint: white;
	--button-shade: 80%;
}
:root:focus-within {
	--grid-accent: hsl(280 0% 10% / 0.35);
}

@media(prefers-color-scheme: dark) {
	:root {
		--button-shade: 30%;
		--glint: black;
		--grid-accent: hsl(280 0% 80% / 0.1);
		--selection: hsl(0 0% 20%);
		--color: hsl(0 0% 98%);
		--bg: hsl(0 0% 6%);
		--color-alpha: hsl(0 0% 50%);
		--grid-line: hsl(0 0% 12%);
		--input-bg: hsl(0 0% 0% / 0.2);
	}
	:root:focus-within {
		--grid-accent: hsl(280 0% 80% / 0.35);
	}
}

*,
*:after,
*:before {
	box-sizing: border-box;
}


body {
	display: grid;
	place-items: center;
	min-height: 100vh;
	font-family:  'Geist Mono', sans-serif, system-ui;
	color: var(--color);
	background: var(--bg);
/*	background: black;*/
}

body::before {
	content: "";
	transition: background 0.2s;
	background:
		/*	How to create one square */
		linear-gradient(var(--grid-accent) 0 2px, transparent 2px calc(100% - 2px), var(--grid-accent) calc(100% - 2px)) calc((var(--grid-offset) - (var(--bg-size) * 2)) - 1px) calc((var(--grid-offset) - var(--bg-size)) - 1px) / calc(var(--bg-size) + 2px) calc(var(--bg-size) + 2px) no-repeat,
		linear-gradient(90deg, var(--grid-accent) 0 2px, transparent 2p.........完整代码请登录后点击上方下载按钮下载查看