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

update frameworks

Browse Source
This commit is contained in:
wolegca 2019-09-12 01:30:49 +08:00
parent cbd7445a0f
commit 8c72da7126
3 changed files with 124 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
animations.css Normal file
View File

@ -0,0 +1,5 @@
@keyframes anim-content{
0%{transform:rotateY(0deg)}
50%{transform:rotateY(30deg)}
100%{transform:rotateY(0deg)}
}

124
index.css
View File

@ -1,3 +1,4 @@
body,
html { html {
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -5,41 +6,108 @@ html {
} }
body { body {
margin: 0; background: url(star-catcher-astronaut-catching-stars-for-research-astronaut.jpg) no-repeat center;
padding: 0;
min-height: 100%;
position:relative;
background-image: url(/star-catcher-astronaut-catching-stars-for-research-astronaut.jpg);
background-size: cover; background-size: cover;
background-repeat: repeat-y; width: 200%;
background-position: center overflow: hidden
} }
.menu-container { input#menu-control {
position: absolute; display: none
height:100%;
float:left;
width:100%;
} }
.menu-container ul { div.menu-container {
display: block; display: block;
text-decoration: none; position: relative;
list-style: none; float: left;
} top: 0;
left: 0;
.menu-button { height: 100%;
height:35px; width: 0;
width:50px;
box-sizing: border-box; box-sizing: border-box;
border-radius: 10% padding-top: 50px;
transition: all .5s ease;
overflow: hidden
} }
.menu-button span{ div.menu-container ul {
display:block; position: relative;
width:40px; padding: 0;
height:4px; margin: 0;
margin:5px auto; top: 30%;
background-color:#ccc; transform: translateY(-50%)
border-radius:10% }
div.menu-container ul li {
list-style: none;
text-align: center;
white-space: nowrap
}
div.menu-container ul li a {
text-decoration: none;
color: #fff;
display: block;
padding: 8px 0 0;
transition: all .5s ease;
font-size: 24px;
height: 40px
}
div.menu-container ul li a:hover {
background-color: rgba(255, 0, 0, .5)
}
div.menu-container ul>li+li:before {
content: '';
display: block;
height: 1px;
margin: 2px 2px
}
label[for=menu-control] {
display: block;
position: fixed;
top: 0;
left: 0;
width: 50px;
height: 30px;
cursor: pointer
}
div.menu-button span {
width: 44px;
height: 3px;
background-color: #ccc;
display: block;
margin: 5px 0 0 3px
}
input#menu-control:checked+div.menu-container {
width: 350px;
left: 0
}
div.content-border {
width: 50%;
height: 100%;
float: left;
box-sizing: border-box;
padding: 50px 50px 25px;
overflow-y:scroll
}
div.content {
height: 200px;
background-color: #fff;
border-radius: 15px;
opacity: .5;
animation: anim-content .5s;
transition: opacity .5s ease;
cursor: pointer;
padding: 15px
}
div.content:hover {
opacity: 1
} }

28
index.html
View File

@ -1,21 +1,37 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zh"> <html lang="zh">
<head> <head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="index.css"> <link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="animations.css">
<title>title</title> <title>title</title>
<head> </head>
<body> <body>
<input type="checkbox" id="menu-control">
<div class="menu-container"> <div class="menu-container">
<div class="menu-button">
<span></span>
<span></span>
<span></span>
</div>
<ul> <ul>
<li><a href="/">首页</a></li> <li><a href="/">首页</a></li>
<li><a href="javascript:void(0);">关于</a></li> <li><a href="javascript:void(0);">关于</a></li>
</ul> </ul>
</div> </div>
<label for="menu-control">
<div class="menu-button">
<span></span>
<span></span>
<span></span>
</div>
</label>
<div class="content-border">
<div class="content">
你就是个垃圾
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
</body> </body>
</html> </html>