HTML/CSS: Make a Ring Menu 环形菜单

最新推荐文章于 2023-05-15 18:00:18 发布

VIP文章小威威__

最新推荐文章于 2023-05-15 18:00:18 发布

阅读量4.2k

点赞数 1

分类专栏： HTML-CSS 文章标签： css 2D-变换环形菜单 Ring-Menu 过渡

本文链接：https://blog.csdn.net/linwh8/article/details/52651852

版权

制作一个Ring Menu需要有以下基础：
1. 熟练掌握元素的布局与定位；
2. 熟练掌握对元素边框的处理；
3. 熟练掌握伪类:hover的应用；
4. 熟练掌握子选择器的应用；
5. 熟练掌握背景处理；
6. 熟练掌握2D变换；
7. 熟练掌握过渡设置。

现在要制作一个 Ring Menu，效果图如下：
初始状态下：
初始环形菜单

但鼠标移动到@上时，效果如下：

环形菜单效果

构思：
1.怎么用css实现圆形边框？
很简单，将边框设置为一个正方形，然后再使用属性border-radius:50%; 便可完成圆形边框的设置。

2.怎么实现圆形边框内部图片的居中设置且有合适大小？
很简单，通过使用background-size属性可以调整背景图片的大小，通过使用backgroud-position:50% 50%可以实现图像的居中设置。

3.怎么实现效果图中各圆圈所在的位置？
这个就涉及到元素的布局与定位。对元素的定位我都使用的是绝对定位，即position:absolute,然后通过调整相关属性(我是调整left与bottom)实现效果图中的布局。

4.怎么实现圆圈内各元素的布局？
这个也是涉及到元素的布局与定位。对元素的定位我还是使用绝对定位，这样一来它就会参照圆圈的边界进行定位。

5.怎么实现环形菜单的动画效果呢？
这个就是项目的核心了！这个效果可以通过纯css实现而不依赖JS。此处我采用的是伪类:hover，以实现鼠标滑过元素时的动态效果。
那么这里有一个难题：怎么实现多个元素同时被触发？在这里也就是：怎么实现当鼠标停留在@上时，六个小圆圈一起出现呢？这就说明这几个:hover的效果是由同一个触发器触发的。那怎么实现一个触发器触发所有元素的:hover效果呢？这就涉及到了元素的嵌套。
我们可以将这几个元素嵌套在一个div中(id = “button”)，然后通过#button:hover .E {} 设置相应的属性。这里的E是指六个小圆圈的class名，而我称这个选择器为伪类子选择器，它可以实现对button子元素:hover效果的设置，并同时实现只通过一个触发器来触发所有子元素:hover效果。

6.在未触发状态下，除了@圆圈，其它元素是消失的。但是一旦触发，所有元素都出现了，这又是怎么实现的呢？
一开始我想到的是display:none属性与visibility:hidden属性，但是实践证明，它不能实现我想要的效果。那么，我还有其他办法来解决这一问题么？很简单！对于元素有一个属性可以解决这个问题，那就是透明度 opacity。opacity:1表示不透明， opacity:0.5表示半透明， opacity:0表示全透明。透过设置.E {opacity = 0;}与.E {opacity=1;}来实现这一效果。

7.怎么实现一个缓冲，使得动画不那么快结束？

在这里可以使用过渡的属性。对于过渡，它的实现有四点要求：(1)初始条件；(2)终止条件; (3)过渡器; (4)触发器。如下：

/* :hover 是一个触发器 */
.mask {
    background: url(assets/images/nomask.png) no-repeat 50% 50% #666666;
    left: 50%;
    bottom: 9%;
    opacity: 0;
    /*上面都是初始条件*/
    transition: all 1s ease-out 250ms;  /* 过渡器*/
    background-size: 0%;
}
#button:hover .mask {
    background: url(assets/images/nomask.png) no-repeat 50% 50% #666666;
    background-size: 50%;
    left: 37%;
    bottom: 14%;
    opacity: 1;
    /* 以上都是终止条件 */
}

8. 我发现浏览器窗口会影响我的动画布局？
别担心，对于这个问题，我们可以采用冻结布局的思想，也就是在我们的环形菜单嵌套一个隐形的div，设置好它的宽度即可。

下面是我的HTML、CSS:

<!DOCTYPE html>
<html>
  <head>
    <title>环形按钮</title>
    <meta charset="utf-8">
    <link rel="icon" sizes="196x196" href="assets/images/favicon.png">
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div id="at-plus-container">
      <div id="bottom-positioner">
        <div id="button">
          <div id="info-bar">
            <div style="display:block" class="info">
              <ul>
                <li title="2人参与讨论" class="page user"><img src="assets/images/people.png"><span>2</span>

最低0.47元/天解锁文章

小威威__

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML/CSS: Make a Ring Menu 环形菜单

制作一个Ring Menu需要有以下基础： 1. 熟练掌握元素的布局与定位； 2. 熟练掌握对元素边框的处理； 3. 熟练掌握伪类:hover的应用； 4. 熟练掌握子选择器的应用； 5. 熟练掌握背景处理； 6. 熟练掌握2D变换； 7. 熟练掌握过渡设置。现在要制作一个 Ring Menu，效果图如下：初始状态下：但鼠标移动到@上时，效果如下：构思： 1.怎么用css实
复制链接

扫一扫