code clean

todd404 · Apr 24, 2018 · 4583cb8 · 4583cb8
1 parent a8a67ab
commit 4583cb8
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 47 deletions.
diff --git a/assets/index.html b/assets/index.html
@@ -10,8 +10,11 @@
 </head>
 
 <body>
-<div class="open_button"></div>
-<div class="manage_button"></div>
-<div class="password_button"></div>
+    <div class="buttons">
+        <div class="open_button"></div>
+        <div class="manage_button"></div>
+         <div class="password_button"></div>
+    </div>
+
 </body>
 </html>
diff --git a/assets/js/bundle.js b/assets/js/bundle.js
diff --git a/src/css/animation.css b/src/css/animation.css
@@ -11,8 +11,7 @@
 	0% {
 	  width: 5vw;
 		height: 5vw;
-		margin-top: -2.5vw;
-		margin-left: -2.5vw;
+		left: calc(50% - 2.5vw);
 
 	  -webkit-transform: translate3d(0, -3000px, 0);
 	  transform: translate3d(0, -3000px, 0);
@@ -36,8 +35,7 @@
 	to {
 	  width: 26vw;
 		height: 26vw;
-		margin-top: -13vw;
-		margin-left: -13vw;
+		left: calc(50% - 13vw);
 
 	  -webkit-transform: translate3d(0, 0, 0);
 	  transform: translate3d(0, 0, 0);
@@ -48,33 +46,16 @@
 	to {
 		opacity: .6;
 		left: 5%;
-		margin-left: 0;
 	}
 }
 
 @keyframes moveToRight{
 	to {
 		opacity: .6;
 		right: 5%;
-		margin-right: 0;
 	}
 }
 
-@keyframes init{
-	from{
-		border-width: 0;
-	} 
-	to{
-		border-width: 5px;
-		border-color: linear-gradient(to right, #ddd6f3, #faaca8);
-	}
-}
-
-.init{
-	animation: 1s init infinite;
-}
-
-
 .bounceIn{
 	animation: 1s bounceInDown;
 }
@@ -85,7 +66,4 @@
 
 .moveToRight{
 	animation: 1s moveToRight forwards;
-}
-
-
-
+}
diff --git a/src/css/index.css b/src/css/index.css
@@ -17,37 +17,33 @@ body{
 	width : 26vw;
 	height: 26vw;
 
-	top       : 50%;
-	margin-top: -13%;
+	top: calc(50% - 13vw);
 
 	border-radius: 50%;
 
 	position: fixed;
 
 	background-color: whitesmoke;
+
+	box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 1px 0 #6f6;
 }
 
 .open_button, .password_button{
-	opacity: 0;
+	z-index: -1;
+	opacity: 0;	/*开始先隐藏左右两个按钮*/
 }
 
 .open_button{
-	z-index    : -1;
-	left       : 50%;
-	margin-left: -13%;
+	left       : calc(50% - 13vw); /*将其居中，然后用动画移动指定位置*/
 }
 
 .manage_button{
-	box-shadow : 0 1px 2px rgba(255,0,0,0.6);
 	z-index    : 0;
-	left       : 50%;
-	margin-left: -13%;
+	left       : calc(50% - 13vw);
 
 	opacity: .6;
 }
 
 .password_button{
-	z-index     : -1;
-	right       : 50%;
-	margin-right: -13vw;
+	right       : calc(50% - 13vw); /*将其居中，然后用动画移动指定位置*/
 }
diff --git a/src/js/main.js b/src/js/main.js
@@ -5,7 +5,7 @@ import "../css/animation.css"
 var $ = require("jquery");
 
 $(document).ready(()=>{
-    UI.animate();
+    UI.init();
     //sync();
 });
 

diff --git a/src/js/ui.js b/src/js/ui.js
@@ -1,15 +1,11 @@
 var $ = require("jquery");
 
-export function animate(){
+export function init(){
     $(".manage_button").addClass("bounceIn");
 
     setTimeout(()=>{
         $(".open_button").addClass("moveToLeft");
         $(".password_button").addClass("moveToRight");
     }, 1000);
 
-    setTimeout(()=>{
-        $(".open_button").addClass("init");
-        $(".password_button").addClass("init");
-    }, 2000)
 }