css3实例教程 一款纯css3实现的环形导航菜单


Posted in HTML / CSS onOctober 20, 2014

之前为大家介绍了好几款导航菜单,今天要给大家带来一款纯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代码:

[code]body
        {
            background: #34495e;
        }
       
        .container
        {
            width: 550px;
            display: block;
            margin: auto;
            position: relative;
        }
       
        h1
        {
            text-align: center;
            font-family: 'Roboto' , sans-serif;
            font-weight: 400;
            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: 0;
        }
        .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: 10;
        }
        .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: 20;
            -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;
        }

[code]

HTML / CSS 相关文章推荐
CSS3实现跳动的动画效果
Sep 12 HTML / CSS
使用CSS3制作倾斜导航条和毛玻璃效果
Sep 12 HTML / CSS
css3进行截取替代js的substring
Sep 02 HTML / CSS
HTML5 本地存储 LocalStorage详解
Jun 24 HTML / CSS
详解Html5 Canvas画线有毛边解决方法
Mar 01 HTML / CSS
Html5实现如何在两个div元素之间拖放图像
Mar 29 HTML / CSS
仿酷狗html5手机音乐播放器主要部分代码
May 15 HTML / CSS
HTML5新特性之type=file文件上传功能
Feb 02 HTML / CSS
html5 外链式实现加减乘除的代码
Sep 04 HTML / CSS
uniapp+Html5端实现PC端适配
Jul 15 HTML / CSS
HTML+CSS实现导航条下拉菜单的示例代码
Aug 02 HTML / CSS
HTML怎么设置下划线?html文字加下划线方法
Dec 06 HTML / CSS
在HTML5中如何使用CSS建立不可选的文字
Oct 17 #HTML / CSS
布局和排版教程 纯css3实现图片三角形排列
Oct 17 #HTML / CSS
IE浏览器单独写CSS样式的几种方法
Oct 14 #HTML / CSS
CSS3 重置iphone浏览器按钮input,select等表单元素的默认样式
Oct 11 #HTML / CSS
css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
Oct 10 #HTML / CSS
css3弹性盒模型(Flexbox)详细介绍
Oct 08 #HTML / CSS
一款纯css3实现的动画加载导航
Oct 08 #HTML / CSS
You might like
PHP strtok()函数的优点分析
2010/03/02 PHP
ThinkPHP模板中判断volist循环的最后一条记录的验证方法
2014/07/01 PHP
一个XML格式数据转换为图表的例子
2010/02/09 Javascript
纯CSS打造的导航菜单(附jquery版)
2010/08/07 Javascript
JavaScript中各种编码解码函数的区别和注意事项
2010/08/19 Javascript
jQuery动态设置form表单的enctype值(实现代码)
2013/07/04 Javascript
js动态创建表格,删除行列的小例子
2013/07/20 Javascript
jquery实现的图片点击滚动效果
2014/04/29 Javascript
js实现获取div坐标的方法
2015/11/16 Javascript
JQuery+EasyUI轻松实现步骤条效果
2016/02/22 Javascript
js复制内容到剪贴板代码,js复制代码的简单实例
2016/10/27 Javascript
详解React-Todos入门例子
2016/11/08 Javascript
Nodejs中解决cluster模块的多进程如何共享数据问题
2016/11/10 NodeJs
微信小程序 POST请求(网络请求)详解及实例代码
2016/11/16 Javascript
js实现本地时间同步功能
2017/08/26 Javascript
axios对请求各种异常情况处理的封装方法
2018/09/25 Javascript
Vue实现简易翻页效果源码分享
2018/11/08 Javascript
vue 实现模糊检索并根据其他字符的首字母顺序排列
2019/09/19 Javascript
微信小程序基于movable-view实现滑动删除效果
2020/01/08 Javascript
原生js实现日历效果
2020/03/02 Javascript
JavaScript this指向相关原理及实例解析
2020/07/10 Javascript
Python实现向QQ群成员自动发邮件的方法
2014/11/19 Python
python中函数默认值使用注意点详解
2016/06/01 Python
对python 自定义协议的方法详解
2019/02/13 Python
python+logging+yaml实现日志分割
2019/07/22 Python
django下创建多个app并设置urls方法
2020/08/02 Python
HTML5的Geolocation地理位置定位API使用教程
2016/05/12 HTML / CSS
html5使用canvas绘制文字特效
2014/12/15 HTML / CSS
Aveda美国官网:天然护发产品、洗发水、护发素和沙龙
2016/12/09 全球购物
SQL Server 2000数据库的文件有哪些,分别进行描述
2013/03/30 面试题
2014年高三毕业生自我评价
2014/01/11 职场文书
公交公司毕业生求职信
2014/02/15 职场文书
美术毕业生求职信
2014/02/25 职场文书
售后服务承诺书怎么写
2014/05/21 职场文书
老员工辞职信范文
2015/05/12 职场文书
主持人大赛开场白
2015/05/29 职场文书