add some effects

This commit is contained in:
wolegca 2019-09-13 15:52:47 +08:00
parent cd1ee4101a
commit 4c5ada13e7
4 changed files with 16 additions and 12 deletions

View File

@ -21,12 +21,12 @@ $(function () {
$(document.body).on('click','.msg-footer span',function(){ $(document.body).on('click','.msg-footer span',function(){
var p = $(this).parent().parent(); var p = $(this).parent().parent();
var m = $('.mask'); var m = $('.mask');
p.css('animation','fadeOut .5s'); p.css('animation','fadeOut .2s forwards');
m.css('animation','fadeOut .5s'); m.css('animation','fadeOut .3s forwards');
setTimeout(function(){ setTimeout(function(){
p.remove(); p.remove();
m.hide(); m.hide();
},500); },300);
}); });
})(); })();
@ -46,7 +46,7 @@ var message = new function () {
'</div>' + '</div>' +
'</div>' '</div>'
$(document.body).append(html); $(document.body).append(html);
$('.mask').show().css('animation','fadeIn .5s'); $('.mask').show().css('animation','fadeIn .2s forwards');
$('#mh-'+id).Drag($('#mc-'+id)); $('#mh-'+id).Drag($('#mc-'+id));
return id; return id;
} }

View File

@ -14,7 +14,7 @@
}) })
.mouseup(function (event) { .mouseup(function (event) {
M = false; M = false;
t.fadeTo(20, 1); //t.fadeTo(20, 1);
}); });
$(document).mousemove(function (event) { $(document).mousemove(function (event) {
if (M) { if (M) {

View File

@ -28,7 +28,7 @@ div.menu-container {
width: 0; width: 0;
box-sizing: border-box; box-sizing: border-box;
padding-top: 50px; padding-top: 50px;
transition: all .35s ease; transition: all .2s ease;
overflow: hidden; overflow: hidden;
background-color: rgba(0, 0, 0, 0.8); background-color: rgba(0, 0, 0, 0.8);
z-index: 1; z-index: 1;
@ -65,6 +65,10 @@ div.menu-container ul li *:hover {
/*color: black*/ /*color: black*/
} }
div.menu-container ul li *:active {
background-color: gray;
}
div.menu-container ul>li+li:before { div.menu-container ul>li+li:before {
content: ''; content: '';
display: block; display: block;

View File

@ -8,7 +8,7 @@
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
min-height: 220px; min-height: 150px;
min-width: 250px; min-width: 250px;
max-width: 460px; max-width: 460px;
color: white; color: white;
@ -16,9 +16,9 @@
cursor: default; cursor: default;
border-radius: 10px; border-radius: 10px;
box-sizing: border-box; box-sizing: border-box;
box-shadow: 3px 2px 8px rgb(40, 40, 40); box-shadow: 3px 2px 8px rgb(0, 0, 0);
opacity: 0; opacity: 0;
animation: fadeIn .5s forwards; animation: fadeIn .3s forwards;
z-index: 999; z-index: 999;
text-overflow: ellipsis; text-overflow: ellipsis;
word-break: break-word word-break: break-word
@ -43,7 +43,7 @@
display: block; display: block;
position: relative; position: relative;
width: 100%; width: 100%;
min-height: 150px; min-height: 70px;
background-color: rgb(50, 50, 50); background-color: rgb(50, 50, 50);
cursor: default; cursor: default;
padding: 10px; padding: 10px;
@ -88,9 +88,9 @@
display: none; display: none;
width:100%; width:100%;
height:100%; height:100%;
background-color:rgba(56, 56, 56, 0.747); background-color:rgba(95, 95, 95, 0.7);
z-index:998; z-index:998;
animation-fill-mode: backwards opacity: 0;
} }
@keyframes fadeIn { @keyframes fadeIn {