day14-Animated Navigation（缩小动画导航）

格式化小拓

已于 2023-07-16 20:52:13 修改

阅读量60

点赞数

分类专栏： 50天50个小demo前端文章标签： html5 css3 javascript 前端

于 2023-07-08 20:32:14 首次发布

本文链接：https://blog.csdn.net/qq_51523316/article/details/131616133

版权

50天50个小demo前端专栏收录该内容

50 篇文章 2 订阅

订阅专栏

50 天学习 50 个项目 - HTMLCSS and JavaScript

day14-Animated Navigation（缩小动画导航）

效果

在这里插入图片描述

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Animated Navigation</title>
    <link rel="stylesheet" href="style.css" />
</head>

<body>
    <nav class="active" id="nav">
        <!-- 具体导航 -->
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">工作</a></li>
            <li><a href="#">关于</a></li>
            <li><a href="#">联系</a></li>
        </ul>
        <!-- 线条 切换  x <=> = -->
        <button class="icon" id="toggle">
            <div class="line line1"></div>
            <div class="line line2"></div>
        </button>
    </nav>
    <script src="script.js"></script>
</body>

</html>

style.css

@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');

/* 导入字体 */
* {
    box-sizing: border-box;
}

body {
    background-color: #eafbff;
    background-image: linear-gradient(to bottom,
            #5290f9 0%,
            #52f9ab 50%,
            #52f9ab 50%,
            #5290f9 100%);
    font-family: 'Muli', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
}

/* 导航 */
nav {
    background-color: #f7f6b0;
    padding: 20px;
    width: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.8);
    transition: width 0.6s linear;
    overflow-x: hidden;
}
/* 展开状态 */
nav.active {
    width: 350px;
}
/* 具体导航 */
nav ul {
    display: flex;
    list-style-type: none;
    padding: 0;
    margin: 0;
    width: 0;
    transition: width 0.6s linear;
}

nav.active ul {
    width: 100%;
}

nav ul li {
    transform: rotateY(0deg);
    /* 不显示 */
    opacity: 0;
    transition: transform 0.6s linear, opacity 0.6s linear;
}

nav.active ul li {
    /* 显示 */
    opacity: 1;
    transform: rotateY(360deg);
}

nav ul a {
    position: relative;
    color: #000;
    text-decoration: none;
    margin: 0 10px;
}
/* 线条 切换 x <=>= */
.icon {
    background-color: #fff;
    border: 0;
    cursor: pointer;
    padding: 0;
    position: relative;
    height: 30px;
    width: 30px;
    outline: 0;
}
/* 线条 */
.icon .line {
    background-color: #5290f9;
    height: 2px;
    width: 20px;
    position: absolute;
    top: 10px;
    left: 2px;
    transition: transform 0.6s linear;
}

.icon .line2 {
    top: auto;
    bottom: 10px;
}

nav.active .icon .line1 {
    transform: rotate(-765deg) translateY(5.5px);
}

nav.active .icon .line2 {
    transform: rotate(765deg) translateY(-5.5px);
}

script.js

// 重点是 transform transition 定位 的应用

// 1.获取元素节点
const toggle = document.getElementById('toggle');//字体图标
const nav = document.getElementById('nav');//导航
// 2. 点击切换active
toggle.addEventListener('click', () => nav.classList.toggle('active'))

格式化小拓

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
day14-Animated Navigation（缩小动画导航）

50 天学习 50 个项目 - HTMLCSS and JavaScriptday14-Animated Navigation（缩小动画导航）效果index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1
复制链接

扫一扫

专栏目录