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(50vw - 300px);
	padding:40px 40px 0 40px
}
.container.signed-up {
	background-color:#482C3D;
	transition:all 1s;
	-webkit-animation:sky-color 5s ease;
	animation:sky-color 5s ease
}
.form {
	padding:50px;
	background-color:#F5F5F5;
	width:100%;
	height:100%;
	z-index:10;
	border-radius:50%;
	box-shadow:0 0 0 0 rgba(100,100,100,0),0px 0 0 0 rgba(100,100,100,0)
}
.form.signed-in {
	background-color:#F5F5F5;
	transform:translateY(100%) rotate(90deg) scale(2,2);
	box-shadow:0 100px 0 20px rgba(1,1,1,0.3),-30px -90px 0 5px rgba(1,1,1,0.2);
	transition:all .6s cubic-bezier(0.4,0,0.2,1),box-shadow 2s 1s
}
.form.signed-up {
	background-color:#F5F5F5;
	transform:translateY(100%) rotate(90deg) scale(2,2);
	box-shadow:0 70px 0 10px rgba(255,255,255,0.3),-10px -70px 0 5px rgba(255,255,255,0.2);
	transition:all .6s cubic-bezier(0.4,0,0.2,1),box-shadow 2s 1s
}
form {
	margin:0 auto;
	width:70%;
	height:300px
}
input:-webkit-autofill {
	-webkit-box-shadow:0 0 0 1000px #F5F5F5 inset
}
.sign--type {
	-webkit-animation:slideUp .8s cubic-bezier(0.37,0.82,0.2,1);
	animation:slideUp .8s cubic-bezier(0.37,0.82,0.2,1)
}
input:first-of-type {
	-webkit-animation:slideUp .8s cubic-bezier(0.37,0.82,0.2,1) .1s;
	animation:slideUp .8s cubic-bezier(0.37,0.82,0.2,1) .1s
}
input:nth-of-type(2) {
	-webkit-animation:slideUp .8s cubic-bezier(0.37,0.82,0.2,1) .2s;
	animation:slideUp .8s cubic-bezier(0.37,0.82,0.2,1) .2s
}
input:nth-of-type(3) {
	-webkit-animation:slideUp .8s cubic-bezier(0.37,0.82,0.2,1) .3s;
	animation:slideUp .8s cubic-bezier(0.37,0.82,0.2,1) .3s
}
input:nth-of-type(4) {
	-webkit-animation:slideUp .8s cubic-bezier(0.37,0.82,0.2,1) .4s;
	animation:slideUp .8s cubic-bezier(0.37,0.82,0.2,1) .4s
}
#sun {
	position:absolute;
	width:120px;
	height:120px;
	left:50%;
	margin-left:-60px;
	border-radius:50%;
	background-color:#FFDD59;
	box-shadow:0 0 10px #FFDD59,0 0 50px yellow;
	margin-top:60%;
	z-index:-1;
	transition:all cubic-bezier(0.87,-0.41,0.19,1.44) .4s
}
#sun.signed-in {
	margin-top:10%;
	background-color:#FFDD59;
	box-shadow:0 0 10px #FFDD59,0 0 50px yellow;
	z-index:-1;
	transition:all 2s cubic-bezier(0.84,0.33,0.37,1.42) .5s
}
#sun.signed-up {
	box-shadow:0 0 10px #D8973C,0 0 50px yellow;
	background-color:#FB0;
	-webkit-animation.........完整代码请登录后点击上方下载按钮下载查看