Loading

Loading

封装一个带动画的输入框 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body {
				background: #f5f5fe;
			}

			.container {
				width: 400px;
				margin: 150px auto;
				background: #fff;
				padding: 30px 20px;
				box-sizing: border-box;
			}

			.input-box {
				position: relative;
				margin: 20px;
				box-sizing: border-box;
			}

			.input-box label {
				position: absolute;
				top: 10px;
				left: 10px;
				transition: .5s;
				pointer-events: none;
				text-decoration: none;
			}

			.input-box i {
				position: absolute;
				bottom: 0px;
				left: 50%;
				transform: translateX(-50%);
				width: 0px;
				height: 2px;
				background: blue;
				transition: .5s;
			}

			input:focus~i {
				width: 100%;
			}

			input:focus~label,
			input:valid~label {
				top: -10px;
				left: 0;
				color: blue;
				font-size: 12px;
			}

			input {
				border: none;
				border-bottom: 1px solid #aaa;
				font-size: 16px;
				padding: 10px 5px;
				box-sizing: border-box;
				outline: none;
				display: block;
				width: 100%;
			}


			.button {
				position: relative;
				display: block;
				padding: 10px 20px;
				color: #03e9f4;
				font-size: 16px;
				text-decoration: none;
				text-transform: uppercase;
				overflow: hidden;
				transition: .5s;
				width: calc(100% - 40px);
				margin: 30px auto;
				letter-spacing: 4px;
				box-sizing: border-box;
				text-align: center;
				background: #eaffff;
				user-select: none;
				cursor: pointer;
			}


			.button:hover {
				background: #03e9f4;
				color: #fff;
				border-radius: 5px;
				box-shadow: 0 0 5px #03e9f4,
					0 0 25px #03e9f4,
					0 0 50px #03e9f4,
					0 0 100px #03e9f4;
			}

			.button i {
				position: absolute;
				display: block;
			}

			.button i:nth-child(1) {
				top: 0;
				left: -100%;
				width: 100%;
				height: 2px;
				background: linear-gradient(90deg, transparent, #03e9f4);
				animation: btn-anim1 1s linear infinite;
			}

			@keyframes btn-anim1 {
				0% {
					left: -100%;
				}

				50%,
				100% {
					left: 100%;
				}
			}

			.button i:nth-child(2) {
				top: -100%;
				right: 0;
				width: 2px;
				height: 100%;
				background: linear-gradient(180deg, transparent, #03e9f4);
				animation: btn-anim2 1s linear infinite;
				animation-delay: .25s
			}

			@keyframes btn-anim2 {
				0% {
					top: -100%;
				}

				50%,
				100% {
					top: 100%;
				}
			}

			.button i:nth-child(3) {
				bottom: 0;
				right: -100%;
				width: 100%;
				height: 2px;
				background: linear-gradient(270deg, transparent, #03e9f4);
				animation: btn-anim3 1s linear infinite;
				animation-delay: .5s
			}

			@keyframes btn-anim3 {
				0% {
					right: -100%;
				}

				50%,
				100% {
					right: 100%;
				}
			}

			.button i:nth-child(4) {
				bottom: -100%;
				left: 0;
				width: 2px;
				height: 100%;
				background: linear-gradient(360deg, transparent, #03e9f4);
				animation: btn-anim4 1s linear infinite;
				animation-delay: .75s
			}

			@keyframes btn-anim4 {
				0% {
					bottom: -100%;
				}

				50%,
				100% {
					bottom: 100%;
				}
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="input-box">
				<input required="" id="ipt" />
				<label>请输入手机号</label>
				<i></i>
			</div>
			<div class="input-box">
				<input required="" />
				<label>请输入验证码</label>
				<i></i>
			</div>
			<div class="button">
				<i></i>
				<i></i>
				<i></i>
				<i></i>
				登录
			</div>
		</div>
		<hr>
		<div id="text"></div>
		<script>
			const ipt = document.querySelector('#ipt')
			const text = document.querySelector('#text')
			ipt.oninput = (e) => {
				const v = (e.target.value + '').replace(/\D/g, '')
				console.log('filter', (v + '').replace(/\D/g, ''))
				const r = v.replace(/^(\d{3})/, '$1 ').replace(/(\d{4})/, '$1 ').replace(/-$/, '')
				text.innerText = r.substr(0, 13)
				ipt.value = r.substr(0, 13)
			}
		</script>
	</body>
</html>
posted @ 2022-06-22 00:14  灰色的修饰  阅读(27)  评论(0)  编辑  收藏  举报