密码显示隐藏切换按钮点击效果-html代码-BFW代码库

密码显示隐藏切换按钮点击效果

代码语言：html

代码描述：密码显示隐藏切换按钮点击效果

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
:root {
	--primary: #6441a5;
	--white: #ffffff;
	--greyLight-1: #e4ebf5;
	--greyLight-2: #c8d0e7;
	--shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2),
		-0.2rem -0.2rem 0.5rem var(--white);
	--inner-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2),
		inset -0.2rem -0.2rem 0.5rem var(--white);
}

* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
body {
	background: var(--greyLight-1);
}
div {
	display: -webkit-box;
	display: flex;
	-webkit-box-align: center;
	        align-items: center;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	        transform: translate(-50%, -50%);
}
input {
	width: 60vmin;
	height: 15vmin;
	border: none;
	border-radius: 1rem;
	outline: none;
	font-size: 7.5vmin;
	font-weight: bold;
	padding: 0 4vmin;
	box-shadow: var(--inner-shadow);
	background: var(--greyLight-1);
	color: var(--primary);
	caret-color: var(--primary);
}
svg {
	width: 12.5vmin;
	height: 12.5vmin;
	border-radius: 0.5rem;
	box-shadow: var(--shadow);
	margin: 0 4vmin;
	cursor: pointer;
}
svg path {
	-webkit-transition: all 0.25s 0.25s ease, all 0.25s ease;
	transition: all 0.25s 0.25s ease, all 0.25s ease;
	-webkit-transform-origin: center center;
	        transform-origin: center center;
	stroke: var(--primary);
}
svg circle {
	-webkit-transition: all 0.25s ease, all 0.25s 0.25s ease;
	transition: all 0.25.........完整代码请登录后点击上方下载按钮下载查看