CSS技术三之类似Twitter的输入框CSS3美化特效


或许你用过, 任何input/textarea输入框点击都会有一个发光的蓝色边框,这不单纯只是蓝色边框而已,其实包含了许多CSS3技巧知识。
需要注意的是,这并不是单纯的box-shadow属性而已,它的发光是像四周均匀发光,它还包含一个缓慢发光过渡效果。
下面来看看它的源代码:

input,textarea {
    padding: 5px;
    font-size: 15px;
    outline: none;
    text-shadow: 0px 1px 0px #fff;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    border: 1px solid #ccc;
    -webkit-transition: .3s ease-in-out;
    -moz-transition: .3s ease-in-out;
    -o-transition: .3s ease-in-out;
}

input:focus,textarea:focus {
     border: 1px solid #fafafa;
     -webkit-box-shadow: 0px 0px 6px #007eff;
     -moz-box-shadow: 0px 0px 5px #007eff;
     box-shadow: 0px 0px 5px #007eff;
}

代码很简单,主要用到了CSS3的Shadow和Transition属性。不理解的朋友可以查查CSS3的相关属性。

“CSS技术三之类似Twitter的输入框CSS3美化特效”的一个回复

发表评论

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