add some effects

base.js

@@ -25,7 +25,7 @@ $(function () {
 		m.css('animation','fadeOut .3s forwards');
 		setTimeout(function(){
 			p.remove();
-			m.hide();
+			m.remove();
 		},300);
 	});
 })();
@@ -44,7 +44,8 @@ var message = new function () {
 			'<div class="msg-footer">'+
 			'<span>关闭</span>'+
 			'</div>' +
-			'</div>'
+			'</div>' + 
+			'<div class="mask"></div>';
 		$(document.body).append(html);
 		$('.mask').show().css('animation','fadeIn .2s forwards');
 		$('#mh-'+id).Drag($('#mc-'+id));

index.html

@@ -55,7 +55,7 @@
         </div>
     </div>
 
-    <div class="mask"></div>
+    <!-- <div class="mask"></div> -->
     <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
     <script src="drag.js"></script>
     <script src="base.js"></script>

myui.css

@@ -99,10 +99,11 @@ body {
 	position: fixed;
 	top: 0;
 	left: 0;
-	width: 50px;
+	width: 60px;
 	height: 30px;
 	cursor: pointer !important;
 	z-index: 4;
+	padding-left: 10px
 }
 
 [for=menu-control].menu-button-container:hover span {
@@ -132,9 +133,29 @@ body {
 	height: 3px;
 	background-color: #ccc;
 	display: block;
+	position: relative;
 	margin: 5px 0 0 3px;
 	cursor: pointer;
 	transition: all .5s ease;
+	left:0px;
+	top:0px
+}
+
+#menu-control:checked~.menu-button-container .menu-button>span:nth-child(1){
+	transform:rotate(-30deg);
+	width:20px;
+	top:2px
+}
+
+#menu-control:checked~.menu-button-container .menu-button>span:nth-child(2){
+	transform:rotate(180deg);
+	width:30px
+}
+
+#menu-control:checked~.menu-button-container .menu-button>span:nth-child(3){
+	transform:rotate(30deg);
+	width:20px;
+	top:-2px
 }
 
 .content-border {