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 translate导致字体模糊的实例代码
Aug 30 HTML / CSS
css3制作动态进度条以及附加jQuery百分比数字显示
Dec 13 HTML / CSS
css3类选择器之结合元素选择器和多类选择器用法
Mar 09 HTML / CSS
详解css3中 text-fill-color属性
Jul 08 HTML / CSS
HTML高亮关键字的实现代码
Oct 22 HTML / CSS
html5 viewport使用方法示例详解
Dec 02 HTML / CSS
HTML5 visibilityState属性详细介绍和使用实例
May 03 HTML / CSS
HTML5 canvas绘制的玫瑰花效果
May 29 HTML / CSS
HTML5实现WebSocket协议原理浅析
Jul 07 HTML / CSS
前后端结合实现amazeUI分页效果
Aug 21 HTML / CSS
纯html+css实现奥运五环的示例代码
Aug 02 HTML / CSS
bootstrapv4轮播图去除两侧阴影及线框的方法
Feb 15 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 DOS攻击实现代码(附如何防范)
2012/05/29 PHP
PHP中__get()和__set()的用法实例详解
2013/06/04 PHP
php设计模式之观察者模式实例详解【星际争霸游戏案例】
2020/03/30 PHP
cssQuery()的下载与使用方法
2007/01/12 Javascript
JS下高效拼装字符串的几种方法比较与测试代码
2010/04/15 Javascript
js写的评论分页(还不错)
2013/12/23 Javascript
javascript操作符&quot;!~&quot;详解
2015/02/10 Javascript
基于jQuery实现仿搜狐辩论投票动画代码(附源码下载)
2016/02/18 Javascript
jQuery实现根据滚动条位置加载相应内容功能
2016/07/18 Javascript
JavaScript数据结构之链表的实现
2017/03/19 Javascript
微信小程序template模板实例详解
2017/10/27 Javascript
js定时器实现倒计时效果
2017/11/05 Javascript
vue如何安装使用Quill富文本编辑器
2018/09/21 Javascript
nodejs基础之buffer缓冲区用法分析
2018/12/26 NodeJs
jquery 回调操作实例分析【回调成功与回调失败的情况】
2019/09/27 jQuery
使用zrender.js绘制体温单效果
2019/10/31 Javascript
JS代码实现页面切换效果
2021/01/10 Javascript
[42:04]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第一局
2016/03/03 DOTA
Django验证码的生成与使用示例
2017/05/20 Python
Python Pandas找到缺失值的位置方法
2018/04/12 Python
python3结合openpyxl库实现excel操作的实例代码
2018/09/11 Python
创建Django项目图文实例详解
2019/06/06 Python
python pandas模块基础学习详解
2019/07/03 Python
Django中多种重定向方法使用详解
2019/07/17 Python
CSS3 透明色 RGBA使用介绍
2013/08/06 HTML / CSS
巴西24小时在线药房:Droga Raia
2020/05/12 全球购物
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢?
2016/08/18 面试题
2014年道德讲堂实施方案
2014/03/05 职场文书
《回乡偶书》教学反思
2014/04/12 职场文书
社区学习雷锋活动总结
2014/04/25 职场文书
开展批评与自我批评心得体会
2014/10/17 职场文书
2014年音乐教师工作总结
2014/12/03 职场文书
先进事迹材料怎么写
2014/12/30 职场文书
2016教师节感恩话语
2015/12/09 职场文书
pytorch通过训练结果的复现设置随机种子
2021/06/01 Python
实战 快速定位MySQL的慢SQL
2022/03/22 MySQL