介绍身体{
,,,背景颜色:# acacac;
,,}
.form-container{才能
,,,显示:,块;
,,,位置:,相对;
,,,宽度:,400 px;
,,,身高:,400 px;
,,,背景:,# fff;
,,,保证金:,50 px 汽车;
,,,填充:,30 px;
,,}
输入{才能
,,,显示:,块;
,,,位置:,相对;
,,,背景:,没有;
边境:,,,,2 px solid # acacac;
,,,这个特性:5 px;
,,,宽度:,100%;
,,,粗细:,大胆;
,,,padding-left: 10 px;
,,,,字体大小:16 px;
,,,身高:35 px;
,,,z - index:, 1;
,,}
标签才能{
,,,显示:,inline-block;
,,,位置:,相对;
,,,:,-32 px;
,,,左:,10 px;
,,,颜色:,# acacac;
,,,,字体大小:16 px;
,,,z - index:, 2;
,,,的转变:,all 0.2 s 打发走;
,,}
输入:专注,才能有效输入:{
,,,:轮廓,没有;
边境:,,,,2 px solid # 00发球直接得分;
,,}
输入:才能focus +,标签,标签,输入:valid +, {
,,,:,-50 px;
,,,,字体大小:16 px;
,,,颜色:,# 00发球直接得分;
,,,背景颜色:# fff;
以前,,} & lt; div 类=癿ain"比;
,,,& lt; div 类=癴orm-container"比;
,,,,,& lt; input 类型=皌ext", name=癷nput1", required>
,,,,,& lt; label 为=癷nput1"祝辞Account
,,,,,& lt; input 类型=皌ext", name=癷nput2", required>
,,,,,& lt; label 为=癷nput2"祝辞Password
,,,& lt;/div>
& lt;才能/div> 身体{
,,,背景颜色:# acacac;
,,}
.form-container{才能
,,,显示:,块;
,,,位置:,相对;
,,,宽度:,400 px;
,,,背景:,# fff;
,,,保证金:,50 px 汽车;
,,,填充:,60 px;
,,}
输入{才能
,,,显示:,块;
,,,位置:,相对;
,,,背景:,没有;
边境:,,,,没有;
,,,边界底部:,1 px solid # ddd;
,,,宽度:,100%;
,,,粗细:,大胆;
,,,,字体大小:16 px;
,,,z - index:, 2;
,,}
标签才能{
,,,显示:,块;
,,,位置:,相对;
,,,:,-20 px;
,,,左:,0 px;
,,,颜色:,# 999;
,,,,字体大小:16 px;
,,,z - index:, 1;
,,,的转变:,all 0.3 s 打发走;
,,,margin-bottom: 40像素;
,,}
输入:专注,才能有效输入:{
,,,:轮廓,没有;
,,,边界底部:,1 px solid # 00发球直接得分;
,,}
输入:才能focus +,标签,标签,输入:valid +, {
,,,:,-50 px;
,,,,字体大小:16 px;
,,,颜色:,# 00发球直接得分;
,,,背景颜色:# fff;
以前,,} & lt; div 类=癿ain"比;
,,,& lt; div 类=癴orm-container"比;
null
null
null
null
null
null
这篇文章给大家分享的是有关CSS3中输入框如何实现类似谷歌登录的动画效果的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
,用CSS3将输入框写出类似谷歌登录页面的动画效果
<>强效果一
代码如下
<强> CSS
<强> HTML
<>强效果二
代码如下:
<强> CSS
<强> HTML
