如何使用css实现自适应标题浮动效果
导读：本文共1694字符，通常情况下阅读需要6分钟。同时您也可以点击右侧朗读，来听本文内容。按键盘←（左） →（右） 方向键可以翻页。
摘要：这篇文章主要介绍了如何使用css实现自适应标题浮动效果，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。 本篇文章通过代码实例给大家介绍一下css实现自适应标题浮动效果的方法。有一定的参考价值，有需要的朋友可以参考一下... ...
音频解说
目录
(为您整理了一些要点),点击可以直达。这篇文章主要介绍了如何使用css实现自适应标题浮动效果，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
本篇文章通过代码实例给大家介绍一下css实现自适应标题浮动效果的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。
效果展示：
源码展示：
<!doctypehtml><html><head><metacharset="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:001em;padding:1em;border:1pxsolid#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:0calc(1em+2px);padding:02px;color:#898989;white-space:nowrap;-webkit-transition:0.3sease-in-out;transition:0.3sease-in-out;background-image:-webkit-gradient(linear,lefttop,leftbottom,from(#ffffff),to(#ffffff));background-image:-webkit-linear-gradient(top,#ffffff,#ffffff);background-image:linear-gradient(tobottom,#ffffff,#ffffff);-webkit-background-size:100%5px;background-size:100%5px;background-repeat:no-repeat;background-position:center;}</style></head><body><divstyle="width:400px;height:100px;margin:50pxauto"><form><inputrequired=""type="text"><labelalt="请输入用户名"placeholder="名称"></label></form></div></body></html>感谢你能够认真阅读完这篇文章，希望小编分享的“如何使用css实现自适应标题浮动效果”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!
本文：
如何使用css实现自适应标题浮动效果的详细内容，希望对您有所帮助，信息来源于网络。