（学习视频分享：css视频教程）
效果展示：
源 码展示：
<!docty PE ht ML >
<html>
<head>
< ;m eta charset="utf-8">
<t IT le>纯css实现自适应标题浮动效果</title>
<style>
body {
background-color: # FAFAFA;
}
input[type="text"] {
- webkit -box -s izing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
width:100%;
h ei ght:-webkit-calc(3em + 2px);
height:calc(3em + 2px);
m arg in:0 0 1em;
padding:1em;
border:1px solid #cccccc;
border-radius:1.5em;
background:#fff;
re Size: none;
outline:none;
}
input[type="text"][requi red ]: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 -t ransition-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] {
dis play :block;
pointer-events:none;
line-height:2.3em;
mar gin -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:nowra p;
-webkit-transition:0.3s ease -i n-out;
transition:0.3s ease-in-out;
background-image:-webkit-gra die nt(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实现自适应标题浮动效果（代码实例）的详细内容，更多请关注其它相关文章！
总结
以上是 为你收集整理的 使用css实现自适应标题浮动效果（代码实例） 全部内容，希望文章能够帮你解决 使用css实现自适应标题浮动效果（代码实例） 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于使用css实现自适应标题浮动效果（代码实例）的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did199661