如題目
我逛到這個資安網站
https://isafeevent.moe.edu.tw/login/
這邊註冊用鼠標點下去的時候 會有一條紅色線 從中間展開
大概知道可以用scale來操作 讓點的長度從0變成全部
但是要從中間左右展開 該怎麼寫呢
不確定是不是你要的(從你語氣,感覺你想從零打造?),但我節取部分資安素養網站內容供你參考:
(注意,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>