css js 简单的径向菜单学习笔记

最新推荐文章于 2023-01-20 10:06:23 发布
最新推荐文章于 2023-01-20 10:06:23 发布
阅读量701 收藏 1
点赞数
分类专栏： html学习专栏 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yasinawolaopo/article/details/121411667
版权

1、首先:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>简单的径向菜单学习Project</title>
        <link rel="stylesheet" href="indexCss.css">
    </head>
    <body>
        <div class="menu">
            <div class="toggle"></div>
            <li style="--i:0;"><a href="#"></a></li>
            <li style="--i:1;"><a href="#"></a></li>
            <li style="--i:2;"><a href="#"></a></li>
            <li style="--i:3;"><a href="#"></a></li>
            <li style="--i:4;"><a href="#"></a></li>
            <li style="--i:5;"><a href="#"></a></li>
            <li style="--i:6;"><a href="#"></a></li>
            <li style="--i:7;"><a href="#"></a></li>
        </div>
    </body>
</html>

的格式
2、ionicons
**ionicons官网**点击Usage找到Installation复制一段代码:

<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>

之后代码就成:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>简单的径向菜单学习Project</title>
        <link rel="stylesheet" href="indexCss.css">
    </head>
    <body>
        <div class="menu">
            <div class="toggle"></div>
            <li style="--i:0;"><a href="#"></a></li>
            <li style="--i:1;"><a href="#"></a></li>
            <li style="--i:2;"><a href="#"></a></li>
            <li style="--i:3;"><a href="#"></a></li>
            <li style="--i:4;"><a href="#"></a></li>
            <li style="--i:5;"><a href="#"></a></li>
            <li style="--i:6;"><a href="#"></a></li>
            <li style="--i:7;"><a href="#"></a></li>
        </div>
    </body>
    <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
	<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
</html>

之后在html添加ionicons官网提供的代码就行了:

<div class="toggle">
	<ion-icon name="add-outline"></ion-icon>
</div>

在这里插入图片描述

搜索home、user、settings、mail、key、video、game、camera或者ph
为了省时间,就直接打出来了:

<body>
        <div class="menu">
            <div class="toggle">
                <ion-icon name="add-outline"></ion-icon>
            </div>
            <li style="--i:0;"><a href="#">
                <ion-icon name="home-outline"></ion-icon>
            </a></li>
            <li style="--i:1;"><a href="#">
                <ion-icon name="person-outline"></ion-icon>
            </a></li>
            <li style="--i:2;"><a href="#">
                <ion-icon name="settings-outline"></ion-icon>
            </a></li>
            <li style="--i:3;"><a href="#">
                <ion-icon name="mail-outline"></ion-icon>
            </a></li>
            <li style="--i:4;"><a href="#">
                <ion-icon name="key-outline"></ion-icon>
            </a></li>
            <li style="--i:5;"><a href="#">
                <ion-icon name="videocam-outline"></ion-icon>
            </a></li>
            <li style="--i:6;"><a href="#">
                <ion-icon name="game-controller-outline"></ion-icon>
            </a></li>
            <li style="--i:7;"><a href="#">
                <ion-icon name="camera-outline"></ion-icon>
            </a></li>
            
        </div>
    </body>

效果:
在这里插入图片描述

在创建一个indexCss.css文件存放我们的布局:

*{
    margin: 0;/*设置元素的4个外边距,默认值是0*/
    padding: 0;/*设置元素的4个内边距,默认值是0*/
    box-sizing: border-box;/*规定两个并排的带边框的框 */
    /*border-box:	
    为元素设定的宽度和高度决定了元素的边框盒。

    就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。

    通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。*/
}

