原理是使用相对定位和绝对定位确定圆形菜单位置。

使用伪类选择器E:hover确定悬浮时候的效果,动画效果用CSS3的transition属性。

大概代码如下。

html:

<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>

css3:

html,body {
text-align: center;
width: 100%;
height: 100%;
} ul, li{
list-style-type: none;
} #at-plus-container {
position: relative;
width: 150px;
height: 150px;
top:50%;
left: 40%;
}
#button {
width: 50px;
height: 50px;
}
#button {
position: relative;
width: 150px;
height: 150px;
} .apb {
position: absolute;
top:50%;
left: 40%;
width: 25px;
height: 25px;
line-height: 50px;
background: ;
background: url("assets/images/atplus_white.png") rgba(3,3,3,0.5) no-repeat center;
background-size: 25px;
border-radius: 50%; } #button:hover .apb {
width: 50px;
height: 50px;
background: url("assets/images/atplus_green.png") rgba(3,3,3,0.5) no-repeat center;
background-size: 50px; } #info-bar {
opacity:;
border-radius: 50%;
} #button:hover #info-bar{
opacity:;
background: rgba(3,3,3,0.5);
width: 100px;
height: 100px;
position: absolute;
margin:;
padding: 10px;
top: -50px;
left: 50px; -webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
} .info {
position: absolute;
} #button:hover .page {
position: absolute;
top:5px;
} #button:hover .user {
left: 5px;
} #button:hover .comment {
left: 55%;
} #button:hover .mine {
left: 65%;
} #button:hover .posted {
top: 25px;
} #control-ring-container {
opacity:;
border-radius: 50%;
width: 130px;
height: 130px;
} #button:hover #control-ring-container{
opacity:;
width: 130px;
height: 130px;
position: absolute;
margin:;
padding: 10px;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
} .button {
border-radius: 50%; } #button:hover .button {
background: rgba(3,3,3,0.5);
width: 50px;
height: 50px;
position: absolute;
} #button:hover .mask {
top: 15px;
left: 0px;
background: url("assets/images/mask.png") rgba(3,3,3,0.5) no-repeat center;
} #button:hover .history {
top: 70px;
left: 5px;
background: url("assets/images/history.png") rgba(3,3,3,0.5) no-repeat center;
} #button:hover .message {
top: 120px;
left: 20px;
background: url("assets/images/message.png") rgba(3,3,3,0.5) no-repeat center;
} #button:hover .setting {
top: 130px;
left: 75px;
background: url("assets/images/setting.png") rgba(3,3,3,0.5) no-repeat center;
} #button:hover .sign {
top: 80px;
left: 120px;
background: url("assets/images/signin.png") rgba(3,3,3,0.5) no-repeat center;
/*background-size: 50px;*/
}

