如何使用css实现自适应标题浮动效果
短信预约 -IT技能 免费直播动态提醒
这篇文章主要介绍了如何使用css实现自适应标题浮动效果，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
本篇文章通过代码实例给大家介绍一下css实现自适应标题浮动效果的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。
效果展示：
源码展示：
<!doctype html><html><head><meta charset="utf-8"><title>纯css实现自适应标题浮动效果</title> <style> body { background-color:#FAFAFA; } input[type="text"] { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; width:100%; height:-webkit-calc(3em + 2px); height:calc(3em + 2px); margin:0 0 1em; padding:1em; border:1px solid #cccccc; border-radius:1.5em; background:#fff; resize:none; outline:none;}input[type="text"][required]:focus { border-color:#00bafa;}input[type="text"][required]:focus + label[placeholder]:before { color:#00bafa;}input[type="text"][required]:focus + label[placeholder]:before,input[type="text"][required]:valid + label[placeholder]:before { -webkit-transition-duration:.2s; transition-duration:.2s; -webkit-transform:translate(0,-1.5em) scale(0.9,0.9); -ms-transform:translate(0,-1.5em) scale(0.9,0.9); transform:translate(0,-1.5em) scale(0.9,0.9);}input[type="text"][required]:invalid + label[placeholder][alt]:before { content:attr(alt);}input[type="text"][required] + label[placeholder] { display:block; pointer-events:none; line-height:2.3em; margin-top:-webkit-calc(-3em - 2px); margin-top:calc(-3em - 2px); margin-bottom:-webkit-calc((3em - 1em) + 2px); margin-bottom:calc((3em - 1em) + 2px);}input[type="text"][required] + label[placeholder]:before { content:attr(placeholder); display:inline-block; margin:0 -webkit-calc(1em + 2px); margin:0 calc(1em + 2px); padding:0 2px; color:#898989; white-space:nowrap; -webkit-transition:0.3s ease-in-out; transition:0.3s ease-in-out; background-image:-webkit-gradient(linear,left top,left bottom,from(#ffffff),to(#ffffff)); background-image:-webkit-linear-gradient(top,#ffffff,#ffffff); background-image:linear-gradient(to bottom,#ffffff,#ffffff); -webkit-background-size:100% 5px; background-size:100% 5px; background-repeat:no-repeat; background-position:center;}</style></head><body><div style="width:400px;height:100px;margin:50px auto"><form><input required="" type="text"><label alt="请输入用户名" placeholder="名称"></label></form></div></body></html>感谢你能够认真阅读完这篇文章，希望小编分享的“如何使用css实现自适应标题浮动效果”这篇文章对大家有帮助，同时也希望大家多多支持编程网，关注编程网行业资讯频道，更多相关知识等着你来学习!
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
