【发布时间】：2020-12-31 15:44:18
【问题描述】：
我正在尝试为我未来的投资组合创建一个网页 这是我的latecode-hub 链接，这是我的代码：
@font-face{
font-family: 'Antic-Slab';
src: url('AnticSlab-Regular.ttf');
}
.navigation{
position: fixed;
top: 0;
right: 0;
z-index: 1;
}
.navigation #chbox{
position: absolute;
top: 0;
right: 0;
height: 50px;
width: 50px;
z-index: 2;
cursor: pointer;
opacity: 0;
}
.wrapper .hamburger{
position: absolute;
top: 0;
right: 0;
z-index: 1;
width: 60px;
height: 60px;
padding: 1rem;
}
.wrapper .hamburger >div{
z-index: 1;
position: relative;
display: block;
width: 100%;
height: 2px;
background: #fff;
transition: all 0.4s ease;
}
.wrapper .hamburger .div1{
top: 0px;
}
.wrapper .hamburger .div2{
top: 10px;
}
.wrapper .hamburger .div3{
top: 20px;
}
.navigation #chbox:checked + .wrapper .hamburger >.div1{
transform: rotate(-28deg);
width: 90%;
height: 3px;
border-radius: 1px;
}
.navigation #chbox:checked + .wrapper .hamburger >.div2{
transform: rotate(90deg) translateY(-25px) ;
width: 90%;
height: 3px;
border-radius: 1px;
}
.navigation #chbox:checked + .wrapper .hamburger >.div3{
transform: rotate(28deg);
width: 90%;
height: 3px;
border-radius: 1px;
}
.wrapper #menu{
display: flex;
overflow: hidden;
width: 0;
text-decoration: none;
text-align: center;
justify-items: center;
margin-right: 100px;
background-color: blueviolet;
transition: 0.5 ease;
height: 0;
}
.wrapper #menu a{
text-decoration: none;
list-style: none;
margin-left: 1em;
font-size: 25px;
font-family: Antic-Slab;
}
.navigation #chbox:checked .wrapper #menu:hover{
width: 100%;
height: 100%;
}
@import 'firefly.css';
@font-face{
font-family: 'Antic-Slab';
src: url('AnticSlab-Regular.ttf');
}
body{
background-color: rgba(124, 110, 204, 0.376);
margin: 0;
}
.box1{
order: 1;
height: 100vh;
display: grid;
grid-template-rows: 10% 60% 15% 15%;
border: 1px black solid;
grid-gap: 10px;
background: linear-gradient(to bottom right, rgb(26,28,32) 0%, rgb(49,54,66) 100%);
background-size: 210vh 200vh;
}
.main-word{
font-size: 50px;
padding-left: 25%;
padding-top: 10%;
color :rgb(230,219,200);
font-family: Antic-Slab;
cursor:default;
}
.main-word >#main1{
text-align: left;
animation-name: main;
animation-duration: 2s;
}
.main-word >#main2{
animation-name: main;
animation-duration: 4s;
}
#main2>span{
color:rgb(144, 132, 189) ;
}
.main-word >#main3{
animation-name: main;
animation-duration: 6s;
}
@keyframes main{
0% {
opacity: 0;
}
20%{
opacity: 0.2;
filter: blur(8px);
}
40%{
opacity: 0.4;
filter: blur(6px);
}
60% {
opacity: 0.6;
filter: blur(4px);
}
80%{
opacity: 0.8;
filter: blur(2px);
}
100%{
opacity: 1;
}
}
.down_writing{
font-size: 30px;
text-align: center;
padding: 5%;
color: white;
}
.arrow_down{
width: 30px;
height: 30px;
border: solid white;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.arrow1{
text-align: center;
padding-bottom: 20px;
}
.box2{
z-index: 1;
}
.box3{
height: 200vh;
background-color: inherit;
}
.box4{
background-size: 210vh 200vh;
}
header{
background-color: rgba(70, 127, 165, 0.123);
border-radius: 10px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="personal portfolio webpage">
<link href="personal webpage.css" type="text/css" rel="stylesheet">
<link href="hamburger menu.css" type="text/css" rel="stylesheet">
<title>Latecoder</title>
</head>
<body>
<nav class="navigation">
<input type="checkbox" id="chbox" />
<div class="wrapper">
<div class="hamburger">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</div>
<ul id="menu">
<a href="#"><li>Home</li></a>
<a href="#"><li>About</li></a>
<a href="#"><li>Projects</li></a>
<a href="#"><li>Contact</li></a>
</ul>
</div>
</nav>
<div class="box1">
<div class="main-word">
<div id="main1">Hello</div>
<div id="main2">I'm <span>Cagatay</span> </div>
<div id="main3">This is my webpage</div>
</div>
<div class=down_writing>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
</div>
<div class="arrow1"><i class="arrow_down"></i></div>
</div>
<div class="box2">
</div>
<div class="box3">
<div>
Yeah that one is me
</div>
<div><img src="" alt=""></div>
<div> Yeah thats me</div>
<div><img src="" alt=""></div>
</div>
<div class="box4"></div>
<footer>
</footer>
</body>
</html>当我点击汉堡菜单时，我想从右侧添加一个悬停，背景框从右到左出现，菜单将随之出现，类似于this 和this 的混合如有必要，可以添加javascript。
【问题讨论】：
标签： javascript html css animation flexbox