diff --git a/css/login.css b/css/login.css index 9ae07e6..4dcd777 100644 --- a/css/login.css +++ b/css/login.css @@ -1,527 +1,64 @@ -*, *:before, *:after { - box-sizing: border-box; - margin: 0; - padding: 0; +@charset "utf-8"; +/* CSS Document */ + +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 { - font-size: 62.5%; - height: 100%; - overflow: hidden; -} -@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; - } -} +.foot{ position:absolute; bottom:10px; width:100%; padding:0px 10px} +.foot em{ float:left} +.foot span{ float:right; padding-right:10px; color:#dae1e4;} +.foot span a{ padding:0 12px; font-size:14px; color:#dae1e4; } \ No newline at end of file diff --git a/demo.html b/demo.html index 25664cf..c5cc5c0 100644 --- a/demo.html +++ b/demo.html @@ -5,7 +5,7 @@ mac桌面 - + diff --git a/img/apple.ico b/img/apple.ico deleted file mode 100644 index 95392b2..0000000 Binary files a/img/apple.ico and /dev/null differ diff --git a/img/favicon.ico b/img/favicon.ico new file mode 100644 index 0000000..6cc2b26 Binary files /dev/null and b/img/favicon.ico differ diff --git a/img/login/btn.jpg b/img/login/btn.jpg new file mode 100644 index 0000000..a00fcc0 Binary files /dev/null and b/img/login/btn.jpg differ diff --git a/img/login/ers.JPG b/img/login/ers.JPG new file mode 100644 index 0000000..bec0038 Binary files /dev/null and b/img/login/ers.JPG differ diff --git a/img/login/iCloud.jpg b/img/login/iCloud.jpg new file mode 100644 index 0000000..221a718 Binary files /dev/null and b/img/login/iCloud.jpg differ diff --git a/img/login/kuang1.jpg b/img/login/kuang1.jpg new file mode 100644 index 0000000..5cdd223 Binary files /dev/null and b/img/login/kuang1.jpg differ diff --git a/img/login/kuang2.jpg b/img/login/kuang2.jpg new file mode 100644 index 0000000..640d1a8 Binary files /dev/null and b/img/login/kuang2.jpg differ diff --git a/img/login/login.jpg b/img/login/login.jpg new file mode 100644 index 0000000..8ff2a4f Binary files /dev/null and b/img/login/login.jpg differ diff --git a/img/login/login_bg.png b/img/login/login_bg.png new file mode 100644 index 0000000..11cfe84 Binary files /dev/null and b/img/login/login_bg.png differ diff --git a/img/login/pg.png b/img/login/pg.png new file mode 100644 index 0000000..d0d8987 Binary files /dev/null and b/img/login/pg.png differ diff --git a/img/login/wenh.png b/img/login/wenh.png new file mode 100644 index 0000000..5053da4 Binary files /dev/null and b/img/login/wenh.png differ diff --git a/img/login/wmx_bg.png b/img/login/wmx_bg.png new file mode 100644 index 0000000..136d301 Binary files /dev/null and b/img/login/wmx_bg.png differ diff --git a/img/login/yun.png b/img/login/yun.png new file mode 100644 index 0000000..d894097 Binary files /dev/null and b/img/login/yun.png differ diff --git a/index.html b/index.html index 24a6032..c046304 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,7 @@ mac桌面 - + @@ -70,18 +70,6 @@
关于
关闭
-
-
-
Welcome
-
-
-
-
欢迎使用 Win10-UI
-
-
-
-
diff --git a/login.html b/login.html index 522cfac..53767b1 100644 --- a/login.html +++ b/login.html @@ -1,115 +1,82 @@ - - + + + - - 示例登陆页 - - -
-
-
-