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)}
}

126
index.css
View File

@ -1,3 +1,4 @@
body,
html {
margin: 0;
padding: 0;
@ -5,41 +6,108 @@ html {
}
body {
margin: 0;
padding: 0;
min-height: 100%;
position:relative;
background-image: url(/star-catcher-astronaut-catching-stars-for-research-astronaut.jpg);
background: url(star-catcher-astronaut-catching-stars-for-research-astronaut.jpg) no-repeat center;
background-size: cover;
background-repeat: repeat-y;
background-position: center
width: 200%;
overflow: hidden
}
.menu-container {
position: absolute;
input#menu-control {
display: none
}
div.menu-container {
display: block;
position: relative;
float: left;
top: 0;
left: 0;
height: 100%;
width: 0;
box-sizing: border-box;
padding-top: 50px;
transition: all .5s ease;
overflow: hidden
}
div.menu-container ul {
position: relative;
padding: 0;
margin: 0;
top: 30%;
transform: translateY(-50%)
}
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;
width:100%;
}
.menu-container ul {
display: block;
text-decoration: none;
list-style: none;
}
.menu-button {
height:35px;
width:50px;
box-sizing: border-box;
border-radius: 10%
padding: 50px 50px 25px;
overflow-y:scroll
}
.menu-button span{
display:block;
width:40px;
height:4px;
margin:5px auto;
background-color:#ccc;
border-radius:10%
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>
<html lang="zh">
<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="animations.css">
<title>title</title>
<head>
</head>
<body>
<input type="checkbox" id="menu-control">
<div class="menu-container">
<div class="menu-button">
<span></span>
<span></span>
<span></span>
</div>
<ul>
<li><a href="/">首页</a></li>
<li><a href="javascript:void(0);">关于</a></li>
</ul>
</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>
</body>
</html>