css3文本框里面的东西自动上下移动端css3动画效果库

来源：蜘蛛抓取(WebSpider) 时间：2018-03-14 13:48 标签： css3 文本框样式
[CSS3]为表单input和textarea文本框添加发光焦点响应效果
一般网页里面的表单都有文本框，大部分默认的文本框样式并不好看，Chrome浏览器默认会给获取焦点的文本框添加一个蓝色的发光效果，但是其它浏览器就不行，以前我都是定义为一个样式，这样确实很不利于用户体验，这样用户分不清那个文本框获取了焦点，若没有文字的光标闪烁的话，那我们如何在文本框获取焦点的时候添加一个蓝色的发光效果呢？
input[type=text], textarea {
-webkit-transition: all 0.30s ease-in-
-moz-transition: all 0.30s ease-in-
-ms-transition: all 0.30s ease-in-
-o-transition: all 0.30s ease-in-
padding: 3px 0px 3px 3
margin: 5px 1px 3px 0
border: 1px solid #
input[type=text]:focus, textarea:focus {
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
padding: 3px 0px 3px 3
margin: 5px 1px 3px 0
border: 1px solid rgba(81, 203, 238, 1);
如果看不到效果请看演示页 -
本文出处：http://www.uedsc.com/css3-glowing-inputs.html
版权所有 & 2018
DESIGNED BY
本站公告 当前本站主题 YUAO 即将更新至1.1.8，详情点击！建站交流群：下次自动登录
现在的位置:
css3美化文本框提示特效代码下载
css3美化文本框提示特效代码下载
源代码下载：
源代码截图：
【上篇】【下篇】CSS3实现的文本框阴影发光效果:本章节分享一段代码实例，此代码能够当文本框获取焦点的时候，能够将边框设置的具有阴影发光效果，希望需要的朋友可以进行一下参考，代码实例如下:
&!DOCTYPE html&
&meta charset=" utf-8"&
&meta name="author" content="http://www.softwhy.com/" /&
&title&蚂蚁部落&/title&
&style type="text/css"&
.txt:focus{
transition:border linear .2s,box-shadow linear .5s;
-moz-transition:border linear .2s,-moz-box-shadow linear .5s;
-webkit-transition:border linear .2s,-webkit-box-shadow linear .5s;
border-color:rgba(93,149,242,.75);
box-shadow:0 0 8px rgba(93,149,242,.105);
-moz-box-shadow:0 0 8px rgba(93,149,242,.5);
-webkit-box-shadow:0 0 8px rgba(93,149,242,3);
&input type="text" class="txt" /&
上面的实现了我们的要求，具体实现过程就不介绍了，如有问题可以跟帖留言。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=13025
更多内容可以参阅:http://www.softwhy.com/divcss/
浏览: 32924 次
(window.slotbydup=window.slotbydup || []).push({
id: '4773203',
container: s,
size: '200,200',
display: 'inlay-fix'14种CSS3炫酷表单input输入框美化效果
当前位置： >
> 14种CSS3炫酷表单input输入框美化效果
这是一款效果非常炫酷的CSS3表单input输入框美化效果插件。该input输入框美化插件共14种效果。大多数是使用CSS transitions来切换伪元素制作的。其中还有一款使用了html5 svg动画效果。
浏览器兼容性
小编推荐：
这是一款效果非常酷的CSS3表单input输入框美化效果插件。为表单的input输入框制作一些特殊的效果能给用户带来更好的用户体验。这个CSS3表单input输入框美化插件就是一个很好的例子。这个插件中的效果大多数是使用CSS transitions来切换伪元素制作的。
HTML结构使用一个span作为wrapper，包裹住input和它的label。为了效果能正常工作，要将label放置在input后面，这是在使用复选框和单选按钮时的。但这种做法不是必须的，你可以使用js来在input聚焦时动态为它添加class。在这个插件中，我们通过相邻的兄弟选择器，使用CSS的:focus伪元素来制作效果。注意，不是所有的效果都使用CSS来触发。
&span class="input input--haruki"&
&input class="input__field input__field--haruki" type="text" id="input-1" /&
&label class="input__label input__label--haruki" for="input-1"&
&span class="input__label-content input__label-content--haruki"&First Name&/span&
这里最有用的元素是label。我们可以使用:before和:after伪元素来制作各种边框和背景效果，然后还可以使它们产生动画效果。我们甚至还能制作类似"Kyo"这个demo中的遮罩效果。
第一种效果“Haruki”，效果看起来像是我们移动了input的边框，但实际上我们移动的是label元素的两个伪元素。
.input--haruki {
margin: 4em 1em 1
.input__field--haruki {
padding: 0.4em 0.25
width: 100%;
background:
color: #AFB5BB;
font-size: 1.55
.input__label--haruki {
width: 100%;
text-align:
pointer-events:
.input__label-content--haruki {
transition: transform 0.3s;
.input__label--haruki::before,
.input__label--haruki::after {
content: '';
z-index: -1;
width: 100%;
background: #6a7989;
transition: transform 0.3s;
.input__label--haruki::before {
.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);
注意我们已经为包裹input的span、input和label添加了一些基本样式。当input聚焦时，label处于input的上面，当两个伪元素动画的时候，我们将使input中的内容往上运动。
在Firefox(Mac系统)中，文本的渲染效果不是很好，所以你可能会在动画结束时看到文本有些模糊。令人叹息的是，字体模糊不是Firefox浏览器唯一的问题，在某些过渡效果之后，它的字体渲染效果没有Chrome浏览器那么好。
注意：例子“Madoka”中的SVG stroke动画在IE浏览器中看不到效果。（我们在stroke-dashoffset中使用了transition）当你要制作自己的input输入框动画效果时，请时刻注意一点，某些效果可能因为bug的原因而不能再iOS或IE浏览器中正常工作。
本文版权属于jQuery之家，转载请注明出处：
您已经顶过了哦！友情提示：垃圾评论一律封号，下载出错或者资源有问题请联系全栈客服QQ
多个酷炫css3文本框输入文字动画特效
所需积分：10
亲，积分不够，多去发布资源、评论、签到、
或联系QQ人工充值
亲，vip会员下载原创作品 积分5 折，其余免积分下载
PS:尊重原创作者劳动成果，感谢分享！
充值方式： 或联系QQ人工充值

我要回帖

更多关于 css3 文本框样式 的文章

 

随机推荐