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

代码语言：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 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(transparent calc(var(--bg-size) - 2px), var(--grid-line) calc(var(--bg-size) - 2px) var(--bg-size)) var(--grid-offset) var(--grid-offset) / 100% var(--bg-size),
		linear-gradient(90deg, transparent calc(var(--bg-size) - 2px), var(--grid-line) calc(var(--bg-size) - 2px) var(--bg-size)) var(--grid-offset) var(--grid-offset) / var(--bg-size) 100%, transparent;
/*	background: var(--bg);*/
	position: fixed;
	inset: 0;
	height: 100vh;
	width: 100vw;
	-webkit-mask: radial-gradient(circle at 0% 0%, hsl(0 0% 100% / 0.5), transparent);
}

.form-group:focus-within label {
	color: var(--color);
}
.form-group:focus-within input {
	border-color: var(--color);
	color: var(--color);
}
.form-group:focus-within button {
	color: var(--color);
}

input {
	font-family: "Geist Mono", monospace;
	font-size: 1.75rem;
	padding: 1rem 2rem;
  padding-right: 4rem;
	letter-spacing: 0.2ch;
	border-radius: 6px;
	color: var(--color-alpha);
	border-color: var(--color-alpha);
	border-style: solid;
	background: var(--input-bg);
	outline: none;
	transition: border-color 0.2s, color 0.2s
}

label {
	position: absolute;
	color: var(--color-alpha);
	bottom: calc(100% + 0.5rem);
	letter-spacing: 0.2ch;
	transition: color 0.2s;
}

.form-group {
	position: relative;
}

.eye circle:nth-of-type(2) {
	fill: var(--glint);
}

button {
	padding: 0;
	display: grid;
	place-items: center;
	height: 100%;
	aspect-ratio: 1;
	border-radius: 12px;
	border: 0;
	background: linear-gradient(hsl(0 0% var(--button-shade) / calc(var(--active, 0) * 0.5)), hsl(0 0% var(--button-shade) / calc(var(--active, 0) * 0.5))) padding-box;
	border: 6px solid transparent;
	transition: background 0.125s;
	color: var(--color-alpha);
	position: absolute;
	right: 0;
	z-index: 2;
	top: 50%;
	cursor: pointer;
	translate: 0 -50%;
	outline: 0;
}

input::-moz-selection {
	background: var(--selection);
}

input::selection {
	background: var(--selection);
}

button:is(:focus-visible, :hover) {
	--active: 1;
}

button svg {
	width: 75%;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}
</style>

  
  
</head>

<body>
  <form action="">
  <div class="form-group">
    <label for="password">Password</label>
    <input id="password" type="password" required />
    <button type="button" title="Reveal Password" aria-pressed="false">
      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <mask id="eye-open">
            <path d="M1 12C1 12 5 4 12 4C19 4 23 12 23 12V20H12H1V12Z" fill="#D9D9D9" stroke="black" stroke-width="1.5" stroke-linejoin="round" />
          </mask>
          <mask id="eye-closed">
            <path d="M1 12C1 12 5 20 12 20C19 20 23 12 23 12V20H12H1V12Z" fill="#D9D9D9" />
          </mask>
        </defs>
        <path class="lid lid--upper" d="M1 12C1 12 5 4 12 4C19 4 23 12 23 12" stroke="currentColo.........完整代码请登录后点击上方下载按钮下载查看