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(){
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;
}

View File

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

View File

@ -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;

View File

@ -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 {