浙江 杭州

14种CSS3炫酷表单input输入框美化效果

系统分类: 亚博赠送彩金 - css3 - css3 渐变/圆角/阴影 2015-06-05

人气100856

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


这是一款效果非常炫酷的CSS3表单input输入框美化效果亚博赠送彩金--任意三数字加yabo.com直达官网。该input输入框美化亚博赠送彩金--任意三数字加yabo.com直达官网共14种效果。大多数是使用CSS transitions来切换伪元素制作的。其中还有一款使用了html5 svg动画效果。

亚博体育appYB亚博国际老虎机亚博赠送彩金这是一款效果非常酷的CSS3表单input输入框美化效果亚博赠送彩金--任意三数字加yabo.com直达官网。为表单的input输入框制作一些特殊的效果能给用户带来更好的用户体验。这个CSS3表单input输入框美化亚博赠送彩金--任意三数字加yabo.com直达官网就是一个很好的例子。这个亚博赠送彩金--任意三数字加yabo.com直达官网中的效果大多数是使用CSS transitions来切换伪元素制作的。

HTML结构

HTML结构使用一个span作为wrapper,包裹住input和它的label。为了效果能正常工作,要将label放置在input后面,这是在使用复选框和单选按钮时的通常做法。但这种做法不是必须的,你可以使用js来在input聚焦时动态为它添加class。在这个亚博赠送彩金--任意三数字加yabo.com直达官网中,我们通过相邻的兄弟选择器,使用CSS的:focus伪元素来制作效果。注意,不是所有的效果都使用CSS来触发。


    
    

                

这里最有用的元素是label。我们可以使用:before:after伪元素来制作各种边框和背景效果,然后还可以使它们产生动画效果。我们甚至还能制作类似"Kyo"这个demo中的遮罩效果。

TextInputEffects_Kyo效果

CSS样式

第一种效果“Haruki”,效果看起来像是我们移动了input的边框,但实际上我们移动的是label元素的两个伪元素。

.input--haruki {
    margin: 4em 1em 1em;
}

.input__field--haruki {
    padding: 0.4em 0.25em;
    width: 100%;
    background: transparent;
    color: #AFB5BB;
    font-size: 1.55em;
}

.input__label--haruki {
    position: absolute;
    width: 100%;
    text-align: left;
    pointer-events: none;
}

.input__label-content--haruki {
    transition: transform 0.3s;
}

.input__label--haruki::before,
.input__label--haruki::after {
    content: '';
    position: absolute;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 4px;
    background: #6a7989;
    transition: transform 0.3s;
}

.input__label--haruki::before {
    top: 0;
}

.input__label--haruki::after {
    bottom: 0;
}

.input__field--haruki:focus + .input__label--haruki .input__label-content--haruki,
.input--filled .input__label-content--haruki {
    transform: translate3d(0, -90%, 0);
}

.input__field--haruki:focus + .input__label--haruki::before,
.input--filled .input__label--haruki::before {
    transform: translate3d(0, -0.5em, 0);
}

.input__field--haruki:focus + .input__label--haruki::after,
.input--filled .input__label--haruki::after {
    transform: translate3d(0, 0.5em, 0);
}
                

注意我们已经为包裹inputspaninputlabel添加了一些基本样式。当input聚焦时,label处于input的上面,当两个伪元素动画的时候,我们将使input中的内容往上运动。

TextInputEffects_Haruki效果

在Firefox(Mac系统)中,文本的渲染效果不是很好,所以你可能会在动画结束时看到文本有些模糊。令人叹息的是,字体模糊不是Firefox浏览器唯一的问题,在某些过渡效果之后,它的字体渲染效果没有Chrome浏览器那么好。

注意:例子“Madoka”中的SVG stroke动画在IE浏览器中看不到效果。(我们在stroke-dashoffset中使用了transition)当你要制作自己的input输入框动画效果时,请时刻注意一点,某些效果可能因为bug的原因而不能再iOS或IE浏览器中正常工作。

查看演示
下载资源:91
下载资源
错误提交:

格式:zip 大小:289.64KB

================关于优设记================
“优设记ui3g.com“是国内最全jquery亚博赠送彩金--任意三数字加yabo.com直达官网下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-1230.html 非特殊说明,本文版权归原作者所有,转载请注明出处
14种CSS3炫酷表单input输入框美化效果

我当前G币余额:0 已下载次数:91

注:购买该亚博赠送彩金--任意三数字加yabo.com直达官网的用户当日可免费下载 亚博赠送彩金--任意三数字加yabo.com直达官网作者可永久免费下载

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

多一点耐心少一点浮躁有什么新鲜事想告诉大家? 分享有礼 +5G币:(已有27 评论)

1 2 3 4