html中怎么做扇形菜单,CSS3实现扇形动画菜单流程详解
这次给大家带来CSS3实现扇形动画菜单流程详解,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;}
- 导航菜单
- 首页
- 服务
- 打印
- 编辑
- 保管
- 联系
- 支持
- 销售
- 购买
- 摄影师
- 零售商
- 常规
- 商店
- 南区
- 北区
- 中心区
- 联系我们
- 邮箱
- 邮递
- 电话
- 销量
- 数码单反机身
- 镜头
- 闪光枪
- 三角架
- 过滤器
效果图如下:
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
html中怎么做扇形菜单,CSS3实现扇形动画菜单流程详解相关推荐
- CSS3 animation(动画)属性详解
CSS3animation(动画)属性 animation-none :指定有没有动画(可用于覆盖从从级联的动画) animation-duration属性定义动画完成一个周期需要多少秒或毫秒 tim ...
- (转)web.xml 中的listener、 filter、servlet 加载顺序及其详解
转: https://www.cnblogs.com/Jeely/p/10762152.html web.xml 中的listener. filter.servlet 加载顺序及其详解 一.概述 1. ...
- nmmqq.php?/lspc.html,html中的图片直接使用base64编码后的字符串代替详解
网页中的图片是使用base64编码后的字符串代替了,这个叫做Data URI scheme,下面有个不错的示例,大家可以参考下 最近来了一个网页,里面有图片,但是却没有引用外部的图片资源,很好奇.查看 ...
- Java中常见RuntimeException与其他异常表及Exception逻辑关系详解
Java中常见RuntimeException与其他异常表及Exception逻辑关系详解 前言 常见`RuntimeException` 其他错误类型 `Error`类 `Exception`类 E ...
- 多目标跟踪(MOT)中的卡尔曼滤波(Kalman filter)和匈牙利(Hungarian)算法详解
多目标跟踪(MOT)中的卡尔曼滤波(Kalman filter)和匈牙利(Hungarian)算法详解 1. 概览 在开始具体讨论卡尔曼滤波和匈牙利算法之前,首先我们来看一下基于检测的目标跟踪算法的大 ...
- JS/JavaScript中解析JSON --- JSON.parse()、JSON.stringify()以及$.parseJSON()使用详解
JS/JavaScript中解析JSON --- JSON.parse().JSON.stringify()以及$.parseJSON()使用详解 现在JSON格式在web开发中非常重要,特别是在使用 ...
- CSS3动画属性 animation详解(看完就会)
CSS3动画属性 animation 文章包含个人理解错误请指出 往期文章 [css高级]变量详解 轮播图swiper框架的基本使用 [Transform3D]转换详解(看完就会) [css动画] ...
- html注册验证radio,html中radio值的获取、赋值、注册事件示例详解分享
1,radio分组 只要name一样,就是一组的,即一组中只能选择一个,如下: 复制代码代码如下: group1: radio1 radio2 radio3 group2: radio4 radio5 ...
- php self this static,PHP 中 self、static、$this 的区别和后期静态绑定详解
本篇文章给大家分享的内容是关于PHP 中 self.static.$this 的区别和后期静态绑定详解,有着一定的参考价值,有需要的朋友可以参考一下 self.static 和 $this 的区别 为 ...
最新文章
- chown -r oracle:oinstall /oracle,ORA-17503: 因为CHOWN -R ORACLE:OINSTALL 导致的
- 人工智能正在向具有“高情商”发展
- 如何检查文件是否是python中的目录或常规文件? [重复]
- Android 线程管理
- ios 原生骨架动画库
- ASCII与unicode的转换
- 一些比较小众的小程序类型,如AI算命,影视视频等
- JS信用卡真实利率计算器
- c语言程序怎样输出一个图形,C语言循环输出各种 * 组成的图形
- HDMI/DVI设备热插拨检测
- BOX3开发者工具使用说明
- iPhone X适配之启动图适配教程
- c语言象棋教程下载,C语言程序源代码中国象棋.doc-资源下载在线文库www.lddoc.cn...
- Power BI笔记:给排名度量添加矢量图标效果
- selenium跳过登录
- 电脑计算机u盘打印机,手把手处理win10系统设备和打印机选项无法打开的方案
- 基于Spark平台的协同过滤实时电影推荐系统
- xls/csv文件转换成dbf文件
- ShareTechnote系列LTE(6):下行子帧解码(PCFICH、PHICH、PDCCH、PDSCH解码)
- Linux 命令大全 (新手必备收藏)
热门文章
- Ubuntu安装Google Chrome,报NSS version的错误
- 渐变的用法及案例实现
- 如何在A4纸上打印连续的条形码
- IE病毒必杀记-IE病毒常用查杀方法简介(转)
- excel转word_pdf转word软件永久jpg图片ppt转换excel编辑器压缩合并拆分去水印,加入自律圈即可获得!!!...
- PT_随机变量函数的分布_随机变量线性函数的正态分布
- web网页设计实例作业 HTML5+CSS大作业——简单的个人图片网站(6页)
- 带动画效果的下拉菜单
- (JAVA编成练习):递归的使用,简单的列子帮你理解递归。
- nasa注册_“NASA中文”更名的情况说明