html表单的边界,HTML5 表单提交时的边界环绕动效

CSS

语言：

CSSSCSS

确定

@import url(http://fonts.googleapis.com/css?family=Economica:400,700);

* {

box-sizing: border-box;

}

html,

body {

width: 100%;

height: 100%;

margin: 0;

padding: 0;

}

body {

font-family: 'Economica', 'Arial', sans-serif;

font-size: 18px;

background: deepskyblue;

}

.container {

position: relative;

max-width: 40%;

min-width: 400px;

margin: 0 auto;

}

form {

position: relative;

width: 100%;

margin: 50px auto;

padding: 50px;

background: white;

text-align: center;

}

input {

display: inline-block;

width: 100%;

margin: 20px 0;

padding: 10px;

border: 2px dashed lightblue;

outline: none;

font-size: 20px;

font-family: 'Economica', 'Arial', sans-serif;

font-weight: 400;

-webkit-transition: all 0.2s ease;

transition: all 0.2s ease;

}

input:focus {

border-color: deepskyblue;

}

button {

position: absolute;

left: calc(50% - 150px / 2);

bottom: calc(- 50px / 2);

width: 150px;

height: 50px;

padding: 10px 15px;

margin-top: 20px;

border: none;

outline: none;

cursor: pointer;

color: white;

font-family: 'Economica', 'Arial', sans-serif;

font-size: 20px;

font-weight: 700;

background: mediumblue;

-webkit-transition: all 0.2s ease;

transition: all 0.2s ease;

}

button:hover {

background: midnightblue;

}

button.valid,

button.valid:hover {

background: mediumseagreen;

}

svg {

position: absolute;

top: 0;

left: 0;

pointer-events: none;

}

svg path {

stroke-width: 10px;

stroke: mediumseagreen;

fill: none;

opacity: 1;

-webkit-transition: opacity 0.5s ease;

transition: opacity 0.5s ease;

}

svg path.hidden {

opacity: 0;

}

svg path.animate {

-webkit-animation: drawBorder 1s linear;

animation: drawBorder 1s linear;

}

@-webkit-keyframes drawBorder {

from {

stroke-dasharray: 4000;

stroke-dashoffset: 4000;

}

to {

stroke-dasharray: 4000;

stroke-dashoffset: 0;

}

}

@keyframes drawBorder {

from {

stroke-dasharray: 4000;

stroke-dashoffset: 4000;

}

to {

stroke-dasharray: 4000;

stroke-dashoffset: 0;

}

}

p {

position: absolute;

top: -50px;

left: 50%;

-webkit-transform: translateX(-50%);

-ms-transform: translateX(-50%);

transform: translateX(-50%);

text-align: center;

color: white;

}

h3 {

margin-top: 0;

margin-bottom: 20px;

text-transform: uppercase;

font-size: 24px;

font-weight: 700;

}