body{
    display: flex;/*flex布局*/
    justify-content: center;/*Flex容器*/
    align-items: center;/*Flex容器*/
    min-height: 100vh;/*设置段落的最小高度*/
    background: linear-gradient(45deg,#8460ed,#ff1252);
    /*linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片*/
}

效果:
在这里插入图片描述
在这里插入图片描述

menu元素:

.menu{
    position: relative;
    width: 200px;
    height: 200px;
    background: #0f0;
    display: flex;
    justify-content: center;
    align-items: center;
}

在这里插入图片描述

.menu li{
    position: absolute;
    list-style: none;
}

在这里插入图片描述

.toggle{
    position: absolute;/*绝对定位*/
    width: 60px;
    height: 60px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;/*数字越大越在上面*/
    border-radius: 50%;/*50%:圆形*/
    cursor: pointer;/*鼠标变手指*/
    box-shadow: 0 0 4px rgba(0,0,0,0.15);/*阴影*/
    font-size: 2em;/*组件大小*/
    transition: 1.25s;/*动画效果时长为1.25s。只有添加transform才能看出来*/
}

在这里插入图片描述

用toggle写一个改变状态的js

<script>
        let toggle = document.querySelector('.toggle');//获取元素
        let menu = document.querySelector('.menu');//获取元素
        toggle.onclick = function(){//onclick是按键的意思，这里是指按下的是toggle元素就执行方法
            menu.classList.toggle('active');//使menu反转,并class为'menu active'
        };
    </script>

在这里插入图片描述
在这里插入图片描述

这时我们添加menu active状态的css:

.menu.active .toggle{
    transform: rotate(315deg);/*rotate():让容器旋转*/
}

.menu:
在这里插入图片描述
.menu.active:
在这里插入图片描述

修改.menu li的css代码和添加一个.menu.active li的css:

.menu li{
    position: absolute;
    left: 0;
    list-style: none;
    transform-origin: 100px;
    transition: 0.5s;/*过度的动画效果*/
    transition-delay: calc(0.1s * var(--i));/*每个图进行延时*/
}
.menu.active li{
    transform: rotate(calc(360deg / 8 * var(--i)));/*主要*/
}

效果为:

.menu状态的:

在这里插入图片描述
.menu.active状态的:
在这里插入图片描述
修改 .menu 把绿色背景去掉:

.menu{
    position: relative;/*浮动定位*/
    width: 200px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}

主要:在.menu li元素里面添加:

transform: rotate(0deg) translateX(100px);/*隐藏在'+'图标后面点击并向左移动100像素*/

效果为:
在这里插入图片描述
和
在这里插入图片描述

添加.menu li a的时候发现:

.menu li a{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background: #fff;
}

在这里插入图片描述

所以修改.menu li里面的:

transform: rotate(0deg) translateX(80px);/*隐藏在'+'图标后面点击并向左移动100像素*/
}

再次修改.menu li a:

.menu li a{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background: #fff;
    border-radius: 50%;/*弧度*/
    transform: rotate(calc(360deg / -8 * var(--i)));/*图片位置*/
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.15);/*阴影*/
    color: #111;/*颜色*/
    transition: 0.5s;
}

效果为:
在这里插入图片描述
和
在这里插入图片描述

添加鼠标移动到突变时发生颜色变化:

.menu li a:hover{
    color:#ff1252;
}

完成

最后我放上了所有源码在下面:
html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>简单的径向菜单学习Project</title>
        <link rel="stylesheet" href="indexCss.css">
    </head>
    <body>
        <div class="menu">
            <div class="toggle">
                <ion-icon name="add-outline"></ion-icon>
            </div>
            <li style="--i:0;"><a href="#">
                <ion-icon name="home-outline"></ion-icon>
            </a></li>
            <li style="--i:1;"><a href="#">
                <ion-icon name="person-outline"></ion-icon>
            </a></li>
            <li style="--i:2;"><a href="#">
                <ion-icon name="settings-outline"></ion-icon>
            </a></li>
            <li style="--i:3;"><a href="#">
                <ion-icon name="mail-outline"></ion-icon>
            </a></li>
            <li style="--i:4;"><a href="#">
                <ion-icon name="key-outline"></ion-icon>
            </a></li>
            <li style="--i:5;"><a href="#">
                <ion-icon name="videocam-outline"></ion-icon>
            </a></li>
            <li style="--i:6;"><a href="#">
                <ion-icon name="game-controller-outline"></ion-icon>
            </a></li>
            <li style="--i:7;"><a href="#">
                <ion-icon name="camera-outline"></ion-icon>
            </a></li>
            
        </div>
    </body>
    <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
    <script>
        let toggle = document.querySelector('.toggle');//获取元素
        let menu = document.querySelector('.menu');//获取元素
        toggle.onclick = function(){//onclick是按键的意思，这里是指按下的是toggle元素就执行方法
            menu.classList.toggle('active');//使menu反转,并class为'menu active'
        };
    </script>
