From 4c5ada13e73945ab22721452a496107dbe8122e2 Mon Sep 17 00:00:00 2001
From: wolegca <2738076308@qq.com>
Date: Fri, 13 Sep 2019 15:52:47 +0800
Subject: [PATCH] add some effects

---
 base.js   |  8 ++++----
 drag.js   |  2 +-
 index.css |  6 +++++-
 myui.css  | 12 ++++++------
 4 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/base.js b/base.js
index 1e851d5..1e1b635 100644
--- a/base.js
+++ b/base.js
@@ -21,12 +21,12 @@ $(function () {
 	$(document.body).on('click','.msg-footer span',function(){
 		var p = $(this).parent().parent();
 		var m = $('.mask');
-		p.css('animation','fadeOut .5s');
-		m.css('animation','fadeOut .5s');
+		p.css('animation','fadeOut .2s forwards');
+		m.css('animation','fadeOut .3s forwards');
 		setTimeout(function(){
 			p.remove();
 			m.hide();
-		},500);
+		},300);
 	});
 })();
 
@@ -46,7 +46,7 @@ var message = new function () {
 			'</div>' +
 			'</div>'
 		$(document.body).append(html);
-		$('.mask').show().css('animation','fadeIn .5s');
+		$('.mask').show().css('animation','fadeIn .2s forwards');
 		$('#mh-'+id).Drag($('#mc-'+id));
 		return id;
 	}
diff --git a/drag.js b/drag.js
index b4e0b3a..f36fdfc 100644
--- a/drag.js
+++ b/drag.js
@@ -14,7 +14,7 @@
 			})
 			.mouseup(function (event) {
 				M = false;
-				t.fadeTo(20, 1);
+				//t.fadeTo(20, 1);
 			});
 		$(document).mousemove(function (event) {
 			if (M) {
diff --git a/index.css b/index.css
index e956870..436574c 100644
--- a/index.css
+++ b/index.css
@@ -28,7 +28,7 @@ div.menu-container {
 	width: 0;
 	box-sizing: border-box;
 	padding-top: 50px;
-	transition: all .35s ease;
+	transition: all .2s ease;
 	overflow: hidden;
 	background-color: rgba(0, 0, 0, 0.8);
 	z-index: 1;
@@ -65,6 +65,10 @@ div.menu-container ul li *:hover {
 	/*color: black*/
 }
 
+div.menu-container ul li *:active {
+	background-color: gray;
+}
+
 div.menu-container ul>li+li:before {
 	content: '';
 	display: block;
diff --git a/myui.css b/myui.css
index e6dd169..aa42ae0 100644
--- a/myui.css
+++ b/myui.css
@@ -8,7 +8,7 @@
 	top: 50%;
 	left: 50%;
 	transform: translate(-50%, -50%);
-	min-height: 220px;
+	min-height: 150px;
 	min-width: 250px;
 	max-width: 460px;
 	color: white;
@@ -16,9 +16,9 @@
 	cursor: default;
 	border-radius: 10px;
 	box-sizing: border-box;
-	box-shadow: 3px 2px 8px rgb(40, 40, 40);
+	box-shadow: 3px 2px 8px rgb(0, 0, 0);
 	opacity: 0;
-	animation: fadeIn .5s forwards;
+	animation: fadeIn .3s forwards;
 	z-index: 999;
 	text-overflow: ellipsis;
 	word-break: break-word
@@ -43,7 +43,7 @@
 	display: block;
 	position: relative;
 	width: 100%;
-	min-height: 150px;
+	min-height: 70px;
 	background-color: rgb(50, 50, 50);
 	cursor: default;
 	padding: 10px;
@@ -88,9 +88,9 @@
 	display: none;
 	width:100%;
 	height:100%;
-	background-color:rgba(56, 56, 56, 0.747);
+	background-color:rgba(95, 95, 95, 0.7);
 	z-index:998;
-	animation-fill-mode: backwards
+	opacity: 0;
 }
 
 @keyframes fadeIn {