wcx/wolegca.github.io
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add some effects

Browse Source
This commit is contained in:
wolegca 2019-09-14 16:44:41 +08:00
parent f36b93d6bb
commit 3ce6e7d4e0
3 changed files with 26 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
base.js
View File

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

2
index.html
View File

@ -55,7 +55,7 @@
</div> </div>
</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="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="drag.js"></script> <script src="drag.js"></script>
<script src="base.js"></script> <script src="base.js"></script>

23
myui.css
View File

@ -99,10 +99,11 @@ body {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
width: 50px; width: 60px;
height: 30px; height: 30px;
cursor: pointer !important; cursor: pointer !important;
z-index: 4; z-index: 4;
padding-left: 10px
} }
[for=menu-control].menu-button-container:hover span { [for=menu-control].menu-button-container:hover span {
@ -132,9 +133,29 @@ body {
height: 3px; height: 3px;
background-color: #ccc; background-color: #ccc;
display: block; display: block;
position: relative;
margin: 5px 0 0 3px; margin: 5px 0 0 3px;
cursor: pointer; cursor: pointer;
transition: all .5s ease; 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 { .content-border {