</html>

css

*{
    margin: 0;/*设置元素的4个外边距,默认值是0*/
    padding: 0;/*设置元素的4个内边距,默认值是0*/
    box-sizing: border-box;/*规定两个并排的带边框的框 */
    /*border-box:	
    为元素设定的宽度和高度决定了元素的边框盒。

    就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。

    通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。*/
}

body{
    display: flex;/*flex布局*/
    justify-content: center;/*Flex容器*/
    align-items: center;/*Flex容器*/
    min-height: 100vh;/*设置段落的最小高度*/
    background: linear-gradient(45deg,#8460ed,#ff1252);
    /*linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片*/
}

.menu{
    position: relative;/*浮动定位*/
    width: 200px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.menu li{
    position: absolute;
    left: 0;
    list-style: none;
    transform-origin: 100px;
    transition: 0.5s;/*过度的动画效果*/
    transition-delay: calc(0.1s * var(--i));/*每个图进行延时*/
    transform: rotate(0deg) translateX(80px);/*隐藏在'+'图标后面点击并向左移动100像素*/
}
.menu.active li{
    transform: rotate(calc(360deg / 8 * var(--i)));
}
.menu li a{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background: #fff;
    border-radius: 50%;
    transform: rotate(calc(360deg / -8 * var(--i)));
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.15);
    color: #111;
    transition: 0.5s;
}
.menu li a:hover{
    color:#ff1252;
}

.toggle{
    position: absolute;/*绝对定位*/
    width: 60px;
    height: 60px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;/*数字越大越在上面*/
    border-radius: 50%;/*50%:圆形*/
    cursor: pointer;/*鼠标变手指*/
    box-shadow: 0 0 4px rgba(0,0,0,0.15);/*阴影*/
    font-size: 2em;/*组件大小*/
    transition: 1.25s;/*动画效果时长为1.25s。只有添加transform才能看出来*/
}

.menu.active .toggle{
    transform: rotate(315deg);/*rotate():让容器旋转*/
}
结城明日奈是我老婆
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
radial-menu:一个只有 CSS 的径向菜单
06-30
径向菜单 仅 CSS 的径向菜单 演示 去做 做一个更好的演示
在CSS中创建径向菜单
xfxf996的博客
06-21 235
How do I create a menu which looks like this... 如何创建一个看起来像这样的菜单...... Link to PSD 链接到PSD I don
用 CSS3 和 JavaScript 制作径向动画菜单
Wangxinlei_King的博客
09-20 250
今天，让我们来看看：如何使用CSS3和JavaScript轻松地实现一个简单的径向动画菜单。 看看下面的演示，点击按钮，弹出径向菜单。 See the Pen Animated radial / ci...
漂亮的仿flash菜单，来自蓝色经典
grace_yan的专栏
07-03 685
 /* 先把这个 xmenu 的样式放到css里 */.xmenu td{font-size:12px;font-family:verdana,arial;font-weight:bolder;color:#ffffff;border:1px solid #336699;background:#336699;filter:blendtrans(duration=0.5);cursor:hand;t
径向菜单的制作
weixin_39037804的博客
10-24 288
最终效果： 在径向菜单的制作前，首先需要知道几点知识点： Math.sin(x) x 的正玄值。返回值在 -1.0 到 1.0 之间； Math.cos(x)x 的余弦值。返回的是 ...
HTML CSS JS 学习、git-笔记.zip
12-30
HTML CSS JS 学习、git-笔记HTML CSS JS 学习、git-笔记 HTML CSS JS 学习、git-笔记HTML CSS JS 学习、git-笔记 HTML CSS JS 学习、git-笔记HTML CSS JS 学习、git-笔记 HTML CSS JS 学习、git-笔记HTML CSS JS ...
html css js全套学习笔记＋举例
最新发布
04-16
适用于前端初学者,没有任何代码基础就能学的 此内容是我学习前端从入门到学完前端三件套的所有笔记和实例使用 此笔记是我跟随尚硅谷课程学习一路所记
html css js 学习笔记.zip
12-30
html css js 学习笔记html css js 学习笔记html css js 学习笔记 html css js 学习笔记html css js 学习笔记html css js 学习笔记 html css js 学习笔记html css js 学习笔记html css js 学习笔记 html css js 学习...
学习笔记HTML-css-JS.zip
03-17
学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip 学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip 学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip学习笔记...
html+css+js学习笔记.zip
01-01
html+css+js学习笔记html+css+js学习笔记html+css+js学习笔记html+css+js学习笔记 html+css+js学习笔记html+css+js学习笔记html+css+js学习笔记html+css+js学习笔记 html+css+js学习笔记html+css+js学习笔记...
js+css实现tab菜单，很漂亮
08-22
js+css实现tab菜单，很漂亮 效果很好哦
Ionicons开源图标集合 v5.2.3
11-02
为您提供Ionicons开源图标集合下载，Ionicons是一个完全开源的图标集，其中包含1100多个图标，这些图标是专为Web，iOS，Android和桌面应用程序而设计的。Ionicons是为Ionic Framework构建的，因此图标同时具有Material Design和iOS版本。我们打算将此图标包与Ionic一起使用，但绝不仅限于此。无论您是个人还是商业用户，都可以在合适的地方使用它们。它们是使用的，并根据MIT许可。注
Js+CSS横向导航菜单
旺仔专栏
11-28 5377
效果图： 以下是源代码：>  html>      head>          meta http-equiv="Content-Type" content="text/html; charset=gb2312" />          meta http-equiv="Content-Language" content="zh-CN" />          tit
android 径向菜单,带你领略 ConstraintLayout 1.1 的新功能
weixin_36140358的博客
05-26 124
约束布局(ConstraintLayout)通过使用 Android Studio 中的可视化编辑器来为您生成绝大多数的 UI，进而达到简化 Android 中创建复杂布局的目的。它通常被我们描述为更加强大的 RelativeLayout。通过使用约束布局，您可以定义一些复杂的布局而不需要创建复杂的视图层级。约束布局最近发布了 1.1 稳定版本，并迅速获得大量好评。全面的优化改进可以让多数布局的运...
解析：用 CSS3 和 JavaScript 制作径向动画菜单
weixin_34190136的博客
05-08 82
原作者的解析（英文）：http://creative-punch.net/2014/02/making-animated-radial-menu-css3-javascript/ 原作者的解析（译文）：http://developer.51cto.com/art/201404/437152.htm 本文非转载，为个人原创解析，转载请先联系博主。谢谢~ 首先，看...
用css3和javascript做的径向动画菜单
04-29 565
http://blog.jobbole.com/65551/，超赞的！
使用CSS和JavaScript创建动画
cnds123的专栏
11-02 962
使用CSS和JavaScript创建动画 关于Web动画，这是一个非常广泛的主题，目前，有数百个库，工具和插件，可用于创建从简单到复杂的动画。在本文中，我将简要介绍一些可以使用HTML，CSS和JavaScript实现的动画。 下面使用使用CSS和JavaScript创建的常规 HTML 动画 基础页面结构框架： <!doctype html> <html> <head> <meta charset="UTF-8"> &...
初学前端收集的字体图标以及字体网站
m0_49442965的博客
01-20 418
抱歉，阿里和icomoon长久不使用，忘得差不多了。
CSS3过渡属性transition详解
桃花扇的博客
04-05 1301
拖了两天的更新诶，懈怠了懈怠了 transition蛮好玩的，可以实现由一个状态像另一个状态的动画过渡，无缝斜街的感觉，不多说啦，开始介绍属性吧~ 1.transition可以传4 / (4n)个参数，（4n是因为它可以对不同的属性分别加过渡效果） 第一位：设置参与过渡的属性 第二位：过渡的时间 第三位：过渡的动画类型（选填，默认ease） 第四位：开始过渡的延时（选填，默认0） 这...
渡一前端html、css、js笔记及学习规划.zip
08-09
渡一前端html、css、js笔记及学习规划.zip是一份渡一前端课程相关的学习资料。该资料包含了HTML、CSS和JavaScript的笔记以及学习规划。 该资料的笔记部分覆盖了HTML、CSS和JavaScript的基础知识和常用语法。通过...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

结城明日奈是我老婆

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值