<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>jquery边框移动效果</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
*{
margin: 0;padding: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
font: 14px/16px '微软雅黑,Microsoft yahei';
}
.login {
width: 350px;
height: 350px;
position: absolute;
top: 150px;
right: 150px;
position: absolute;
}
.login form,.logform p{
width: 100%;
}
.logform p {
margin-bottom: 15px;
}
.login form fieldset{
padding: 35px 5%;
}
.logform label,.logform input {
display: inline-block;
}
.logform p>input[type="s
jquery登录界面边框移动效果
最新推荐文章于 2022-05-08 01:02:06 发布
这篇博客展示了如何使用jQuery创建一个登录界面,当用户聚焦输入框时,会有一个红色边框平滑移动到聚焦的输入框下方,为用户提供了视觉反馈。文章包含HTML、CSS和JavaScript代码示例,解释了实现这一动态效果的关键步骤和技术。
摘要由CSDN通过智能技术生成