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

2024-07-11 08:34:08

字体：大中小

来源：转载

供稿：网友

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

上一篇：使用滤镜解决IE6下png图片不能透明(被渲染成默认色)的问题

下一篇：css图片缩放通过css控制图片自动缩放至css定义大小