通过基础 CSS 实现输入提示交互动画效果, 并兼容各浏览器!
1. 效果展示
2.CSS 代码
- h4 {
- margin: 30px 0;
- }
- input {
- margin: 0;
- font-size: 16px;
- line-height: 1.5;
- }
- .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