css制作登录动画
2020-06-12 本文已影响0人
若年
效果如图所示：
动画.gif
解析：通过:before添加伪类元素，利用transform：translate()属性添加一个从左到右的动画。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
width: 100vw;
height: 100vh;
background: #5e5948;
}
main{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 300px;
height: 300px;
border: 5px solid beige;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.field{
position: relative;
margin-bottom: 20px;
overflow: hidden;
}
.field input{
border: none;
outline: none;
background: #ecf0f1;
padding: 10px;
height: 40px;
width: 200px;
font-size: 14px;
}
.field::before {
content: '';
position: absolute;
left: 0;
height: 2px;
bottom: 0;
width: 100%;
background: linear-gradient(45deg, white, #1abc9c, #f1c40f, #e74c3c, white);
transform: translateX(-100%);
transition: 2s;
}
.field:hover::before {
transform: translateX(100%);
}
</style>
</head>
<body>
<main>
<div class="field">
<input type="text" placeholder="请输入帐号">
</div>
<div class="field">
<input type="text" placeholder="请输入密码">
</div>
</main>
</body>
