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

来源：互联网发布：jdk源码分析 pdf 编辑：程序博客网时间：2024/06/06 17:55

制作一个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></li>                <li title="3条评论" class="page comment"><img src="assets/images/comment.png"><span>3</span></li>                <li title="我有6条评论" class="mine posted"><img src="assets/images/post.png"><span>6</span></li><li title="被赞6次" class="mine like"><img src="assets/images/like.png"><span>6</span></li>              </ul>            </div>          </div>          <div id="control-ring-container">            <ul id="control-ring">              <li title="蒙板" class="mask button"></li>              <li title="历史记录" class="history button"></li>              <li title="消息" class="message button"><span class="unread">2</span></li>              <li title="设置" class="setting button"></li>              <li title="登录/注册" class="sign button"></li>            </ul>          </div>          <div class="apb">            <div class="icon"></div>          </div>        </div>      </div>    </div>  </body></html>

/*    System: Mac OX 10.10.5;    Test-plain: Safari, Chrome;    Date: 2016-09-24;*/#bottom-positioner {    position: absolute;    width:560px;    height: 900px;    overflow: hidden;  /* Include all the element */    left: 37%;}#info-bar {    background-color: #666666;    width: 10px;    height: 10px;    border-radius: 50%;    position: absolute;    left: 50%;    bottom: 9%;    opacity: 0; /* Let it cannot be seen */    transition: all 1s ease-out 250ms;    overflow: hidden;}#button:hover #info-bar{    background-color: #666666;    width: 120px;    height: 120px;    border-radius: 50%;    position: absolute;    left: 42%;    bottom: 15%;    opacity: 1; /* Let it can be seen */}#button:hover .user span {    display: inline-block;    margin-left: 10px;    font-size: 20px;    color: white;    opacity: 1;}#button:hover .comment span {    display: inline-block;    margin-left: 10px;    font-size: 35px;    color: white;    opacity: 1;}.user {    position: absolute;    top:10px;}.user span {    display: inline-block;    margin-left: 10px;    font-size: 0;    color: white;    transition: all 1s ease-out 250ms;    opacity: 0;}.comment {    position: absolute;    top: 35px;    left: 30px;}.comment span {    display: inline-block;    margin-left: 10px;    font-size: 0px;    color: white;    transition: all 1s ease-out 250ms;    opacity: 0;}.mine {    display: inline-block;}.mine span {    position: absolute;    display: inline-block;    margin-left: 5px;    color: #3cc101;    bottom: 7px;}.posted {    position: absolute;    top:75px;    left: 20px;}.like {    position: absolute;    top: 75px;    left:60px;}.button {    position: absolute;    width: 25px;    height: 25px;    border-radius: 50%;    padding: 5px;}.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;}.history {    background: url(assets/images/history.png) no-repeat 50% 50% #666666;    left: 50%;    bottom: 9%;    opacity: 0;    transition: all 1s ease-out 250ms;    background-size: 0%;}#button:hover .history {    background: url(assets/images/history.png) no-repeat 50% 50% #666666;    background-size: 50%;    left: 35%;    bottom: 9%;    opacity: 1;}.message {    background: url(assets/images/message.png) no-repeat 50% 50% #666666;    left: 50%;    bottom: 9%;    opacity: 0;    transition: all 1s ease-out 250ms;    background-size: 0%;}#button:hover .message {    background: url(assets/images/message.png) no-repeat 50% 50% #666666;    background-size: 50%;    left: 38%;    bottom: 4%;    opacity: 1;}.unread {    display: inline-block;    position: absolute;    left:24px;    bottom: 20px;    background-color: red;    border-radius: 50%;    width: 20px;    height: 20px;    line-height: 20px; /* Let it be the center of vertical direction */    text-align: center;    transition: all 1s ease-out 250ms;    color: white;}.setting {    background: url(assets/images/setting.png) no-repeat 50% 50% #666666;    left: 50%;    bottom: 9%;    opacity: 0;    transition: all 1s ease-out 250ms;    background-size: 0%;}#button:hover .setting {    background: url(assets/images/setting.png) no-repeat 50% 50% #666666;    background-size: 50%;    left: 46%;    bottom: 1%;    opacity: 1;}.sign {    background: url(assets/images/signin.png) no-repeat 50% 50% #666666;    left: 50%;    bottom: 9%;    opacity: 0;    transition: all 1s ease-out 250ms;    background-size: 0%;}#button:hover .sign {    background: url(assets/images/signin.png) no-repeat 50% 50% #666666;    background-size: 50%;    left: 56%;    bottom: 2%;    opacity: 1;}.apb {    position: absolute;    background: url(assets/images/atplus_white.png) no-repeat 50% 50% #7171C6;    width: 30px;    height: 30px;    padding: 5px;    border-radius: 50%;    left:50%;    bottom: 9%;    opacity: 0.5;}#button:hover .apb{    background: url(assets/images/atplus_green.png) no-repeat 50% 50% rgba(48, 63, 159, 1);    background-size: 70%;    transform: scale(1.5);    opacity: 1;}ul {    list-style-type: none;}

以上内容皆为本人观点，欢迎大家提出批评和指导，我们一起探讨！

0 0