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

使用伪类选择器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. day18-事务与连接池 7.事务隔离级别总结

  2. (codeforces 853A)Planning 贪心

    Helen works in Metropolis airport. She is responsible for creating a departure schedule. There are n ...

  3. Leetcode441Arranging Coins排列硬币

    你总共有 n 枚硬币,你需要将它们摆成一个阶梯形状,第 k 行就必须正好有 k 枚硬币. 给定一个数字 n,找出可形成完整阶梯行的总行数. n 是一个非负整数,并且在32位有符号整型的范围内. 示例 ...

  4. JavaScript实现继承的方式和各自的优缺点

    ECMAscript只支持实现继承,主要是依靠原型链来实现的. JavaScript实现继承的方式: 类式继承 构造函数继承 组合继承 寄生组合式继承 1.类式继承 //类式继承 //声明父类 fun ...

  5. Hdu 1402 (FFT)

    题目链接 A * B Problem Plus Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/ ...

  6. ubuntu 安装 go 编译环境

    参考: http://wiki.ubuntu.org.cn/Golang 从仓库安装(apt-get) sudo apt-get install golang 修改环境变量: vim /etc/env ...

  7. ES6 promise 封装http请求

    今天研究了一下同事封装的http请求,用的是promise. 大结构是: const __fetch = (url, data = {}, config = {}) => { let param ...

  8. 解决VC编译的DLL要安装对应运行环境否则无法使用的问题

    编译时候改成静态链接,再通过使用Depends软件查看依赖即可.具体操作步骤:项目->属性->配置属性->C/C++-代码生成->运行库->多线程(/MT)说明:这种方法 ...

  9. Adding basic files · lcobucci/jwt@aad22ed · GitHub

    Skip to content   Features Business Explore Marketplace Pricing   This repository Sign in or Sign up ...

  10. Django项目:CRM(客户关系管理系统)--13--05PerfectCRM实现King_admin注册功能获取内存02

    admin_class.model = modelself.registered_sites[app_name][model_name] = admin_class #注册APP #base_admi ...