jquery炫酷大气日出圆形登录表单页面代码-html代码-BFW代码库

代码语言：html

代码描述：jquery炫酷大气日出圆形登录表单页面代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        button,hr,input {
        overflow:visible
}
audio,canvas,progress,video {
        display:inline-block
}
progress,sub,sup {
        vertical-align:baseline
}
html {
        font-family:sans-serif;
        line-height:1.15;
        -ms-text-size-adjust:100%;
        -webkit-text-size-adjust:100%
}
body {
        margin:0
}
menu,article,aside,details,footer,header,nav,section {
        display:block
}
h1 {
        font-size:2em;
        margin:.67em 0
}
figcaption,figure,main {
        display:block
}
figure {
        margin:1em 40px
}
hr {
        box-sizing:content-box;
        height:0
}
code,kbd,pre,samp {
        font-family:monospace,monospace;
        font-size:1em
}
a {
        background-color:transparent;
        -webkit-text-decoration-skip:objects
}
a:active,a:hover {
        outline-width:0
}
abbr[title] {
        border-bottom:0;
        text-decoration:underline;
        text-decoration:underline dotted
}
b,strong {
        font-weight:bolder
}
dfn {
        font-style:italic
}
mark {
        background-color:#ff0;
        color:#000
}
small {
        font-size:80%
}
sub,sup {
        font-size:75%;
        line-height:0;
        position:relative
}
sub {
        bottom:-.25em
}
sup {
        top:-.5em
}
audio:not([controls]) {
        display:none;
        height:0
}
img {
        border-style:none
}
svg:not(:root) {
        overflow:hidden
}
button,input,optgroup,select,textarea {
        font-family:sans-serif;
        font-size:100%;
        line-height:1.15;
        margin:0
}
button,select {
        text-transform:none
}
[type=submit],[type=reset],button,html [type=button] {
        -webkit-appearance:button
}
[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner {
        border-style:none;
        padding:0
}
[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring {
        outline:ButtonText dotted 1px
}
fieldset {
        border:1px solid silver;
        margin:0 2px;
        padding:.35em .625em .75em
}
legend {
        box-sizing:border-box;
        color:inherit;
        display:table;
        max-width:100%;
        padding:0;
        white-space:normal
}
textarea {
        overflow:auto
}
[type=checkbox],[type=radio] {
        box-sizing:border-box;
        padding:0
}
[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button {
        height:auto
}
[type=search] {
        -webkit-appearance:textfield;
        outline-offset:-2px
}
[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration {
        -webkit-appearance:none
}
::-webkit-file-upload-button {
        -webkit-appearance:button;
        font:inherit
}
summary {
        display:list-item
}
[hidden],template {
        display:none
}
* {
        box-sizing:border-box;
        transition:all .4s cubic-bezier(0.4,0,0.2,1)
}
body {
        font-family:"Cantarell",sans-serif;
        background-color:#17BEBB;
        color:rgba(0,0,0,0.85);
        font-size:16px;
        overflow:hidden
}
a {
        font-size:90%;
        cursor:pointer;
        letter-spacing:2px;
        text-decoration:none;
        border-bottom:1px solid rgba(211,49,68,0.8);
        box-shadow:0 0 0 #F5F5F5,0 0 0 rgba(211,49,68,0.8);
        text-transform:uppercase;
        color:rgba(211,49,68,0.8);
        transition:all .2s
}
a:hover {
        border-bottom:2px solid rgba(211,49,68,0.7);
        box-shadow:0 2px 0 #F5F5F5,0 4px 0 rgba(211,49,68,0.7);
        color:#d33144;
        transition:all .1s
}
#title {
        font-size:110%;
        margin-bottom:23px;
        text-align:center;
        letter-spacing:10px;
        text-indent:10px;
        text-transform:uppercase;
        font-weight:normal;
        color:#F5F5F5;
        text-shadow:0 0 0 rgba(255,255,255,0);
        z-index:-20;
        font-family:"Josefin Sans",sans-serif
}
#title.signed-in {
        text-shadow:0 0 40px white,0 -5px 6px rgba(0,0,0,0.3);
        font-size:180%;
        letter-spacing:20px;
        transform:translateY(85px);
        transition:all 2.5s,text-shadow 4s 1s
}
#title.signed-up {
        text-shadow:0 0 40px white;
        font-size:200%;
        letter-spacing:20px;
        transform:translateY(160px);
        transition:all 1s,text-shadow 4s 1s
}
#message {
        position:absolute;
        text-align:center;
        left:40px;
        right:40px;
        font-size:115%;
        letter-spacing:10px;
        color:#F5F5F5;
        opacity:0;
        top:40%;
        text-shadow:0 0 0 rgba(0,0,0,0.4);
        z-index:-2
}
#message.signed-in {
        opacity:1;
        top:290px;
        font-size:120%;
        letter-spacing:8px;
        text-shadow:0 5px 6px rgba(0,0,0,0.3);
        transition:all 2s .5s,opacity 1s .5s,text-shadow 4s 1s
}
#message.signed-up {
        opacity:1;
        top:200px;
        letter-spacing:8px;
        z-index:11;
        transition:all 2s .5s,opacity 1s 1.5s
}
.content {
        display:flex;
        flex-direction:column
}
.container {
        text-align:center;
        position:relative;
        overflow:hidden;
        width:600px;
        height:600px;
        background-color:#26547C;
        z-index:1;
        border-radius:50%;
        margin:calc(50vh - 300px) 0 0 calc(50v.........完整代码请登录后点击上方下载按钮下载查看