CSS3圆环动态弹出菜单

体验效果：
http://hovertree.com/texiao/css3/44/

代码如下：

<!DOCTYPE html>

<html lang="zh">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>纯CSS3圆形主菜单展开特效 - 何问起</title><base target="_blank" />

<link href="http://hovertree.com/texiao/css3/44/css/bootstrap.min.css" rel="stylesheet">

<link href="http://hovertree.com/texiao/css3/44/css/font-awesome.min.css" rel="stylesheet">

<link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/css3/44/css/hewenqi.css">

<style type="text/css">

    .demo{

        padding: 2em 0;

        transform: translate3d(0, 0, 0);

    }

    .navbar{

        width: 150px;

        height: 150px;

        line-height: 150px;

        border-radius: 50%;

        background: #fff;

        margin: 70px auto;

        position: relative;

        cursor: pointer;

        text-align: center;

        font-size: 1.75em;

        font-weight: bold;

        color: #99b977;

        transition: 0.24s 0.2s;

    }

    .navbar:hover{

        background: rgba(255, 255, 255, 0.75);

    }

    .navbar .menu{

        list-style: none;

        padding: 0;

        margin: 0;

        position: absolute;

        top: -75px;

        left: -75px;

        border: 150px solid transparent;

        cursor: default;

        border-radius: 50%;

        transform: scale(0);

        transition: transform 1.4s 0.07s;

        z-index: -1;

    }

    .navbar:hover .menu{

        transition: transform 0.4s 0.08s, z-index   0s  0.5s;

        transform: scale(1);

        z-index: 1;

    }

    .navbar .menu li{

        position: absolute;

        top: -100px;

        left: -100px;

        transform-origin: 100px 100px;

        transition: all 0.5s 0.1s;

    }

    .navbar:hover .menu li{

        transition: all 0.6s;

    }

    .navbar .menu li a{

        width: 45px;

        height: 45px;

        line-height: 45px;

        border-radius: 50%;

        background: #fff;

        position: absolute;

        font-size: 60%;

        color: #99b977;

        transition: 0.6s;

    }

    .navbar:hover .menu li:nth-child(1){

        transition-delay: 0.02s;

        transform: rotate(85deg);

    }

    .navbar:hover .menu li:nth-child(1) a{

        transition-delay: 0.04s;

        transform: rotate(635deg);

    }

    .navbar:hover .menu li:nth-child(2){

        transition-delay: 0.04s;

        transform: rotate(125deg);

    }

    .navbar:hover .menu li:nth-child(2) a{

        transition-delay: 0.08s;

        transform: rotate(595deg);

    }

    .navbar:hover .menu li:nth-child(3){

        transition-delay: 0.06s;

        transform: rotate(165deg);

    }

    .navbar:hover .menu li:nth-child(3) a{

        transition-delay: 0.12s;

        transform: rotate(555deg);

    }

    .navbar:hover .menu li:nth-child(4){

        transition-delay: 0.08s;

        transform: rotate(205deg);

    }

    .navbar:hover .menu li:nth-child(4) a{

        transition-delay: 0.16s;

        transform: rotate(515deg);

    }

    .navbar:hover .menu li:nth-child(5){

        transition-delay: 0.1s;

        transform: rotate(245deg);

    }

    .navbar:hover .menu li:nth-child(5) a{

        transition-delay: 0.2s;

        transform: rotate(475deg);

    }

    .navbar:hover .menu li:nth-child(6){

        transition-delay: 0.12s;

        transform: rotate(285deg);

    }

    .navbar:hover .menu li:nth-child(6) a{

        transition-delay: 0.24s;

        transform: rotate(435deg);

    }

    .navbar:hover .menu li:nth-child(7){

        transition-delay: 0.14s;

        transform: rotate(325deg);

    }

    .navbar:hover .menu li:nth-child(7) a{

        transition-delay: 0.28s;

        transform: rotate(395deg);

    }

    .navbar:hover .menu li:nth-child(8){

        transition-delay: 0.16s;

        transform: rotate(365deg);

    }

    .navbar:hover .menu li:nth-child(8) a{

        transition-delay: 0.32s;

        transform: rotate(355deg);

    }

    .navbar:hover .menu li:nth-child(9){

        transition-delay: 0.18s;

        transform: rotate(405deg);

    }

    .navbar:hover .menu li:nth-child(9) a{

        transition-delay: 0.36s;

        transform: rotate(315deg);

    }

</style>

</head>

<body>

<div class="demo">

    <div class="container">

        <div class="row">

            <div class="col-md-12">

                <div class="navbar">主菜单

                    <ul class="menu">

                        <li><a href="http://hovertree.com/h/bjaf/hpv2kwl1.htm" class="fa fa-facebook"></a></li>

                        <li><a href="http://hovertree.com/h/bjag/mej790la.htm" class="fa fa-google-plus"></a></li>

                        <li><a href="http://hovertree.com/h/bjaf/28bhvmmu.htm" class="fa fa-twitter"></a></li>

                        <li><a href="http://hovertree.com/h/bjag/ajaxmvc.htm" class="fa fa-linkedin"></a></li>

                        <li><a href="http://hovertree.com/h/bjag/o46xlsnm.htm" class="fa fa-pinterest"></a></li>

                        <li><a href="http://hovertree.com/h/bjag/toiq32dh.htm" class="fa fa-rss"></a></li>

                        <li><a href="http://hovertree.com/h/bjaf/aqm3qaed.htm" class="fa fa-instagram"></a></li>

                        <li><a href="http://hovertree.com/h/bjaf/c2c0k0tf.htm" class="fa fa-skype"></a></li>

                        <li><a href="http://hovertree.com/h/bjaf/ati6k7yk.htm" class="fa fa-github"></a></li>

                    </ul>

                </div>

            </div>

        </div>

    </div>

