(已解決)JS寫法-登入網站的輸入框特效

Oo_花之舞__oO 2022-12-24 10:03:15 ‧ 890 瀏覽

分享至

如題目
我逛到這個資安網站
https://isafeevent.moe.edu.tw/login/

這邊註冊用鼠標點下去的時候會有一條紅色線從中間展開

大概知道可以用scale來操作讓點的長度從0變成全部
但是要從中間左右展開該怎麼寫呢

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

re.Zero

iT邦研究生 5 級 ‧ 2022-12-26 01:02:25

最佳解答

不確定是不是你要的(從你語氣，感覺你想從零打造？)，但我節取部分資安素養網站內容供你參考：
(注意，bind() 自 jQuery 3.0 已棄用；但為保留資安素養網站的原汁原味(?)，我就懶得改了～)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" /><title>myTest</title>
		<script src="/static/js/jquery-3.6.3.min.js"></script>
		<style>
.flex-container {
	display: flex;
	justify-content: center;
}
.tfbar:after {
	content: '';
	display: block;
	width: 0%;
	height: 4px;
	background: #cb3512;
	transition: all 0.2s ease-in-out;
	margin: 2px auto 4px auto;
}
.tfbar.on:after{width:100%;}
		</style>
		<script type="text/javascript">
$(function(){
	$('.tfbar').each(function(){
		$(this).bind('focusin',function(){
			$('.tfbar').stop(false, true).removeClass('on');
			$(this).stop(false, true).addClass('on').siblings('.on').removeClass('on');
		});
		$(this).bind('focusout',function(){
			$('.tfbar').stop(false, true).removeClass('on');
		});
	});
})
		</script>
	</head>
	<body>
		<div class="flex-container">
			<div>
<!-- myIndentShift[-4T] -->
<div class="tfbar">
	<label for="username">帳號</label>
	<div><input type="text" placeholder="請輸入帳號..."></div>
</div>
<div class="tfbar">
	<label for="password">密碼</label>
	<div><input type="password" placeholder="請輸入密碼..."></div>
</div>
<!-- myIndentShift[+4T] -->
			</div>
		</div>
	</body>
</html>