html,css旋转菜单

及时行樂225

于 2023-12-01 14:08:53 发布

阅读量414

点赞数 8

文章标签： css

本文链接：https://blog.csdn.net/weixin_60623799/article/details/134733439

版权

<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Draggable Navigation Menu | Codinglab</title>
    <link rel="stylesheet" href="style.css">
    <!-- Boxicons CSS -->
    <link href='https://unpkg.com/boxicons@2.1.1/css/boxicons.min.css' rel='stylesheet'>
</head>

<body>
    <div class="nav">
        <div class="nav-content">
            <div class="toggle-btn">
                <i class='bx bx-plus'></i>
            </div>
            <span style="--i:1;">
                <a href="#"><i class='bx bxs-home'></i></a>
            </span>
            <span style="--i:2;">
                <a href="#"><i class='bx bxs-camera'></i></a>
            </span>
            <span style="--i:3;">
                <a href="#"><i class='bx bxs-alarm'></i></a>
            </span>
        </div>
    </div>

    <script>

        // getting HTML elements
        const nav = document.querySelector("div"),
            toggleBtn = nav.querySelector(".toggle-btn");

        toggleBtn.addEventListener("click", () => {
            nav.classList.toggle("open");
        });
    </script>

</body>

</html>

css代码

 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 body {
     height: 100vh;
     background: #17a2b8;
     overflow: hidden;
 }

 .nav {
     position: absolute;
     top: 20px;
     right: 0;
     width: 80px;
     height: 300px;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: grab;
 }

 .nav .nav-content {
     display: flex;
     align-items: center;
     justify-content: center;
     transform: rotate(-56deg);
 }

 .nav-content .toggle-btn,
 .nav-content span a {
     height: 60px;
     width: 60px;
     background: #fff;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
     box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
 }

 .nav-content .toggle-btn {
     font-size: 35px;
     color: #0e2431;
     z-index: 100;
     cursor: pointer;
     transform: rotate(-215deg);
     transition: all 0.6s ease;
 }

 div.open .toggle-btn {
     transform: rotate(0deg);
 }

 .nav-content span {
     position: absolute;
     transition: all 0.6s ease;
     opacity: 0;
 }

 .nav.open .nav-content span {
     transform: rotate(calc(var(--i) * (360deg/5))) translateY(100px);
     opacity: 1;
 }

 .nav-content span a {
     text-decoration: none;
     transform: rotate(57deg);
 }

 .nav-content span a i {
     font-size: 24px;
     color: #0e2431;
     transform: rotate(calc(var(--i) * (360deg/ -5)));
     opacity: 0.8;
     transition: 0.2s;
 }

 .nav-content span a:hover i {
     opacity: 1;
 }

想看效果直接创建一个html文件cv代码打开就行