纯CSS3打造圆形菜单的更多相关文章

  1. 【Web前沿技术】纯 CSS3 打造的10个精美加载进度条动画

    之前向大家介绍8款优秀的 jQuery 加载动画和进度条插件,今天这篇文章向大家推荐10个纯 CSS3 代码实现精美加载进度条动画效果的方案.加载动画和进度条在网站和 Web 应用中的使用非常流行,特 ...

  2. 纯CSS3打造七巧板

    原文:纯CSS3打造七巧板 最近项目上要制作一个七巧板,脑子里瞬间闪现,什么...七巧板不是小时候玩的吗... 七巧板的由来 先来个科普吧,是我在查资料过程中看到的,感觉很有意思. 宋朝有个叫黄伯思的 ...

  3. 纯css3打造瀑布流布局

    纯css3打造瀑布流布局 原理: 1.column-count 把div中的文本分为多少列 2.column-width 规定列宽 3.column-gap 规定列间隙 4.break-inside: ...

  4. 纯CSS3打造非常炫的加载动画

    纯css3打造的一款非常炫的加载图.用在需要一定时间加载的地方非常合适.先上效果图: 点击这里在线预览 代码非常简单.没有用任何javascript代码.纯css3实现. html代码: <di ...

  5. [原创]纯CSS3打造的3D翻页翻转特效

    刚接触CSS3动画,心血来潮实现了一个心目中自己设计的翻页效果的3D动画,页面纯CSS3,目前只能在Chrome中玩,理论上可以支持Safari. 1. 新建HTML,代码如下(数据和翻页后的数据都是 ...

  6. 学用纯CSS3打造可折叠树状菜单

    CSS执行顺序与优先权的问题其实就是一个冲突解决的问题,当同一个元素(或内容)被CSS选择符选中时,就要按照优先权取舍不同的CSS规则,这其中涉及到的问题其实很多.首先就是CSS规则的specific ...

  7. 移动端纯CSS3制作圆形进度条所遇到的问题

    近日在开发的页面中,需要制作一个动态的圆形进度条,首先想到的是利用两个矩形,宽等于直径的一半,高等于直径,两个矩形利用浮动贴在一起,设置overflow:hidden属性,作为盒子,内部有一个与其宽高 ...

  8. 纯CSS3实现圆形进度条动画

    悄悄地,GIF 格式的进度条已经越来越少,CSS 进度条如雨后春笋般涌现.今天要介绍的这个 CSS3 进度条,效果和 Flyme OS 4 上的加载动画一样. 首先,来看下最终的效果: 它的 HTML ...

  9. 纯CSS3垂直动画菜单

    在线演示 本地下载

随机推荐

  1. 2.android工具使用及appium启动

    1.adb devices  可以查看手机是否连接成功. 2.aapt dump badging xxx.apk  查看app信息. 3.启动appium需配置platformName和deviceN ...

  2. 备忘 ubuntu ip 及 dns 的坑

    以前都用 ubuntu 16.04 现在用 18.04 遇到几个恶心的事,现在解决了,记录下来. 1. 设置 DNS  ,    DNS 设置老是不对,最后发现问题老版本 ubuntu 17.10以下 ...

  3. memcache缓存使用详解

    初始化一个Memcache的对象:$mem = new Memcache(); 连接到我们的Memcache服务器端,第一个参数是服务器的IP地址,也可以是主机名,第二个参数是Memcache的开放的 ...

  4. php 抽奖概率算法

    lottery.php <?php //转自https://segmentfault.com/a/1190000007431893 /* * 不同概率的抽奖原理就是把0到*(比重总数)的区间分块 ...

  5. Leetcode33.Search in Rotated Sorted Array搜索旋转排序数组

    假设按照升序排序的数组在预先未知的某个点上进行了旋转. ( 例如,数组 [0,1,2,4,5,6,7] 可能变为 [4,5,6,7,0,1,2] ). 搜索一个给定的目标值,如果数组中存在这个目标值, ...

  6. python的pip更改源,因为我们处于局域网中

    很多时候,比如网络不给力,连接超时.防火墙阻挡等等各种原因,我们可能无法从Python官方的PyPi仓库进行pip安装,这时候可以选择国内的第三方源,推荐使用豆瓣源,速度不错. 使用方法: pip i ...

  7. 悠星网络基于阿里云分析型数据库PostgreSQL版的数据实践

    说到“大数据”,当下这个词很火,各行各业涉及到数据的,目前都在提大数据,提数据仓库,数据挖掘或者机器学习,但同时另外一个热门的名词也很火,那就是“云”.越来越多的企业都在搭建属于自己的云平台,也有一些 ...

  8. 模拟4题解 T1礼物

    T1 题目描述 夏川的生日就要到了.作为夏川形式上的男朋友,季堂打算给夏川买一些生 日礼物. 商店里一共有种礼物.夏川每得到一种礼物,就会获得相应喜悦值Wi(每种 礼物的喜悦值不能重复获得). 每次, ...

  9. Leetcode867.Transpose Matrix转置矩阵

    给定一个矩阵 A, 返回 A 的转置矩阵. 矩阵的转置是指将矩阵的主对角线翻转,交换矩阵的行索引与列索引. 示例 1: 输入:[[1,2,3],[4,5,6],[7,8,9]] 输出:[[1,4,7] ...

  10. js实现动态计数效果

    下面附有数字图片和数字边框图 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...