纯CSS3打造圆形菜单
原理是使用相对定位和绝对定位确定圆形菜单位置。
使用伪类选择器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打造圆形菜单的更多相关文章
- 【Web前沿技术】纯 CSS3 打造的10个精美加载进度条动画
之前向大家介绍8款优秀的 jQuery 加载动画和进度条插件,今天这篇文章向大家推荐10个纯 CSS3 代码实现精美加载进度条动画效果的方案.加载动画和进度条在网站和 Web 应用中的使用非常流行,特 ...
- 纯CSS3打造七巧板
原文:纯CSS3打造七巧板 最近项目上要制作一个七巧板,脑子里瞬间闪现,什么...七巧板不是小时候玩的吗... 七巧板的由来 先来个科普吧,是我在查资料过程中看到的,感觉很有意思. 宋朝有个叫黄伯思的 ...
- 纯css3打造瀑布流布局
纯css3打造瀑布流布局 原理: 1.column-count 把div中的文本分为多少列 2.column-width 规定列宽 3.column-gap 规定列间隙 4.break-inside: ...
- 纯CSS3打造非常炫的加载动画
纯css3打造的一款非常炫的加载图.用在需要一定时间加载的地方非常合适.先上效果图: 点击这里在线预览 代码非常简单.没有用任何javascript代码.纯css3实现. html代码: <di ...
- [原创]纯CSS3打造的3D翻页翻转特效
刚接触CSS3动画,心血来潮实现了一个心目中自己设计的翻页效果的3D动画,页面纯CSS3,目前只能在Chrome中玩,理论上可以支持Safari. 1. 新建HTML,代码如下(数据和翻页后的数据都是 ...
- 学用纯CSS3打造可折叠树状菜单
CSS执行顺序与优先权的问题其实就是一个冲突解决的问题,当同一个元素(或内容)被CSS选择符选中时,就要按照优先权取舍不同的CSS规则,这其中涉及到的问题其实很多.首先就是CSS规则的specific ...
- 移动端纯CSS3制作圆形进度条所遇到的问题
近日在开发的页面中,需要制作一个动态的圆形进度条,首先想到的是利用两个矩形,宽等于直径的一半,高等于直径,两个矩形利用浮动贴在一起,设置overflow:hidden属性,作为盒子,内部有一个与其宽高 ...
- 纯CSS3实现圆形进度条动画
悄悄地,GIF 格式的进度条已经越来越少,CSS 进度条如雨后春笋般涌现.今天要介绍的这个 CSS3 进度条,效果和 Flyme OS 4 上的加载动画一样. 首先,来看下最终的效果: 它的 HTML ...
- 纯CSS3垂直动画菜单
在线演示 本地下载
随机推荐
- Redis源码解析:14Redis服务器与客户端间的交互
Redis服务器是典型的一对多服务器程序,通过使用由IO多路复用技术实现的文件事件处理器,Redis服务器使用单线程单进程的方式来处理命令请求,并与多个客户端进行网络通信. Redis客户端与服务器之 ...
- Django项目:CRM(客户关系管理系统)--41--33PerfectCRM实现King_admin编辑整张表限制
readonly_table=False#默认表单不锁定 readonly_table=True#默认表单不锁定 # forms.py # ————————19PerfectCRM实现King_adm ...
- TZ_14_Zuul网关_过滤器
1.Zuul作为网关的其中一个重要功能,就是实现请求的鉴权.而这个动作我们往往是通过Zuul提供的过滤器来实现的. 2.自定义过滤器实现用户登陆时需要携带一个Key才可以登陆,否则返回403 1> ...
- UOJ#422. 【集训队作业2018】小Z的礼物
#422. [集训队作业2018]小Z的礼物 min-max容斥 转化为每个集合最早被染色的期望时间 如果有x个选择可以染色,那么期望时间就是((n-1)*m+(m-1)*n))/x 但是x会变,中途 ...
- 20190809-RP?不存在的
火苗静静的将世界荡涤. ??? 毁灭它,点亮它. 只发光不放热? 那是虚无, ……还有你我的遗言. 考试过程. 通看三题. 额嗯嗯,没想法. T1写个暴力吧. T2好像挺简单. T3好像还行?? T1 ...
- 读书笔记--Head First PMP目录
1.引言 2.阻止.约束和项目 3.过程框架 4.项目整合管理 5.范围管理 6.时间管理 7.成本管理 8.质量管理 9.人力资源管理 10.沟通管理 11.项目风险管理 12.采购管理 13.职业 ...
- Mybatis insert返回主键ID
Mybatis insert语句书写 <insert id="insertSelective" useGeneratedKeys="true" keyPr ...
- springmvc 使用poi解析excel并通过hibernate连续插入多条数据 实际数据库只能保存最后一条
有一个原始数据的excel表 用poi解析之后通过hibernate插数据库 结果 后来发现,有人说 果断尝试 问题解决 但是这好像并不是真正解决问题,只是解决了一个现象 因为有人说 https:// ...
- org.hibernate.service.ServiceRegistryBuilder被弃用
看视频教程是这样写的: //创建配置对象 Configuration config = new Configuration().configure(); //创建服务注册对象 ServiceRegis ...
- python基础--线程、进程
并发编程: 操作系统:(基于单核研究) 多道技术: 1.空间上的复用 多个程序共用一个计算机 2.时间上的复用 切换+保存状态 例如:洗衣 烧水 做饭 切换: 1.程序遇到IO操作系统会立刻剥夺着CP ...