一款纯css3实现的环形导航菜单
之前为大家介绍了好几款导航菜单,今天要给大家带来一款纯css3实现的环形导航菜单。该导航比较新鲜,列表图标位于中间,单击列表图标的时候,各项分布于列表图表的四周。形成一个环形。效果图如下:
实现的代码。
html代码:
<div class="container">
<h1>
Cool Open/Close menu in full CSS</h1>
<input type="checkbox" id="menu_opener_id" class="menu_opener">
<label for="menu_opener_id" class="menu_opener_label">
</label>
<div class="barre_hamburger">
</div>
<a href="#" class="link_one link_general"></a><a href="#" class="link_two link_general">
</a><a href="#" class="link_three link_general"></a><a href="#" class="link_four link_general">
</a></input>
</div>
css代码:
body
{
background: #34495e;
} .container
{
width: 550px;
display: block;
margin: auto;
position: relative;
} h1
{
text-align: center;
font-family: 'Roboto' , sans-serif;
font-weight:;
color: #f1c40f;
} .menu_opener
{
display: none;
} .menu_opener:checked ~ .link_one
{
top: 65px;
}
.menu_opener:checked ~ .link_two
{
left: 385px;
}
.menu_opener:checked ~ .link_three
{
top: 385px;
}
.menu_opener:checked ~ .link_four
{
left: 65px;
}
.menu_opener:checked ~ .barre_hamburger
{
opacity:;
}
.menu_opener:checked ~ .menu_opener_label:after
{
transform: rotate(45deg);
top: 70px;
}
.menu_opener:checked ~ .menu_opener_label:before
{
transform: rotate(-45deg);
top: 70px;
} .menu_opener_label
{
background: #f1c40f;
width: 150px;
height: 150px;
display: block;
cursor: pointer;
border-radius: 50%;
position: absolute;
top: 200px;
left: 200px;
z-index:;
}
.menu_opener_label:after
{
position: absolute;
top: 50px;
left: 50px;
background: #000;
content: "";
width: 50px;
height: 10px;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.menu_opener_label:before
{
position: absolute;
top: 90px;
left: 50px;
background: #000;
content: "";
width: 50px;
height: 10px;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
} .barre_hamburger
{
width: 50px;
height: 10px;
position: absolute;
top: 270px;
left: 250px;
background: #000;
z-index:;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
} .link_general
{
width: 100px;
height: 100px;
display: block;
border-radius: 50%;
position: absolute;
top: 225px;
left: 225px;
background: #ecf0f1;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
} .link_one
{
background: url("home.png") #f1c40f no-repeat center center;
} .link_two
{
background: url("mail.png") #f1c40f no-repeat center center;
} .link_three
{
background: url("set.png") #f1c40f no-repeat center center;
} .link_four
{
background: url("start.png") #f1c40f no-repeat center center;
}
注:本文爱编程原创文章,转载请注明原文地址:http://www.w2bc.com/Article/7957
一款纯css3实现的环形导航菜单的更多相关文章
- 纯CSS3带动画效果导航菜单
随着互联网的发展,网页能表现的东西越来越多.由最开始单纯的文字和链接构成的网页,到后来的表格布局,再到div+css模式,现在发展到了html+css3.网页能表达的东西越来越多,css3兴起已经很多 ...
- 纯css3实现的动画导航菜单
测试咯 css3 前端特效代码 网页模板 图片素材 css3 前端特效代码 网页模板 图片素材 css3 前端特效代码 网页模板 图片素材 css3 前端特效代码 网页模板 图片素材 css3 前端特 ...
- 纯CSS3悬停图标旋转导航动画代码
分享一款纯CSS3悬停图标旋转导航动画代码.这是一款鼠标移到图标上动画旋转显示导航菜单.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id="x_con ...
- 一款纯css3实现的响应式导航
之前为大家介绍了好几款响应式导航.今天再给大家带来一款纯css3实现的响应式导航.这款导航还有个响应式的搜索框.废话少说,直接上图: 在线预览 源码下载 实现的代码. html代码: <di ...
- 一款纯css3实现的动画加载导航
之前为大家介绍了好几款导航菜单,今天为给大家再带来一款纯css3实现的动画加载导航.该导航出现的时候以动画的形式出现.效果图如下: 在线预览 源码下载 实现的代码. html代码: <ul ...
- 一款纯css3实现的条纹加载条
之前为大家带来了很多加载动画. 基于prefixfree.js的进度加载条 ,基于jquery带百分比的响应式进度加载条.今天给大家分享一款纯css3实现的条纹加载条.带有响应式的效果.效果图如下 : ...
- 7款纯CSS3实现的炫酷动画应用
1.纯CSS3实现人物摇头动画 这次我们要来分享一款超级可爱的纯CSS3人物摇头动画,初始化的时候人物的各个部位是利用CSS3动画效果拼接而成,接下来就是人物听音乐的场景,一边听音乐一边摇着脑袋,十分 ...
- 7款纯CSS3实现的炫酷动画应用|慕课网只学有用的!
关于我们 | 时尚廊 ♦ 时尚廊,中国大陆地区首家以"Lounge"为概念的艺文空间 ♦ 7款纯CSS3实现的炫酷动画应用|慕课网只学有用的! 7款纯CSS3实现的炫酷动画应用
- 16款纯CSS3实现的loading加载动画
分享16款纯CSS3实现的loading加载动画.这是一款实用的可替代GIF格式图片的CSS3加载动画代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div clas ...
随机推荐
- 23、java 通过System.getProperties()获取系统参数
1.java的System.getProperty()方法可以获取的值 java.version Java 运行时环境版本 java.vendor Java 运行时环境供应商 java.vendor. ...
- http 错误码对照表
代码 指示 2xx 成功 200 正常:请求已完成. 201 正常:紧接 POST 命令. 202 正常:已接受用于处理,但处理尚未完成. 203 正常:部分信息 — 返回的信息只是一部分. 204 ...
- 获取List对象的泛型类(原创)
群里一个伙计的需求,最后我提出了这种解决方案,不过他觉得多写俩括号增加了调用方的难度.还是先记下来吧,有时间看看还能不能再改造. 1.直接获取时获取不到的,类型被虚拟机擦除了2.利用子类实现父类的 ...
- JDBC实例--通过连接工具类DBUtil +配置文件来获取连接数据库,方便又快捷
根据前面的连接方法,还有缺点就是,如果人家要换数据库,还得改动源代码,然后还要编译什么的.这样客户修改也不容易. 做法:我们写一个配置文件,把该数据写在配置文件上面,然后通过类来加载改文件,然后读取相 ...
- eclipse+cygwin+cdt搭建c/c++开发环境
Cygwin 是一个用于 Windows 的类 UNIX shell 环境. 它由两个组件组成:一个 UNIX API 库,它模拟 UNIX 操作系统提供的许多特性:以及 Bash shell 的改写 ...
- 每一个软件开发人员绝对必须掌握的关于 Unicode 和字符集的最基础的知识
2013-02-05 14:18 48人阅读 评论(0) 收藏 举报 关键字: Unicode, Character Set, 字符集, UTF-8, ANSI, ASCII, UTF-7 ...
- 云ci自动构建实例 最佳实践
- 执行Android项目时指定特定的AVD进行測试
一个Androidproject空间能够创建一个或多个AVD来对指定的Android项目进行測试,假设仅仅创建了一个AVD则执行Android项目时自然启动该AVD,但是假设创建了多个AVD那么我们该 ...
- 【laravel5.4】引入自定义类库+卸载已有的自定义库(以引入钉钉应用为例)composer dumpautoload -o
本文之前,首先感谢: Azeroth_Yang 传送门:https://blog.csdn.net/zwrj1130/article/details/73467320 强烈建议引入的类 都是含有命名 ...
- Linux-Linux下安装redis报错"undefined reference to__sync_add_and_fetch_4"解决办法
如果出现这种错误可以在make的时候加上CFLAGS="-march=i686" 即 make CFLAGS="-march=i686" ----------- ...