Error message here!

Hide Error message here!

忘记密码?

Error message here!

请输入正确邮箱

Hide Error message here!

密码丢失?请输入您的电子邮件地址。您将收到一个重设密码链接。

Error message here!

返回登录

Close

简单css实现input提示交互动画效果

未知 2019-02-16 17:42:00 阅读数:248 评论数:0 点赞数:0 收藏数:0

通过基础CSS实现输入提示交互动画效果,并兼容各浏览器!

1.效果展示

 

 

 

2.css代码

 h4 {
margin: 30px 0;
}
input {
margin: 0;
font-size: 16px;
}
.input-fill-x, .input-outline-x, .textarea-outline-x {
position: relative;
}
.input-control:focus + label {
color: red;
background: white;
transform: scale(0.8) translate(0, -17px);
}
.input-label {
padding: 0 5px;
position: absolute;
left: 10px;
top: 3px;
transform-origin: 0 0;
pointer-events: none;
transition: all .3s;
}

 

3.html代码

 <h4>轮廓风格</h4>
<div class="input-outline-x">
<input class="input-control input-outline">
<label class="input-label">邮箱</label>
</div>
<h4>文本域</h4>
<div class="textarea-outline-x">
<textarea class="input-control textarea-outline" cols="25" rows="3"></textarea>
<label class="input-label">评论</label>
</div>

 

结论:

实现了基本目标功能。

用户在填写表单时,这种输入框的设计通过动画既节约了空间,也方便直观给用户提示。

代码的实现上简单、粗暴,同时兼容性也不差。

在对于输入框的样式上也可以自由扩展,可以应用在PC、H5上。

有更好的方法实现可评论推荐交流。

 

引入链接:https://www.zhangxinxu.com/wordpress/2018/12/css-placeholder-shown-material-design/

版权声明
本文为[未知]所创,转载请带上原文链接,感谢
https://www.cnblogs.com/show-me-code/p/10388526.html

编程之旅,人生之路,不止于编程,还有诗和远方。
阅代码原理,看框架知识,学企业实践;
赏诗词,读日记,踏人生之路,观世界之行;