输入框特效-底部横线动画
2019-11-09 本文已影响0人
小天奇
先看下效果
q.gif
废话不多说直接上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>input特效</title>
<style>
div{
display: inline-block;
position: relative; /*设置相对定位为绝对定位做参照*/
}
input{
outline: none;
}
input ~ span{
position: absolute; /*绝对定位以div为参照*/
bottom: 0;
left: 0;
right: 0;
height: 3px;
background: #1b809e;
transform: scaleX(0); /*X轴缩放0*/
transform-origin: right center; /*从X轴右侧开始*/
transition: transform 0.3s ease-out;
}
input:focus ~ span{
transform: scaleX(1); /*X轴缩放正常大小*/
transform-origin: left center; /*从X轴左侧开始*/
}
</style>
</head>
<body>
<div>
<input type="text">
<span></span>
</div>
</body>
</html>
这里顺便说下绝对定位是以最近的已经定位的父级做参照如果没有就是以Body做参照。
