效果展示:
进入页面:
点击右上角展开目录:![](https://i-blog.csdnimg.cn/blog_migrate/0e80dbcaf2cd9593ce974efbe5f22ee2.png)
代码展示:
HTML代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>个人主页</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="bg">
<div class="txt">Welcome to<br><span>My personal homepage</span></div>
<div class="menu">
<!-- 右上角展开栏-->
<div class="cross">
<span class="dash1"></span>
<span class="dash2"></span>
</div>
<!-- 展开背景-->
<div class="circle"></div>
<!-- 展开内容部分-->
<div class="options">
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS代码:
/*google字体库*/
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: roboto;
overflow: hidden;
}
.bg{
width:100%;
height: 100vh;
background: linear-gradient(135deg,#22242f,#033344);
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.txt{
position: absolute;
color: #fff;
font-size: 3rem;
text-transform: uppercase;
line-height: 55px;
}
.txt span{
font-size: 5rem;
position: relative;
}
.menu{
position: absolute;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.circle{
position: absolute;
right: 0;
top: 0;
width: 5rem;
height: 5rem;
background-color: #1a94b5;
border-bottom-left-radius: 100%;
transition: all 0.5s ease-in-out;
}
.cross{
position: absolute;
top: 0.6rem;
right: 0.6rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
z-index: 3;
}
.dash1{
position: relative;
width: 100%;
height: 0.25rem;
background-color: #fff;
border-radius: 25px;
transition: all 0.25s ease-in-out;
}
.dash2{
position: relative;
transform: translateY(5px);
background-color: #fff;
width: 40%;
height: 0.25rem;
left: 10px;
border-radius: 25px;
transition: all 0.25s ease-in-out;
}
/*如果cross元素存在open类名时,则cross元素中的dash1元素变形*/
.cross.open .dash1{
transform: rotate(-45deg) translate(-3px,2px);
}
/*如果cross元素存在open类名时,则cross元素中的dash2元素变形*/
.cross.open .dash2{
transform: rotate(45deg) translate(-6px,7px);
width: 100%;
}
/*如果cross元素存在open类名时,则cross后方的所有circle元素将被展开*/
.cross.open ~ .circle{
width: 150%;
height: 150vh;
border-bottom-left-radius: 100%;
}
.options{
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
opacity: 0;
transition: all 0.2s ease-in-out;
transition-delay: 0.25s;
z-index: 2;
}
/*如果cross元素存在open类名时,则cross后方的所有options元素的内容将变得不透明*/
.cross.open ~ .options{
opacity: 1;
}
.options ul{
text-align: center;
}
.options ul li{
width: 100%;
height: auto;
}
.options ul li a{
text-decoration: none;
font-size: 2.2rem;
color: #fff;
text-transform: uppercase;
letter-spacing: 1px;
}
JS代码:
let cross = document.getElementsByClassName("cross")[0];
//当cross元素被点击时为cross元素添加open类名,再次点击时将隐藏open类名
cross.addEventListener("click",function () {
cross.classList.toggle("open");
})
参考:b站up主 叫我凤凰Blanco