介绍 & lt; ! doctype html>
& lt; html>
& lt; head>
& lt; meta charset=皍tf-8"祝辞
& lt; title>纯css实现自适应标题浮动效果& lt;/title>
,
,,,& lt; style>
,,,,,,,body {
,,,,,,,,,,,background - color: # FAFAFA;
,,,,,,,}
,
,,,,,,,输入(type=皌ext"), {
,,,-webkit-box-sizing: border-box;
,,,-moz-box-sizing: border-box;
,,,box-sizing: border-box;
,,,宽度:100%;
,,,身高:-webkit-calc (3 em +, 2 px);
,,,身高:钙(3 em +, 2 px);
,,,保证金:0,0,1 em;
,,,填充:1 em;
,,,边界:1 px solid # cccccc;
,,,这个特性:1.5 em;
,,,背景:# fff;
,,,调整:没有;
,,,大纲:没有;
}
输入[类型=皌ext"][要求]:focus {
,,,边框颜色:# 00 bafa;
}
输入[类型=皌ext"][要求]:focus +,标签(占位符):before {
,,,颜色:# 00 bafa;
}
输入[类型=皌ext"][要求]:focus +,标签(占位符):之前,输入[类型=皌ext"][要求]:valid +,标签(占位符):before {
,,,-webkit-transition-duration: 2;
,,,transition-duration: 2;
,,,-webkit-transform:翻译(0,-1.5 em),规模(0.9,0.9);
,,,-ms-transform:翻译(0,-1.5 em),规模(0.9,0.9);
,,,变换:翻译(0,-1.5 em),规模(0.9,0.9);
}
输入[类型=皌ext"][要求]:invalid +,标签(占位符)(alt): before {
,,,内容:attr (alt);
}
输入[类型=皌ext"][要求],+,标签(占位符),{
,,,显示:块;
,,,pointer-events:没有;
,,,行高:2.3 em;
,,,margin-top: -webkit-calc (3 em 作用;2 px);
,,,margin-top:钙(3 em 作用;2 px);
,,,margin-bottom: -webkit-calc ((3 em 作用;1 em), +, 2 px);
,,,margin-bottom:钙((3 em 作用;1 em), +, 2 px);
}
输入[类型=皌ext"][要求],+,标签(占位符):before {
,,,内容:attr(占位符);
,,,显示:inline-block;
,,,保证金:0,-webkit-calc (1 em +, 2 px);
,,,保证金:0,calc (1 em +, 2 px);
,,,填充:0,2 px;
,,,颜色:# 898989;
,,,白色空间:nowrap;}
,,,-webkit-transition: 0.3 s ease-in-out;
,,,的转变:0.3 s ease-in-out;
,,,背景图片:-webkit-gradient(线性,left , left 底部,从(# ffffff) (# ffffff));
,,,背景图片:-webkit-linear-gradient(顶部,# ffffff, # ffffff);
,,,背景图片:线性渐变(用底部,# ffffff # ffffff);
,,,-webkit-background-size: 100%, 5 px;
,,,background-size: 100%, 5 px;
,,,平铺方式:不再重演;
,,,背景位置:中心;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div 风格=翱矶?400 px;高度:100 px;保证金:50 px auto"比;
& lt; form>
& lt; input 要求=啊?类型=皌ext"比;
& lt; label alt=扒胧淙胗没?占位符=懊啤白４? lt;/label>
& lt;/form>
& lt;/div>
& lt;/body>
& lt;/html>
这篇文章主要介绍了如何使用css实现自适应标题浮动效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。
本篇文章通过代码实例给大家介绍一下css实现自适应标题浮动效果的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。
<>强效果展示:
<强>源码展示:
感谢你能够认真阅读完这篇文章,希望小编分享的“如何使用css实现自适应标题浮动效果”这篇文章对大家有帮助,同时也希望大家多多支持,关注行业资讯频道,更多相关知识等着你来学习!
