html中怎么做扇形菜单,纯CSS3实现扇形动画菜单(简化版)实例源码
之前的一篇文章介绍这种效果的实现,但实现代码太过繁琐,所以在这里分享以下简化版的实现方法,有需要的可以参考学习。
原文章请点击这里
简化版完整实例
CSS3扇形动画菜单
*{padding: 0; margin: 0;}
body{background:#b1b1b1;margin:0px;padding:0px;font-size:14px;color:#000;}
.menuHolder {width:100px; height:100px; margin:0 0 250px 0; position:relative;z-index:100;}
.menuHolder ul {padding:0px; margin:0; list-style:none; position:absolute; left:0; top:0; width:0; height:0;}
/*.menuHolder ul li {border-radius:0 0 300px 0; width:0; height:0;}*/
.menuHolder ul li a {color:#000; text-decoration:none; font:bold 13px/30px arial, sans-serif; text-align:center;
box-shadow:-5px 5px 5px rgba(0,0,0,0.4);transform-origin:0 0;}
.menuHolder ul.p1 li {position:absolute; left:0; top:0;}
.menuHolder ul.p2 {z-index:-1;}
.menuHolder ul.p3 {z-index:-1;}
/*画第一个圆圈*/
.menuHolder li.s1 > a {position:absolute; display:block; width:100px; height:100px; background:#c8c8c8; border-radius:0 0 100px 0;}
/*画第二个圆圈*/
.menuHolder li.s2 > a {position:absolute; display:block; width:100px; padding-left:100px; height:200px; background:#ddd; border-radius:0 0 200px 0;}
/*画第三个圆圈*/
.menuHolder ul.p3 li a {position:absolute; display:block; width:100px; padding-left:200px; height:300px; background:#999; border-radius:0 0 300px 0;}
/*把第二第三个圆隐藏到角落里去,让视角看不到*/
.menuHolder ul ul {transform-origin:0 0;transform:rotate(90deg);transition:1s;}
/*绘制第二层的菜单*/
.menuHolder li.s2:nth-of-type(6) > a {background:#888;
transform:rotate(75deg);
}
.menuHolder li.s2:nth-of-type(5) > a {background:#999;
transform:rotate(60deg);
}
.menuHolder li.s2:nth-of-type(4) > a {background:#aaa;
transform:rotate(45deg);
}
.menuHolder li.s2:nth-of-type(3) > a {background:#bbb;
transform:rotate(30deg);
}
.menuHolder li.s2:nth-of-type(2) > a {background:#ccc;
transform:rotate(15deg);
}
/*绘制联系的子菜单*/
.menuHolder .a6 li:nth-of-type(6) > a {background:#444;
transform:rotate(75deg);
}
.menuHolder .a6 li:nth-of-type(5) > a {background:#555;
transform:rotate(60deg);
}
.menuHolder .a6 li:nth-of-type(4) > a {background:#666;
transform:rotate(45deg);
}
.menuHolder .a6 li:nth-of-type(3) > a {background:#777;
transform:rotate(30deg);
}
.menuHolder .a6 li:nth-of-type(2) > a {background:#888;
transform:rotate(15deg);
}
/*绘制销量的子菜单*/
.menuHolder .a5 li:nth-of-type(5) > a {background:#555;
transform:rotate(72deg);
}
.menuHolder .a5 li:nth-of-type(4) > a {background:#666;
transform:rotate(54deg);
}
.menuHolder .a5 li:nth-of-type(3) > a {background:#777;
transform:rotate(36deg);
}
.menuHolder .a5 li:nth-of-type(2) > a {background:#888;
transform:rotate(18deg);
}
/*绘制服务、商店、联系我们的子菜单*/
.menuHolder .a3 li:nth-of-type(3) > a {background:#777;
transform:rotate(60deg);
}
.menuHolder .a3 li:nth-of-type(2) > a {background:#888;
transform:rotate(30deg);
}
/*鼠标滑过第一层菜单展开第二层菜单*/
.menuHolder li.s1:hover ul.p2 {
transform:rotate(0deg);
}
/*鼠标滑过第二层菜单展开第三层菜单*/
.menuHolder li.s2:hover ul.p3 {
transform:rotate(0deg);
}
/*鼠标滑过改变背景颜色和文字颜色*/
.menuHolder ul li:hover > a {background:#f00; color:#fff;}
.menuHolder li.s2:hover > a {background:#d00; color:#fff;}
.menuHolder .a6 li:hover > a {background:#b00; color:#fff;}
.menuHolder .a5 li:hover > a {background:#b00; color:#fff;}
.menuHolder .a3 li:hover > a {background:#b00; color:#fff;}
- 导航菜单
- 首页
- 服务
- 打印
- 编辑
- 保管
- 联系
- 支持
- 销售
- 购买
- 摄影师
- 零售商
- 常规
- 商店
- 南区
- 北区
- 中心区
- 联系我们
- 邮箱
- 邮递
- 电话
- 销量
- 数码单反机身
- 镜头
- 闪光枪
- 三角架
- 过滤器
效果图如下:
总结
以上就是这篇文章的全部内容了,希望对大家学习或者使用CSS3能带来一定的帮助,如果有疑问大家可以留言交流。
html中怎么做扇形菜单,纯CSS3实现扇形动画菜单(简化版)实例源码相关推荐
- android做拨号程序代码,Android开发手机拨号程序实现实例源码介绍
Android开发手机拨号程序实现实例源码介绍,在上一篇文章中,我们实现了第一个程序:helloWorld,并成功测试完成.还给大家介绍了Android项目结构和说明.现在写一个手机拨号程序: 首先, ...
- 纯html5语言编写的动画,8个纯CSS3制作的动画应用及源码
本文作者html5tricks,转载请注明出处 对于一个复杂的图形或者动画来说,之前我们的处理方式是图片叠加或者利用CSS+JavaScript的方法,然而随着CSS3标准的不断成熟,我们甚至完全可以 ...
- 用纯CSS3实现闪闪发光的动画
用纯CSS3实现闪闪发光的动画,最终实现效果如下图所示 以下展示实现该效果的代码: <!DOCTYPE HTML><html><head><title> ...
- 纯CSS3文字Loading动画特效
纯CSS3文字Loading动画特效是一款个性的loading文字加载动画. 在线演示本地下载 更多专业前端知识,请上 [猿2048]www.mk2048.com
- 纯css3可爱仙人掌动画效果
下载地址 纯css3可爱仙人掌动画效果,html+css代码,没有使用任何JavaScript代码实现的动画效果. dd:
- 纯CSS3冰川北极熊动画js特效
下载地址 纯CSS3冰川北极熊动画特效是一款卡通可爱的北极熊站在冰面上漂浮动画场景特效. dd:
- html怎么让方块自动旋转,如何使用纯CSS实现一个圆环旋转错觉的动画效果(附源码)...
本篇文章给大家带来的内容是关于如何使用纯CSS实现一个圆环旋转错觉的动画效果,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览 源代码下载 https://github.com ...
- c语言复制粘贴源码,c语言函数memccpy()如何复制内存中的内容实例源码介绍
c语言函数memccpy()如何复制内存中的内容实例源码介绍.引入的头文件:#include memccpy()函数定义:void * memccpy(void *dest, const void * ...
- html中超链接使用_HTML实例源码
HTML实例源码 实例一 1.要求: 知识要点: html 文档的基本结构,html 标签的书写格式.作用.用法 实训目的: 掌握 html 文档的基本结构,掌握 html 代码网页编辑的基本方法实训 ...
最新文章
- servlet实现http通信基础
- Android安全加密:Https编程
- Android 可拖拽的GridView效果实现, 长按可拖拽和item实时交换
- 19、20 Context API
- linux打开pythonshall,linux系统shell脚本后台运行python程序
- 计算机二级vb常考知识点,计算机二级VB考试重点考点
- [SQL Server 2014] SQL Server 2014新特性探秘
- 计算机硬件英语单词有哪些,计算机硬件英语词汇
- 在Win10上布置定时任务,运行Python脚本备份文件到FTP远程服务器
- 深入理解快速排序和STL的sort算法
- R语言之导入数据源(二)
- win10系统一键安装教程
- 将条码软件中的标签转化成PDF
- 程序员开发了自己的产品怎样推广?说一说我的免费在线客服系统推广经验
- 跨境电商“独立站”新风口丨从0-1答疑解惑篇
- 各进制转换成十进制的方法
- 第六届山东省赛总结贴
- PHP实现九宫格图片水印功能
- Sqlmap 22.05.22.02
- G1D33-BTG复现重跑实验
热门文章
- “区块链”将彻底改变人类社会文明,颠覆世界最强大的企业
- 前端:LayUi监听表格单元格,编辑后恢复原数据
- 搭建内网穿透工具-ngrok
- 适用于iOS的远程桌面软件
- mysql_assoc什么意思_MYSQL_ASSOC?
- 增加内存会让计算机变快吗?
- 如何在微信H5页面链接跳转到第三方小程序的任意页面?
- 分享88个HTML旅游交通模板,总有一款适合您
- Day 03-常用 Composition API_拉开序幕的setup()
- 修改jar 注入_ORA00600[16703]安装介质注入型勒索病毒恢复案例