</div>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">

<p>适用浏览器：支持CSS3的浏览器</p>

<p>来源：<a href="http://hovertree.com/" target="_blank">何问起</a></p>

</div>

</body>

</html>

CSS3圆环动态弹出菜单的更多相关文章

如何不使用js实现鼠标hover弹出菜单效果
最近看到很多同学在实现鼠标hover弹出菜单的效果时都是用的js代码去实现的,默认给弹出隐藏掉,通过js事件绑定动态的显/隐弹出菜单元素. <ul> <li>主页</li ...
html + js 右点击弹出菜单
页面引用jar 包 <link rel="stylesheet" href="../../style/zui.min.css" type="t ...
关于MFC主菜单和右键弹出菜单
一.主菜单.弹出菜单和右键菜单的概念: 主菜单是窗口顶部的菜单,一个窗口或对话框只能有一个主菜单,但是主菜单可以被更改(SetMenu()更改): 创建方式:CMenu::CreateMenu(voi ...
向上弹出菜单jQuery插件
插件名:柯乐义英文名:Keleyijs文件名称:jquery.keleyi.js插件功能:该插件可以让你轻易地在页面上构建一个向上弹出的二级菜单. 示例查看:http://keleyi.com/kel ...
html5手机端遮罩弹出菜单代码
效果体验:http://hovertree.com/texiao/html5/17/ 效果图: 代码如下: <!doctype html> <html lang="zh&q ...
DIV+CSS制作二级横向弹出菜单，略简单
没有使用JavaScript控制二级菜单的显示,结果如上图所示. 代码如下: <!DOCTYPE html> <html> <head> <meta char ...
vc++ 如何添加右键弹出菜单
一.创建新工程二.编辑菜单资源 1.添加菜单按"Ctrl+R",双击"Menu"图标 2.于菜单编辑器内编辑菜单四.添加代码(红色部分) void CCM ...
创建 iPhone/iOS8 弹出菜单（窗口）
基本步骤添加视图:主视图与弹出视图关联视图配置弹出视图编码实现:弹出菜单样式及控制器委托 override func prepareForSegue(segue: UIStoryboardSe ...
android 单选、多选弹出菜单
菜单单选窗口: import android.app.Activity;import android.app.AlertDialog;import android.content.DialogInte ...

随机推荐

js中Array数组基本方法
总结:push() 添加元素到数组未尾, 返回数组长度 unshift() 添加元素到数组头部, 返回数组长度 pop() 删除数组未尾元素, 返回删除元素 shift() 删除数组头部元素, 返回删 ...
二叉树之AVL树
高度为 h 的 AVL 树,节点数 N 最多2^h − 1: 最少N(h)=N(h− 1) +N(h− 2) + 1. 最少节点数n 如以斐波那契数列可以用数学归纳法证明: 即: N(0) = 0 ( ...
【密码技术】Part 4 SSL/TLS
01 SSL/TLS基本概念 02 TLS协议流程图
vue 的全局组件和局部组件
vue组件局部与全局注册的区别 //局部注册 var mycomponent = new extend({ <!--Vue.extend()是Vue构造器的扩展,调用Vue.e ...
Arch Linux VMware虚拟机（新手）安装教程
准备工作: 下载好Arch Linux的镜像文件百度打开Arch官网点击download(下载)转到下载界面,点击磁力下载或者种子下载(官网默认是英文,英文不好的童鞋可以安装浏览器翻译插件,本 ...
python之路-----前端之css
本篇内容 CSS 语法 css的四种引入方式 css选择器 css属性操作 Caution! 后台管理布局 css响应式布局一.CSS语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声 ...
spring MVC 入门：
概述: MVC: M model 模型,除控制和视图以外,都可以成为模型. V view 视图,JSP,HTML,ASP,PHP,XHTML,FREEMARK,JSF,直接与用户做交互的资源. C c ...
软件151 王楚博 struts
一.下载Struts 建立web项目,给项目添加外部引用包(project-properties-Java Build Path-Add External Jars...).添加的包有:commons ...
npx
npx 是什么? npm v5.2.0引入的一条命令(npx),引入这个命令的目的是为了提升开发者使用包内提供的命令行工具的体验. 举例:使用create-react-app创建一个react项目. ...
机器学习sklearn
sklearn相关模块导入 from sklearn.feature_extraction import DictVectorizer from sklearn.feature_extraction. ...

CSS3圆环动态弹出菜单

CSS3圆环动态弹出菜单的更多相关文章

随机推荐

热门专题