css3 输入框 特效

CSS3输入框特效是一种可以增添网站设计魅力的效果。下面我们来看看一些常用的CSS3输入框特效。

/* 圆角输入框 */input {
    border-radius: 5px;
}
/* 阴影输入框 */input {
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
}
/* 边框渐变输入框 */input {
    background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
    border: 1px solid #cfcfcf;
    padding: 5px;
}
/* 浮动提示输入框 */input {
    padding: 10px;
}
input:focus {
    outline: none;
    border-color: #5cb85c;
    box-shadow: 0 0 5px #5cb85c;
    transition: all 0.3s;
}
input:focus + label {
    font-size: 12px;
    color: #5cb85c;
    top: 5px;
    transition: all 0.3s;
}
label {
    position: absolute;
    top: 10px;
    left: 15px;
    font-size: 16px;
    color: #999;
    z-index: -1;
    transition: all 0.3s;
}
    

通过使用上述CSS3输入框特效，可以让您的网站设计更加独特，吸引人眼球。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！