用css3写input的交互动画

为了达到注册输入有更好的体验,所有用css3过渡动画写了个小交互。

动画的原理,主要就是当获得焦点的时候,“账号”标题变色上移且缩小字号。下划线同时也变成选中主色调。

现在看看css代码

首先定义输入框的样式,隐藏所有input的初始样式,然后强制增加底线,并在获得焦点时变色。代码如下:
.input {
 position: relative;
 z-index: 1;
 display: inline-block;
 margin: 0.5rem 1rem;
 max-width: 400px;
 width: calc(100% - 2em);
 vertical-align: top;
}
.input_field {
 position: relative;
 display: block;
 float: right;
 padding: 0.8em;
 width: 100%;
 border: none;
 border-radius: 0;
 background: #f0f0f0;
 color: #aaa;
 -webkit-appearance: none;
 font-size: 1.6rem; 
}
.input_field:focus {
 outline: none;
}
下面是编辑标题的样式和触摸是的变化。
.input_label {
 display: inline-block;
 float: right;
 padding: 0 1em;
 width: 100%;
 color: #6a7989;
 font-size: 1.6rem;
 -webkit-touch-callout: none;
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}
.input_label-content {
 position: relative;
 display: block;
 padding: 1em 0;
 width: 100%;
}

然后加入css3的过渡动画:

.input--hoshi {
 overflow: hidden;
}
.input_field--hoshi {
 margin-top: 1em;
 padding: 0.85em 0.15em;
 width: 100%;
 background: transparent;
 color: #595F6E;
}
.input_label--hoshi {
 position: absolute;
 bottom: 0;
 left: 0;
 padding: 0.35rem 0 0 0.25rem;
 width: 100%;
 height: calc(100% - 1rem);
 text-align: left;
 pointer-events: none;
}
.input_label-content--hoshi {
 position: absolute;
}
.input_label--hoshi::before,
.input_label--hoshi::after {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: calc(100% - 8px);
 border-bottom: 1px solid #B9C1CA;
}
.input_label--hoshi::after {
 border-bottom: px solid blue;
 -webkit-transform: translate3d(-100%, 0, 0);
 transform: translate3d(-100%, 0, 0);
 -webkit-transition: -webkit-transform 0.0s;
 transition: transform 0.0s;
}
.input_label--hoshi-color-1::after {
 border-color: hsl(200, 100%, 50%);
}
.input_field--hoshi:focus + .input_label--hoshi::after,
.input--filled .input_label--hoshi::after {
 -webkit-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
}
.input_label-content--hoshi {
 -webkit-transform-origin: 0% 50%;
 transform-origin: 0% 50%;
 -webkit-transition: -webkit-transform 0.3s;
 transition: transform 0.3s;
}
.input_field--hoshi:focus + .input_label--hoshi .input_label-content--hoshi,
.input--filled .input_label-content--hoshi {
 -webkit-transform: translate3d(0, -1.15em, 0) scale3d(0.8, 0.8, 1);
 transform: translate3d(0, -1.15em, 0) scale3d(0.8, 0.8, 1) translateZ(3px);
 color: #38a4e8;
}
/*有内容情况下,失去焦点调用的类*/
.input--foc .input_label-content--hoshi {
 -webkit-transform: translate3d(0, -1.15em, 0) scale3d(0.8, 0.8, 1);
 transform: translate3d(0, -1.15em, 0) scale3d(0.8, 0.8, 1) translateZ(3px);
}

大部分都是css3编辑。还要添加js对input事件的判断。

效果图如下:

分享到:

发表评论

电子邮件地址不会被公开。 必填项已用*标注