JavaScript 音乐导航(缓动动画、会唱歌的导航)

最新推荐文章于 2021-09-15 10:47:20 发布

御剑把酒听秋雨丶

最新推荐文章于 2021-09-15 10:47:20 发布

阅读量591

点赞数

分类专栏： JavaScript 文章标签： JavaScript HTML CSS

本文链接：https://blog.csdn.net/fweiren/article/details/88951298

版权

效果展示

音乐导航(缓动动画、会唱歌的导航)

鼠标在导航栏上移动，每一项发出一种音符(do re mi fa so la xi)，同样键盘上的1-7数字也可以有同样的效果。

资源下载

音乐导航(缓动动画、会唱歌的导航)

代码

`index.html`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>音乐导航</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            border: 0;
        }
        #nav {
            width: 706px;
            height: 40px;
            border: 1px solid #ccc;
            margin: 100px auto;
            overflow: hidden;
        }
        #nav ul {
            width: 710px;
        }
        #nav ul li {
            float: left;
            width: 100px;
            text-align: center;
            line-height: 40px;
            border-right: 1px dashed #ccc;
            position: relative;
        }
        #nav ul li a { /* a 标签填充整个 li */
            width: 100%;
            height: 100%;
            display: inline-block;

最低0.47元/天解锁文章

御剑把酒听秋雨丶

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 音乐导航(缓动动画、会唱歌的导航)

效果展示鼠标在导航栏上移动，每一项发出一种音符(do re mi fa so la xi)，同样键盘上的1-7数字也可以有同样的效果。资源下载音乐导航(缓动动画、会唱歌的导航)代码index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> ...
复制链接

扫一扫

专栏目录