iT邦幫忙

2

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

js
  • 分享至 

  • xImage

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

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

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

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

0
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>

好厲害 謝謝你我馬上去研究

而且好幽默XD

0
akajoke
iT邦新手 5 級 ‧ 2022-12-25 17:11:57

寫兩段
一次從左到右
一次從又到左

我要發表回答

立即登入回答