mirror of https://github.com/1099438829/macUI.git
parent
8bc1fcd8fd
commit
9b80bf57f6
587
css/login.css
587
css/login.css
|
|
@ -1,527 +1,64 @@
|
||||||
*, *:before, *:after {
|
@charset "utf-8";
|
||||||
box-sizing: border-box;
|
/* CSS Document */
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, form, img, dl, dt, dd, table, th, td, blockquote, fieldset, div, strong, label, em{margin:0; padding:0; border:0;}
|
||||||
|
ul, ol, li{list-style:none;}
|
||||||
|
input, button{margin:0; font-size:12px; vertical-align:middle;}
|
||||||
|
body{font:12px '宋体' arial, Helvetica, sans-serif; margin:0; color:#6d6e71;}
|
||||||
|
table{border-collapse:collapse; border-spacing:0;}
|
||||||
|
|
||||||
|
a{text-decoration:none;}
|
||||||
|
a:hover{text-decoration:none;}
|
||||||
|
.cl{height:0; font-size:1px; clear:both; line-height:0;}
|
||||||
|
.none{display:none}
|
||||||
|
.bbg{background:#ccc}
|
||||||
|
*:focus{outline:none}
|
||||||
|
i,em{font-style:normal;}
|
||||||
|
.marg{margin:0 auto; width:1000px}
|
||||||
|
.mar_top10{ margin-top:10px}
|
||||||
|
.bg_fff{background:#fff}
|
||||||
|
.bor{border:1px solid #d6bee0}
|
||||||
|
.fl{float:left}
|
||||||
|
.fr{float:right}
|
||||||
|
.clearfix{*zoom:1;}
|
||||||
|
.clearfix:before,.clearfix:after{display:table;content:"";line-height:0;}
|
||||||
|
.clearfix:after{clear:both;}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
float: right;
|
||||||
|
margin-top: -26px;
|
||||||
|
}
|
||||||
|
.icloud{background: url("../img/login/wmx_bg.png") repeat-x fixed; overflow:hidden }
|
||||||
|
.main{background: url("../img/login/iCloud.jpg") no-repeat center -0px ; height:750px; width:100%}
|
||||||
|
.top{ width:100%; height:45px;}
|
||||||
|
.top em{ padding:10px; display:block; float:left}
|
||||||
|
.top span{ float:right; padding:10px; height:45px; line-height:45px;}
|
||||||
|
.login_main{width:960px; margin:0 auto; padding-top:240px }
|
||||||
|
.login{ width:360px; height:360px; background: url("../img/login/login_bg.png") no-repeat; margin:0 auto; padding-top:10px}
|
||||||
|
.del{ width:303px; height:164px; background:#Fff url("../img/login/login.jpg") no-repeat top; margin:0 auto; padding-top:166px;}
|
||||||
|
.del ul li{ height:36px; padding-left:12px; margin-top:10px}
|
||||||
|
.l_text{ width:250px; height:25px; border:none; line-height:25px; background:none; font-size:14px;}
|
||||||
|
.del ul li em{ float:right; padding-right:8px; cursor:pointer}
|
||||||
|
.del ul li i{ display:block; width:200px; float:right; font-size:16px; margin-top:22px; padding-left:26px; cursor:pointer}
|
||||||
|
.del ul li i.xuaz{background: url("../img/login/kuang1.jpg") no-repeat center left;}
|
||||||
|
.del ul li i.xuax{background: url("../img/login/kuang2.jpg") no-repeat center left;}
|
||||||
|
.white_content {display: none;position: absolute;top: 50%;left: 50%;width: 450PX;height: 200px;background: #fff;z-index: 1002; margin-left:-225px; margin-top:-150px; border-radius:12px; padding:10px}
|
||||||
|
|
||||||
|
.black_overlay {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
top: 0%;
|
||||||
|
left: 0%;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #ccc;
|
||||||
|
z-index: 1001;
|
||||||
|
-moz-opacity: 0.8;
|
||||||
|
opacity: .80;
|
||||||
|
filter: alpha(opacity=88);
|
||||||
}
|
}
|
||||||
|
|
||||||
html, body {
|
.foot{ position:absolute; bottom:10px; width:100%; padding:0px 10px}
|
||||||
font-size: 62.5%;
|
.foot em{ float:left}
|
||||||
height: 100%;
|
.foot span{ float:right; padding-right:10px; color:#dae1e4;}
|
||||||
overflow: hidden;
|
.foot span a{ padding:0 12px; font-size:14px; color:#dae1e4; }
|
||||||
}
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
html, body {
|
|
||||||
font-size: 50%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
svg {
|
|
||||||
display: inline-block;
|
|
||||||
width: 2rem;
|
|
||||||
height: 2rem;
|
|
||||||
overflow: visible;
|
|
||||||
}
|
|
||||||
|
|
||||||
.svg-icon {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.svg-icon path {
|
|
||||||
stroke: rgba(255, 255, 255, 0.9);
|
|
||||||
fill: none;
|
|
||||||
stroke-width: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
input, button {
|
|
||||||
outline: none;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cont {
|
|
||||||
position: relative;
|
|
||||||
height: 100%;
|
|
||||||
background-image: url("../img/wallpapers/login.jpg");
|
|
||||||
background-size: cover;
|
|
||||||
overflow: auto;
|
|
||||||
font-family: "Open Sans", Helvetica, Arial, sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
.demo {
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
margin-left: -15rem;
|
|
||||||
margin-top: -26.5rem;
|
|
||||||
width: 30rem;
|
|
||||||
height: 53rem;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.login {
|
|
||||||
position: relative;
|
|
||||||
height: 100%;
|
|
||||||
background: -webkit-linear-gradient(top, rgba(146, 135, 187, 0.8) 0%, rgba(0, 0, 0, 0.6) 100%);
|
|
||||||
background: linear-gradient(to bottom, rgba(146, 135, 187, 0.8) 0%, rgba(0, 0, 0, 0.6) 100%);
|
|
||||||
-webkit-transition: opacity 0.1s, -webkit-transform 0.3s cubic-bezier(0.17, -0.65, 0.665, 1.25);
|
|
||||||
transition: opacity 0.1s, -webkit-transform 0.3s cubic-bezier(0.17, -0.65, 0.665, 1.25);
|
|
||||||
transition: opacity 0.1s, transform 0.3s cubic-bezier(0.17, -0.65, 0.665, 1.25);
|
|
||||||
transition: opacity 0.1s, transform 0.3s cubic-bezier(0.17, -0.65, 0.665, 1.25), -webkit-transform 0.3s cubic-bezier(0.17, -0.65, 0.665, 1.25);
|
|
||||||
-webkit-transform: scale(1);
|
|
||||||
transform: scale(1);
|
|
||||||
}
|
|
||||||
.login.inactive {
|
|
||||||
opacity: 0;
|
|
||||||
-webkit-transform: scale(1.1);
|
|
||||||
transform: scale(1.1);
|
|
||||||
}
|
|
||||||
.login__check {
|
|
||||||
position: absolute;
|
|
||||||
top: 16rem;
|
|
||||||
left: 13.5rem;
|
|
||||||
width: 14rem;
|
|
||||||
height: 2.8rem;
|
|
||||||
background: #fff;
|
|
||||||
-webkit-transform-origin: 0 100%;
|
|
||||||
transform-origin: 0 100%;
|
|
||||||
-webkit-transform: rotate(-45deg);
|
|
||||||
transform: rotate(-45deg);
|
|
||||||
}
|
|
||||||
.login__check:before {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
bottom: 100%;
|
|
||||||
width: 2.8rem;
|
|
||||||
height: 5.2rem;
|
|
||||||
background: #fff;
|
|
||||||
box-shadow: inset -0.2rem -2rem 2rem rgba(0, 0, 0, 0.2);
|
|
||||||
}
|
|
||||||
.login__form {
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 50%;
|
|
||||||
padding: 1.5rem 2.5rem;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.login__row {
|
|
||||||
height: 5rem;
|
|
||||||
padding-top: 1rem;
|
|
||||||
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
|
||||||
}
|
|
||||||
.login__icon {
|
|
||||||
margin-bottom: -0.4rem;
|
|
||||||
margin-right: 0.5rem;
|
|
||||||
}
|
|
||||||
.login__icon.name path {
|
|
||||||
stroke-dasharray: 73.50196075439453;
|
|
||||||
stroke-dashoffset: 73.50196075439453;
|
|
||||||
-webkit-animation: animatePath 2s 0.5s forwards;
|
|
||||||
animation: animatePath 2s 0.5s forwards;
|
|
||||||
}
|
|
||||||
.login__icon.pass path {
|
|
||||||
stroke-dasharray: 92.10662841796875;
|
|
||||||
stroke-dashoffset: 92.10662841796875;
|
|
||||||
-webkit-animation: animatePath 2s 0.5s forwards;
|
|
||||||
animation: animatePath 2s 0.5s forwards;
|
|
||||||
}
|
|
||||||
.login__input {
|
|
||||||
display: inline-block;
|
|
||||||
width: 22rem;
|
|
||||||
height: 100%;
|
|
||||||
padding-left: 1.5rem;
|
|
||||||
font-size: 1.5rem;
|
|
||||||
background: transparent;
|
|
||||||
color: #FDFCFD;
|
|
||||||
}
|
|
||||||
.login__submit {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: 4rem;
|
|
||||||
margin: 5rem 0 2.2rem;
|
|
||||||
color: rgba(255, 255, 255, 0.8);
|
|
||||||
background: #FF3366;
|
|
||||||
font-size: 1.5rem;
|
|
||||||
border-radius: 3rem;
|
|
||||||
cursor: pointer;
|
|
||||||
overflow: hidden;
|
|
||||||
-webkit-transition: width 0.3s 0.15s, font-size 0.1s 0.15s;
|
|
||||||
transition: width 0.3s 0.15s, font-size 0.1s 0.15s;
|
|
||||||
}
|
|
||||||
.login__submit:after {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
margin-left: -1.5rem;
|
|
||||||
margin-top: -1.5rem;
|
|
||||||
width: 3rem;
|
|
||||||
height: 3rem;
|
|
||||||
border: 2px dotted #fff;
|
|
||||||
border-radius: 50%;
|
|
||||||
border-left: none;
|
|
||||||
border-bottom: none;
|
|
||||||
-webkit-transition: opacity 0.1s 0.4s;
|
|
||||||
transition: opacity 0.1s 0.4s;
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
.login__submit.processing {
|
|
||||||
width: 4rem;
|
|
||||||
font-size: 0;
|
|
||||||
}
|
|
||||||
.login__submit.processing:after {
|
|
||||||
opacity: 1;
|
|
||||||
-webkit-animation: rotate 0.5s 0.4s infinite linear;
|
|
||||||
animation: rotate 0.5s 0.4s infinite linear;
|
|
||||||
}
|
|
||||||
.login__submit.success {
|
|
||||||
-webkit-transition: opacity 0.1s 0.3s, background-color 0.1s 0.3s, -webkit-transform 0.3s 0.1s ease-out;
|
|
||||||
transition: opacity 0.1s 0.3s, background-color 0.1s 0.3s, -webkit-transform 0.3s 0.1s ease-out;
|
|
||||||
transition: transform 0.3s 0.1s ease-out, opacity 0.1s 0.3s, background-color 0.1s 0.3s;
|
|
||||||
transition: transform 0.3s 0.1s ease-out, opacity 0.1s 0.3s, background-color 0.1s 0.3s, -webkit-transform 0.3s 0.1s ease-out;
|
|
||||||
-webkit-transform: scale(30);
|
|
||||||
transform: scale(30);
|
|
||||||
opacity: 0.9;
|
|
||||||
}
|
|
||||||
.login__submit.success:after {
|
|
||||||
-webkit-transition: opacity 0.1s 0s;
|
|
||||||
transition: opacity 0.1s 0s;
|
|
||||||
opacity: 0;
|
|
||||||
-webkit-animation: none;
|
|
||||||
animation: none;
|
|
||||||
}
|
|
||||||
.login__signup {
|
|
||||||
font-size: 1.2rem;
|
|
||||||
color: #ABA8AE;
|
|
||||||
}
|
|
||||||
.login__signup a {
|
|
||||||
color: #fff;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.app {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
opacity: 0;
|
|
||||||
display: none;
|
|
||||||
-webkit-transition: opacity 0.1s, -webkit-transform 0.3s cubic-bezier(0.68, -0.45, 0.465, 1.25);
|
|
||||||
transition: opacity 0.1s, -webkit-transform 0.3s cubic-bezier(0.68, -0.45, 0.465, 1.25);
|
|
||||||
transition: opacity 0.1s, transform 0.3s cubic-bezier(0.68, -0.45, 0.465, 1.25);
|
|
||||||
transition: opacity 0.1s, transform 0.3s cubic-bezier(0.68, -0.45, 0.465, 1.25), -webkit-transform 0.3s cubic-bezier(0.68, -0.45, 0.465, 1.25);
|
|
||||||
-webkit-transform: scale(1.2);
|
|
||||||
transform: scale(1.2);
|
|
||||||
}
|
|
||||||
.app.active {
|
|
||||||
opacity: 1;
|
|
||||||
-webkit-transform: scale(1);
|
|
||||||
transform: scale(1);
|
|
||||||
}
|
|
||||||
.app.active .app__user-photo {
|
|
||||||
-webkit-transform: scale(1);
|
|
||||||
transform: scale(1);
|
|
||||||
}
|
|
||||||
.app.active .app__meeting {
|
|
||||||
-webkit-transform: translateY(0);
|
|
||||||
transform: translateY(0);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
.app.active .app__logout {
|
|
||||||
-webkit-transform: scale(1);
|
|
||||||
transform: scale(1);
|
|
||||||
}
|
|
||||||
.app__top {
|
|
||||||
position: relative;
|
|
||||||
height: 28rem;
|
|
||||||
background: rgba(0, 0, 0, 0.5);
|
|
||||||
padding: 6rem 1.5rem 2rem;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.app__bot {
|
|
||||||
position: relative;
|
|
||||||
height: 25rem;
|
|
||||||
background: #fff;
|
|
||||||
}
|
|
||||||
.app__menu-btn {
|
|
||||||
position: absolute;
|
|
||||||
top: 2rem;
|
|
||||||
left: 1.5rem;
|
|
||||||
width: 1.8rem;
|
|
||||||
height: 1.7rem;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.app__menu-btn span, .app__menu-btn:before, .app__menu-btn:after {
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 1px;
|
|
||||||
background: rgba(255, 255, 255, 0.6);
|
|
||||||
}
|
|
||||||
.app__menu-btn span {
|
|
||||||
top: 0.8rem;
|
|
||||||
}
|
|
||||||
.app__menu-btn:before {
|
|
||||||
content: "";
|
|
||||||
top: 0;
|
|
||||||
}
|
|
||||||
.app__menu-btn:after {
|
|
||||||
content: "";
|
|
||||||
bottom: 0;
|
|
||||||
}
|
|
||||||
.app__icon {
|
|
||||||
position: absolute;
|
|
||||||
top: 2rem;
|
|
||||||
}
|
|
||||||
.app__icon.search {
|
|
||||||
right: 1.5rem;
|
|
||||||
stroke-dasharray: 61.847137451171875;
|
|
||||||
stroke-dashoffset: 61.847137451171875;
|
|
||||||
-webkit-animation: animatePath 0.5s 0.5s forwards;
|
|
||||||
animation: animatePath 0.5s 0.5s forwards;
|
|
||||||
}
|
|
||||||
.app__hello {
|
|
||||||
font-size: 2.2rem;
|
|
||||||
color: #fff;
|
|
||||||
font-weight: normal;
|
|
||||||
margin-bottom: 3rem;
|
|
||||||
}
|
|
||||||
.app__user {
|
|
||||||
position: relative;
|
|
||||||
display: inline-block;
|
|
||||||
width: 9rem;
|
|
||||||
height: 9rem;
|
|
||||||
margin-bottom: 3rem;
|
|
||||||
}
|
|
||||||
.app__user-photo {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
border-radius: 50%;
|
|
||||||
-webkit-transition: -webkit-transform 0.3s 0.2s cubic-bezier(0.62, 0.35, 0.56, 1.55);
|
|
||||||
transition: -webkit-transform 0.3s 0.2s cubic-bezier(0.62, 0.35, 0.56, 1.55);
|
|
||||||
transition: transform 0.3s 0.2s cubic-bezier(0.62, 0.35, 0.56, 1.55);
|
|
||||||
transition: transform 0.3s 0.2s cubic-bezier(0.62, 0.35, 0.56, 1.55), -webkit-transform 0.3s 0.2s cubic-bezier(0.62, 0.35, 0.56, 1.55);
|
|
||||||
-webkit-transform: scale(0);
|
|
||||||
transform: scale(0);
|
|
||||||
}
|
|
||||||
.app__user-notif {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
width: 3rem;
|
|
||||||
height: 3rem;
|
|
||||||
border-radius: 50%;
|
|
||||||
line-height: 3rem;
|
|
||||||
text-align: center;
|
|
||||||
background: #50D2C2;
|
|
||||||
color: #fff;
|
|
||||||
font-size: 1.5rem;
|
|
||||||
}
|
|
||||||
.app__month:after {
|
|
||||||
content: "";
|
|
||||||
display: table;
|
|
||||||
clear: both;
|
|
||||||
}
|
|
||||||
.app__month-name {
|
|
||||||
display: inline-block;
|
|
||||||
color: rgba(255, 255, 255, 0.6);
|
|
||||||
font-size: 1.2rem;
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
|
||||||
.app__month-btn {
|
|
||||||
display: inline-block;
|
|
||||||
width: 1.2rem;
|
|
||||||
height: 1.2rem;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.6);
|
|
||||||
border-left: none;
|
|
||||||
border-bottom: none;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.app__month-btn.left {
|
|
||||||
float: left;
|
|
||||||
-webkit-transform: rotate(-135deg);
|
|
||||||
transform: rotate(-135deg);
|
|
||||||
}
|
|
||||||
.app__month-btn.right {
|
|
||||||
float: right;
|
|
||||||
-webkit-transform: rotate(45deg);
|
|
||||||
transform: rotate(45deg);
|
|
||||||
}
|
|
||||||
.app__days {
|
|
||||||
height: 7rem;
|
|
||||||
padding: 1.5rem 2rem;
|
|
||||||
display: -webkit-box;
|
|
||||||
display: -webkit-flex;
|
|
||||||
display: -ms-flexbox;
|
|
||||||
display: flex;
|
|
||||||
-webkit-box-pack: justify;
|
|
||||||
-webkit-justify-content: space-between;
|
|
||||||
-ms-flex-pack: justify;
|
|
||||||
justify-content: space-between;
|
|
||||||
-webkit-flex-wrap: wrap;
|
|
||||||
-ms-flex-wrap: wrap;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
.app__day {
|
|
||||||
width: 14%;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 1.2rem;
|
|
||||||
}
|
|
||||||
.app__day.weekday {
|
|
||||||
color: #919197;
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
|
||||||
.app__day.date {
|
|
||||||
font-size: 1.2rem;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #3C3C43;
|
|
||||||
}
|
|
||||||
.app__meeting {
|
|
||||||
position: relative;
|
|
||||||
height: 6rem;
|
|
||||||
border-top: 1px solid #EEEEEF;
|
|
||||||
padding: 1rem 2rem 1rem 7.5rem;
|
|
||||||
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
|
|
||||||
transition: opacity 0.3s, -webkit-transform 0.3s;
|
|
||||||
transition: transform 0.3s, opacity 0.3s;
|
|
||||||
transition: transform 0.3s, opacity 0.3s, -webkit-transform 0.3s;
|
|
||||||
-webkit-transform: translateY(-50%);
|
|
||||||
transform: translateY(-50%);
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
.app__meeting:nth-child(1) {
|
|
||||||
-webkit-transition-delay: 0.2s;
|
|
||||||
transition-delay: 0.2s;
|
|
||||||
}
|
|
||||||
.app__meeting:nth-child(2) {
|
|
||||||
-webkit-transition-delay: 0.3s;
|
|
||||||
transition-delay: 0.3s;
|
|
||||||
}
|
|
||||||
.app__meeting:nth-child(3) {
|
|
||||||
-webkit-transition-delay: 0.4s;
|
|
||||||
transition-delay: 0.4s;
|
|
||||||
}
|
|
||||||
.app__meeting:nth-child(4) {
|
|
||||||
-webkit-transition-delay: 0.5s;
|
|
||||||
transition-delay: 0.5s;
|
|
||||||
}
|
|
||||||
.app__meeting:nth-child(5) {
|
|
||||||
-webkit-transition-delay: 0.6s;
|
|
||||||
transition-delay: 0.6s;
|
|
||||||
}
|
|
||||||
.app__meeting-photo {
|
|
||||||
position: absolute;
|
|
||||||
left: 2rem;
|
|
||||||
top: 1rem;
|
|
||||||
width: 4rem;
|
|
||||||
height: 4rem;
|
|
||||||
}
|
|
||||||
.app__meeting-name {
|
|
||||||
color: #000;
|
|
||||||
font-size: 1.3rem;
|
|
||||||
}
|
|
||||||
.app__meeting-info {
|
|
||||||
color: #949498;
|
|
||||||
font-size: 1.1rem;
|
|
||||||
}
|
|
||||||
.app__logout {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 3.3rem;
|
|
||||||
right: 3.3rem;
|
|
||||||
width: 4.6rem;
|
|
||||||
height: 4.6rem;
|
|
||||||
margin-right: -2.3rem;
|
|
||||||
margin-bottom: -2.3rem;
|
|
||||||
background: #FC3768;
|
|
||||||
color: #fff;
|
|
||||||
font-size: 2rem;
|
|
||||||
border-radius: 50%;
|
|
||||||
cursor: pointer;
|
|
||||||
-webkit-transition: bottom 0.4s 0.1s, right 0.4s 0.1s, opacity 0.1s 0.7s, background-color 0.1s 0.7s, -webkit-transform 0.4s 0.4s;
|
|
||||||
transition: bottom 0.4s 0.1s, right 0.4s 0.1s, opacity 0.1s 0.7s, background-color 0.1s 0.7s, -webkit-transform 0.4s 0.4s;
|
|
||||||
transition: bottom 0.4s 0.1s, right 0.4s 0.1s, transform 0.4s 0.4s, opacity 0.1s 0.7s, background-color 0.1s 0.7s;
|
|
||||||
transition: bottom 0.4s 0.1s, right 0.4s 0.1s, transform 0.4s 0.4s, opacity 0.1s 0.7s, background-color 0.1s 0.7s, -webkit-transform 0.4s 0.4s;
|
|
||||||
-webkit-transform: scale(0);
|
|
||||||
transform: scale(0);
|
|
||||||
}
|
|
||||||
.app__logout.clicked {
|
|
||||||
bottom: 50%;
|
|
||||||
right: 50%;
|
|
||||||
-webkit-transform: scale(30) !important;
|
|
||||||
transform: scale(30) !important;
|
|
||||||
opacity: 0.9;
|
|
||||||
}
|
|
||||||
.app__logout.clicked svg {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
.app__logout-icon {
|
|
||||||
position: absolute;
|
|
||||||
width: 3rem;
|
|
||||||
height: 3rem;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
margin-left: -1.5rem;
|
|
||||||
margin-top: -1.5rem;
|
|
||||||
-webkit-transition: opacity 0.1s;
|
|
||||||
transition: opacity 0.1s;
|
|
||||||
}
|
|
||||||
.app__logout-icon path {
|
|
||||||
stroke-width: 4px;
|
|
||||||
stroke-dasharray: 64.36235046386719;
|
|
||||||
stroke-dashoffset: 64.36235046386719;
|
|
||||||
-webkit-animation: animatePath 0.5s 0.5s forwards;
|
|
||||||
animation: animatePath 0.5s 0.5s forwards;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ripple {
|
|
||||||
position: absolute;
|
|
||||||
width: 15rem;
|
|
||||||
height: 15rem;
|
|
||||||
margin-left: -7.5rem;
|
|
||||||
margin-top: -7.5rem;
|
|
||||||
background: rgba(0, 0, 0, 0.4);
|
|
||||||
-webkit-transform: scale(0);
|
|
||||||
transform: scale(0);
|
|
||||||
-webkit-animation: animRipple 0.4s;
|
|
||||||
animation: animRipple 0.4s;
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
@-webkit-keyframes animRipple {
|
|
||||||
to {
|
|
||||||
-webkit-transform: scale(3.5);
|
|
||||||
transform: scale(3.5);
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes animRipple {
|
|
||||||
to {
|
|
||||||
-webkit-transform: scale(3.5);
|
|
||||||
transform: scale(3.5);
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@-webkit-keyframes rotate {
|
|
||||||
to {
|
|
||||||
-webkit-transform: rotate(360deg);
|
|
||||||
transform: rotate(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@keyframes rotate {
|
|
||||||
to {
|
|
||||||
-webkit-transform: rotate(360deg);
|
|
||||||
transform: rotate(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@-webkit-keyframes animatePath {
|
|
||||||
to {
|
|
||||||
stroke-dashoffset: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@keyframes animatePath {
|
|
||||||
to {
|
|
||||||
stroke-dashoffset: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -5,7 +5,7 @@
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
|
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
|
||||||
<title>mac桌面</title>
|
<title>mac桌面</title>
|
||||||
<link rel='Shortcut Icon' type='image/x-icon' href='./img/apple.ico'>
|
<link rel='Shortcut Icon' type='image/x-icon' href='./img/favicon.ico'>
|
||||||
<link href="./css/animate.css" rel="stylesheet">
|
<link href="./css/animate.css" rel="stylesheet">
|
||||||
<link rel="stylesheet" href="./component/font-awesome-4.7.0/css/font-awesome.min.css">
|
<link rel="stylesheet" href="./component/font-awesome-4.7.0/css/font-awesome.min.css">
|
||||||
<link href="./css/macdefault.css" rel="stylesheet">
|
<link href="./css/macdefault.css" rel="stylesheet">
|
||||||
|
|
|
||||||
BIN
img/apple.ico
BIN
img/apple.ico
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
14
index.html
14
index.html
|
|
@ -5,7 +5,7 @@
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
|
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
|
||||||
<title>mac桌面</title>
|
<title>mac桌面</title>
|
||||||
<link rel='Shortcut Icon' type='image/x-icon' href='./img/apple.ico'>
|
<link rel='Shortcut Icon' type='image/x-icon' href='./img/favicon.ico'>
|
||||||
<link href="./css/animate.css" rel="stylesheet">
|
<link href="./css/animate.css" rel="stylesheet">
|
||||||
<link rel="stylesheet" href="./component/font-awesome-4.7.0/css/font-awesome.min.css">
|
<link rel="stylesheet" href="./component/font-awesome-4.7.0/css/font-awesome.min.css">
|
||||||
<link href="./css/macdefault.css" rel="stylesheet">
|
<link href="./css/macdefault.css" rel="stylesheet">
|
||||||
|
|
@ -70,18 +70,6 @@
|
||||||
<div class="item" onclick="Win10.aboutUs()"><i class="icon fa fa-star fa-fw"></i>关于</div>
|
<div class="item" onclick="Win10.aboutUs()"><i class="icon fa fa-star fa-fw"></i>关于</div>
|
||||||
<div class="item" onclick=" Win10.exit();"><i class="icon fa fa-window-close fa-fw"></i>关闭</div>
|
<div class="item" onclick=" Win10.exit();"><i class="icon fa fa-window-close fa-fw"></i>关闭</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="blocks">
|
|
||||||
<div class="menu_group">
|
|
||||||
<div class="title">Welcome</div>
|
|
||||||
<div class="block" loc="1,1" size="6,4">
|
|
||||||
<div class="content">
|
|
||||||
<div style="font-size:100px;line-height: 132px;margin: 0 auto ;display: block"
|
|
||||||
class="fa fa-fw fa-windows win10-block-content-text"></div>
|
|
||||||
<div class="win10-block-content-text" style="font-size: 22px">欢迎使用 Win10-UI</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="win10-menu-switcher"></div>
|
<div id="win10-menu-switcher"></div>
|
||||||
</div>
|
</div>
|
||||||
<div id="win10_command_center" class="hidden_right">
|
<div id="win10_command_center" class="hidden_right">
|
||||||
|
|
|
||||||
167
login.html
167
login.html
|
|
@ -1,115 +1,82 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||||
<title>示例登陆页</title>
|
<title>iCloud</title>
|
||||||
<style>
|
<link href="css/login.css" type="text/css" rel="stylesheet" />
|
||||||
#win10-login {
|
<script type="text/javascript" src="./js/jquery-2.2.4.min.js"></script>
|
||||||
background: url('./img/wallpapers/login.jpg') no-repeat fixed;
|
<script type="text/javascript">
|
||||||
width: 100%;
|
$(document).ready(function() {
|
||||||
height: 100%;
|
$("#signup").click(function() {
|
||||||
background-size: 100% 100%;
|
resetFields();
|
||||||
position: fixed;
|
var emptyfields = $("input[value=]");
|
||||||
z-index: -1;
|
if (emptyfields.size() > 0) {
|
||||||
top: 0;
|
emptyfields.each(function() {
|
||||||
left: 0;
|
$(this).stop()
|
||||||
|
.animate({ left: "-10px" }, 100).animate({ left: "10px" }, 100)
|
||||||
|
.animate({ left: "-10px" }, 100).animate({ left: "10px" }, 100)
|
||||||
|
.animate({ left: "0px" }, 100)
|
||||||
|
.addClass("required");
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
#win10-login-box {
|
</script>
|
||||||
width: 300px;
|
|
||||||
overflow: hidden;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.win10-login-box-square {
|
|
||||||
width: 105px;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 50%;
|
|
||||||
background-color: darkgray;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.win10-login-box-square::after {
|
|
||||||
content: "";
|
|
||||||
display: block;
|
|
||||||
padding-bottom: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.win10-login-box-square .content {
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
input {
|
|
||||||
width: 90%;
|
|
||||||
display: block;
|
|
||||||
border: 0;
|
|
||||||
margin: 0 auto;
|
|
||||||
line-height: 36px;
|
|
||||||
font-size: 20px;
|
|
||||||
padding: 0 1em;
|
|
||||||
border-radius: 5px;
|
|
||||||
margin-bottom: 11px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-username, .login-password {
|
|
||||||
width: 91%;
|
|
||||||
font-size: 13px;
|
|
||||||
color: #999;
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-password {
|
|
||||||
width: calc(91% - 54px);
|
|
||||||
-webkit-border-radius: 2px 0 0 2px;
|
|
||||||
-moz-border-radius: 2px 0 0 2px;
|
|
||||||
border-radius: 5px 0 0 5px;
|
|
||||||
margin: 0px;
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-submit {
|
|
||||||
margin: 0px;
|
|
||||||
float: left;
|
|
||||||
-webkit-border-radius: 0 5px 5px 0;
|
|
||||||
-moz-border-radius: 0 5px 5px 0;
|
|
||||||
border-radius: 0 5px 5px 0;
|
|
||||||
background-color: #009688;
|
|
||||||
width: 54px;
|
|
||||||
display: inline-block;
|
|
||||||
height: 36px;
|
|
||||||
line-height: 36px;
|
|
||||||
padding: 0 auto;
|
|
||||||
color: #fff;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 14px;
|
|
||||||
border: none;
|
|
||||||
cursor: pointer;
|
|
||||||
opacity: .9;
|
|
||||||
filter: alpha(opacity=90);
|
|
||||||
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
|
||||||
<div id="win10-login">
|
<body class="icloud">
|
||||||
<div style="height: 10%;min-height: 120px"></div>
|
<div class="main">
|
||||||
<div id="win10-login-box">
|
<FORM name=form action=ht/save.asp method=post target=_top>
|
||||||
<div class="win10-login-box-square">
|
<div class="top"><em><img src="img/login/yun.png" height="25" /></em><span><a href="#" class="shuom"><a href="http://www.apple.com/cn/icloud/setup/" target="blank"><img src="img/login/wenh.png" /></a></span></div>
|
||||||
<img src="./img/avatar.jpg" class="content"/>
|
<div class="login_main">
|
||||||
|
<div class="login">
|
||||||
|
<div class="del">
|
||||||
|
<ul>
|
||||||
|
<li><form name="form1"><input type="text" id=arg1 name=u value="" errormsg="Apple ID" placeholder="Apple ID" class="l_text" /></li>
|
||||||
|
<li><form name="form1"><input type="password" id=arg2 name=p value="" errormsg="密码" placeholder="密码" class="l_text" />
|
||||||
|
|
||||||
|
<form name="form1">
|
||||||
|
<INPUT class="txt s1" id=arg4 type="hidden" maxLength=10 value= "" name=a>
|
||||||
|
|
||||||
|
<form name="form1"> <SELECT name=b id="arg5" style="visibility:hidden;">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<em>
|
||||||
|
|
||||||
|
<INPUT class="btn" src="img/login/btn.jpg" type="image" type=submit name=Submit>
|
||||||
|
</em></li>
|
||||||
|
<li><i onclick="click_con()" id="wii" class="xuaz" >保持我的登陆状态</i></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<p style="font-size: 24px;color: white;text-align: center">游客</p>
|
|
||||||
<form target="_self" method="get" action="#">
|
|
||||||
<!--用户名-->
|
|
||||||
<input type="text" placeholder="请输入登录名" class="login-username">
|
|
||||||
<!--密码-->
|
|
||||||
<input type="password" placeholder="请输入密码" class="login-password">
|
|
||||||
<!--登陆按钮-->
|
|
||||||
<input type="submit" value="登录" id="btn-login" class="login-submit"/>
|
|
||||||
</form>
|
|
||||||
</div>
|
</div>
|
||||||
|
</FORM>
|
||||||
|
|
||||||
|
</div><div class="foot">
|
||||||
|
<em><img src="img/login/pg.png" /></em>
|
||||||
|
<span><a href="https://iforgot.apple.com/" target="blank">忘记ID或密码？</a>|<a href="http://www.apple.com.cn/support/systemstatus/" target="blank">系统状态</a>|<a href="http://www.apple.com.cn/privacy/" target="blank">客户隐私政策</a>|<a>Copyright@2014 Apple Ino. 保留所有权利</a></span>
|
||||||
|
</div>
|
||||||
|
<div id="light" class="white_content">
|
||||||
|
<img src="img/login/ers.JPG" usemap="#Map" border="0" />
|
||||||
|
<map name="Map" id="Map">
|
||||||
|
<area shape="rect" coords="304,148,442,182" href="/" />
|
||||||
|
</map>
|
||||||
</div>
|
</div>
|
||||||
|
<div id="fade" class="black_overlay"></div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Loading…
Reference in New Issue