css实现24种输入框focus点击获取焦点线条背景动画效果代码
代码语言：html
所属分类：表单美化
代码描述：css实现24种输入框focus点击获取焦点线条背景动画效果代码
代码标签： 输入 框 focus 点击 获取 焦点 线条 背景 动画 效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<html>
<head>
<style>
/*= Reset CSS
============= */
html, body {
border: 0;
margin: 0;
padding: 0;
}
body {
font: 14px "Lato", Arial, sans-serif;
min-width: 100%;
min-height: 100%;
color: #666;
}
.container {
margin: 0 auto;
max-width: 1200px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.row {
float: left;
width: 100%;
padding: 20px 0 50px;
}
h2 {
text-align: center;
color: #2079df;
font-size: 28px;
float: left;
width: 100%;
margin: 30px 0;
position: relative;
line-height: 58px;
font-weight: 400;
}
h2:before {
content: "";
position: absolute;
left: 50%;
bottom: 0;
width: 100px;
height: 2px;
background-color: #2079df;
margin-left: -50px;
}
/*= Reset CSS End
================= */
body {
background-color: #fff;
}
/*= input focus effects css
=========================== */
:focus {
outline: none;
}
.col-3 {
float: left;
width: 27.33%;
margin: 40px 3%;
position: relative;
}
/* necessary to give position: relative to parent. */
input[type="text"] {
font: 15px/24px "Lato", Arial, sans-serif;
color: #333;
width: 100%;
box-sizing: border-box;
letter-spacing: 1px;
}
.effect-1,
.effect-2,
.effect-3 {
border: 0;
padding: 7px 0;
border-bottom: 1px solid #ccc;
}
.effect-1 ~ .focus-border {
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background-color: #3399FF;
transition: 0.4s;
}
.effect-1:focus ~ .focus-border {
width: 100%;
transition: 0.4s;
}
.effect-2 ~ .focus-border {
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 2px;
background-color: #3399FF;
transition: 0.4s;
}
.effect-2:focus ~ .focus-border {
width: 100%;
transition: 0.4s;
left: 0;
}
.effect-3 ~ .focus-border {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
z-index: 99;
}
.effect-3 ~ .focus-border:before,
.effect-3 ~ .focus-border:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 100%;
background-color: #3399FF;
transition: 0.4s;
}
.effect-3 ~ .focus-border:after {
left: auto;
right: 0;
}
.effect-3:focus ~ .focus-border:before,
.effect-3:focus ~ .focus-border:after {
width: 50%;
transition: 0.4s;
}
.effect-4,
.effect-5,
.effect-6 {
border: 0;
padding: 5px 0 7px;
border: 1px solid transparent;
border-bottom-color: #ccc;
transition: 0.4s;
}
.effect-4:focus,
.effect-5:focus,
.effect-6:focus {
padding: 5px 14px 7px;
transition: 0.4s;
}
.effect-4 ~ .focus-border {
position: absolute;
height: 0;
bottom: 0;
left: 0;
width: 100%;
transition: 0.4s;
z-index: -1;
}
.effect-4:focus ~ .focus-border {
transition: 0.4s;
height: 36px;
border: 2px solid #3399FF;
z-index: 1;
}
.effect-5 ~ .focus-border {
position: absolute;
height: 36px;
bottom: 0;
left: 0;
width: 0;
transition: 0.4s;
}
.effect-5:focus ~ .focus-border {
width: 100%;
transition: 0.4s;
border: 2px solid #3399FF;
}
.effect-6 ~ .focus-border {
position: absolute;
height: 36px;
bottom: 0;
right: 0;
width: 0;
transition: 0.4s;
}
.effect-6:focus ~ .focus-border {
width: 100%;
transition: 0.4s;
border: 2px solid #3399FF;
}
.effect-7,
.effect-8,
.effect-9 {
border: 1px solid #ccc;
padding: 7px 14px 9px;
transition: 0.4s;
}
.effect-7 ~ .focus-border:before,
.effect-7 ~ .focus-border:after {
content: "";
position: absolute;
top: 0;
left: 50%;
width: 0;
height: 2px;
background-color: #3399FF;
transition: 0.4s;
}
.effect-7 ~ .focus-border:after {
top: auto;
bottom: 0;
}
.effect-7 ~ .focus-border i:before,
.effect-7 ~ .focus-border i:after {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 2px;
height: 0;
background-color: #3399FF;
transition: 0.6s;
}
.effect-7 ~ .focus-border i:after {
left: auto;
right: 0;
}
.effect-7:focus ~ .focus-border:before,
.effect-7:focus ~ .focus-border:after {
left: 0;
width: 100%;
transition: 0.4s;
}
.effect-7:focus ~ .focus-border i:before,
.effect-7:focus ~ .focus-border i:after {
top: 0;
height: 100%;
transition: 0.6s;
}
.effect-8 ~ .focus-border:before,
.effect-8 ~ .focus-border:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0;
height: 2px;
background-color: #3399FF;
transition: 0.3s;
}
.effect-8 ~ .focus-border:after {
top: auto;
bottom: 0;
left: auto;
right: 0;
}
.effect-8 ~ .focus-border i:before,
.effect-8 ~ .focus-border i:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 2px;
height: 0;
background-color: #3399FF;
transition: 0.4s;
}
.effect-8 ~ .focus-border i:after {
left: auto;
right: 0;
top: auto;
bottom: 0;
}
.effect-8:focus ~ .focus-border:before,
.effect-8:focus ~ .focus-border:after {
width: 100%;
transition: 0.3s;
}
.effect-8:focus ~ .focus-border i:before,
.effect-8:focus ~ .focus-border i:after {
height: 100%;
transition: 0.4s;
}
.effect-9 ~ .focus-border:before,
.effect-9 ~ .focus-border:after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 0;
height: 2px;
background-color: #3399FF;
transition: 0.2s;
transition-delay: 0.2s;
}
.effect-9 ~ .focus-border:after {
top: auto;
bottom: 0;
right: auto;
left: 0;
transition-delay: 0.6s;
}
.effect-9 ~ .focus-border i:before,
.effect-9 ~ .focus-border i:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 2px;
height: 0;
background-color: #3399FF;
transition: 0.2s;
}
.effect-9 ~ .focus-border i:after {
left: auto;
right: 0;
top: auto;
bottom: 0;
transition-delay: 0.4s;
}
.effect-9:focus ~ .focus-border:before,
.effect-9:focus ~ .focus-border:after {
width: 100%;
transition: 0.2s;
transition-delay: 0.6s;
}
.effect-9:focus ~ .focus-border:after {
transition-delay: 0.2s;
}
.effect-9:focus ~ .focus-border i:before,
.effect-9:focus ~ .focus-border i:after {
height: 100%;
transition: 0.2s;
}
.effect-9:focus ~ .focus-border i:after {
transition-delay: 0.4s;
}
.effect-10,
.effect-11,
.effect-12,
.effect-13,
.effect-14,
.effect-15 {
border: 0;
padding: 7px 15px;
border: 1px solid #ccc;
position: relative;
background: transparent;
}
.effect-10 ~ .focus-bg {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #ededed;
opacity: 0;
transition: 0.5s;
z-index: -1;
}
.effect-10:focus ~ .focus-bg {
transition: 0.5s;
opacity: 1;
}
.effect-11 ~ .focus-bg {
position: absolute;
left: 0;
top: 0;
width: 0;
height: 100%;
background-color: #ededed;
transition: 0.3s;
z-index: -1;
}
.effect-11:focus ~ .focus-bg {
transition: 0.3s;
width: 100%;
}
.effect-12 ~ .focus-bg {
position: absolute;
left: 50%;
top: 0;
width: 0;
height: 100%;
background-color: #ededed;
transition: 0.3s;
z-index: -1;
}
.effect-12:focus ~ .focus-bg {
transition: 0.3s;
width: 100%;
left: 0;
}
.effect-13 ~ .focus-bg:before,
.effect-13 ~ .focus-bg:after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 0;
height: 100%;
background-color: #ededed;
transition: 0.3s;
z-index: -1;
}
.effect-13:focus ~ .focus-bg:before {
transition: 0.3s;
width: 50%;
}
.effect-13 ~ .focus-bg:after {
left: auto;
right: 0;
}
.effect-13:focus ~ .focus-bg:after {
transition: 0.3s;
width: 50%;
}
.effect-14 ~ .focus-bg:before,
.effect-14 ~ .focus-bg:after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
background-color: #ededed;
transition: 0.3s;
z-index: -1;
}
.effect-14:focus ~ .focus-bg:before {
transition: 0.3s;
width: 50%;
height: 100%;
}
.effect-14 ~ .focus-bg:after {
left: auto;
right: 0;
top: auto;
bottom: 0;
}
.effect-14:focus ~ .focus-bg:after {
transition: 0.3s;
width: 50%;
height: 100%;
}
.effect-15 ~ .focus-bg:before,
.effect-15 ~ .focus-bg:after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 0;
height: 0;
background-color: #ededed;
transition: 0.3s;
z-index: -1;
}
.effect-15:focus ~ .focus-bg:before {
transition: 0.3s;
width: 50%;
left: 0;
top: 0;
height: 100%;
}
.effect-15 ~ .focus-bg:after {
left: auto;
right: 50%;
top: auto;
bottom: 50%;
}
.effect-15:focus ~ .focus-bg:after {
transition: 0.3s;
width: 50%;
height: 100%;
bottom: 0;
right: 0;
}
.effect-16,
.effect-17,
.effect-18 {
border: 0;
padding: 4px 0;
border-bottom: 1px solid #ccc;
background-color: transparent;
}
.effect-16 ~ .focus-border {
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background-color: #3399FF;
transition: 0.4s;
}
.effect-16:focus ~ .focus-border,
.has-content.effect-16 ~ .focus-border {
width: 100%;
transition: 0.4s;
}
.effect-16 ~ label {
position: absolute;
left: 0;
width: 100%;
top: 9px;
color: #aaa;
transition: 0.3s;
z-index: -1;
letter-spacing: 0.5px;
}
.effect-16:focus ~ label, .has-content.effect-16 ~ label {
top: -16px;
font-size: 12px;
color: #3399FF;
transition: 0.3s;
}
.effect-17 ~ .focus-border {
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 2px;
background-color: #3399FF;
transition: 0.4s;
}
.effect-17:focus ~ .focus-border,
.has-content.effect-17 ~ .focus-border {
width: 100%;
transition: 0.4s;
left: 0;
}
.effect-17 ~ label {
position: absolute;
left: 0;
width: 100%;
top: 9px;
color: #aaa;
transition: 0.3s;
z-index: -1;
letter-spacing: 0.5px;
}
.effect-17:focus ~ label, .has-content.effect-17 ~ label {
top: -16px;
font-size: 12px;
color: #3399FF;
transition: 0.3s;
}
.effect-18 ~ .focus-border {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
z-index: 99;
}
.effect-18 ~ .focus-border:before,
.effect-18 ~ .focus-border:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 100%;
background-color: #3399FF;
transition: 0.4s;
}
.effect-18 ~ .focus-border:after {
left: auto;
right: 0;
}
.effect-18:focus ~ .focus-border:before,
.effect-18:focus ~ .focus-border:after,
.has-content.effect-18 ~ .focus-border:before,
.has-content.effect-18 ~ .focus-border:after {
width: 50%;
transition: 0.4s;
}
.effect-18 ~ label {
position: absolute;
left: 0;
width: 100%;
top: 9px;
color: #aaa;
transition: 0.3s;
z-index: -1;
letter-spacing: 0.5px;
}
.effect-18:focus ~ label, .has-content.effect-18 ~ label {
top: -16px;
font-size: 12px;
color: #3399FF;
transition: 0.3s;
}
.effect-19,
.effect-20,
.effect-21 {
border: 1px solid #ccc;
padding: 7px 14px;
transition: 0.4s;
background: transparent;
}
.effect-19 ~ .focus-border:before,
.effect-19 ~ .focus-border:after {
content: "";
position: absolute;
top: -1px;
left: 50%;
width: 0;
height: 2px;
background-color: #3399FF;
transition: 0.4s;
}
.effect-19 ~ .focus-border:after {
top: auto;
bottom: 0;
}
.effect-19 ~ .focus-border i:before,
.effect-19 ~ .focus-border i:after {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 2px;
height: 0;
background-color: #3399FF;
transition: 0.6s;
}
.effect-19 ~ .focus-border i:after {
left: auto;
right: 0;
}
.effect-19:focus ~ .focus-border:before,
.effect-19:focus ~ .focus-border:after,
.has-content.effect-19 ~ .focus-border:before,
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0