<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        *{

            margin: 0;

            padding:0;

        }

        body{

            background:#006d5c;

        }

        .outer{

            position: relative;

            width:150px;

            height:150px;

            margin:80px auto;

            border-radius: 50%;

            background:#fff;

            cursor: pointer;

            transition:all 1s

        }

        .outer ul{

            list-style: none;

            position: absolute;

            top:-75px;

            left:-75px;

            border-radius:50%;

            border: 150px solid transparent;

            z-index: -1;

            transform:scale(0);

            transition: transform 1.4s 0.07s;

        }

        .outer li{

            position: absolute;

            top: -100px;

            left: -100px;

            transform-origin: 100px 100px;

            transition: all 0.5s 0.1s;

        }

        a{

            text-decoration: none;

            color:#02c67c;

            width: 45px;

            height: 45px;

            line-height: 45px;

            border-radius: 50%;

            background: #fff;

            position: absolute;

            font-size: 14px;

            transition: 0.6s;

            text-align: center;

        }

        .outer:hover ul{

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

            transform: scale(1);

            z-index: 1;

        }

        .outer:hover li{

            transition:all 0.6s

        }

        .outer:hover li:nth-child(1){

            transition-delay:0.02s;

            transform:rotate(90deg);

        }

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

            transition-delay:0.04s;

            transform:rotate(270deg);

        }

        .outer:hover li:nth-child(2){

            transition-delay:0.04s;

            transform:rotate(125deg);

        }

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

            transition-delay:0.08s;

            transform:rotate(595deg);

        }

        .outer:hover li:nth-child(3){

            transition-delay:0.06s;

            transform:rotate(165deg);

        }

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

            transition-delay:0.12s;

            transform:rotate(555deg);

        }

        .outer:hover li:nth-child(4){

            transition-delay:0.08s;

            transform:rotate(205deg);

        }

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

            transition-delay:0.16s;

            transform:rotate(515deg);

        }

        .outer:hover li:nth-child(5){

            transition-delay:0.1s;

            transform:rotate(245deg);

        }

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

            transition-delay:0.2s;

            transform:rotate(475deg);

        }

        .outer:hover li:nth-child(6){

            transition-delay:0.12s;

            transform:rotate(285deg);

        }

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

            transition-delay:0.24s;

            transform:rotate(435deg);

        }

        .outer:hover li:nth-child(7){

            transition-delay:0.14s;

            transform:rotate(325deg);

        }

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

            transition-delay:0.28s;

            transform:rotate(395deg);

        }

        .outer:hover li:nth-child(8){

            transition-delay:0.16s;

            transform:rotate(365deg);

        }

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

            transition-delay:0.32s;

            transform:rotate(355deg);

        }

        .outer:hover li:nth-child(9){

            transition-delay:0.18s;

            transform:rotate(405deg);

        }

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

            transition-delay:0.36s;

            transform:rotate(315deg);

        }

    </style>

</head>

<body>

<div class="outer">

    <ul>

        <li>

            <a href="javascript:void (0);">1</a>

        </li>

        <li>

            <a href="javascript:void (0);">2</a>

        </li>

        <li>

            <a href="javascript:void (0);">3</a>

        </li>

        <li>

            <a href="javascript:void (0);">4</a>

        </li>

        <li>

            <a href="javascript:void (0);">5</a>

        </li>

        <li>

            <a href="javascript:void (0);">6</a>

        </li>

        <li>

            <a href="javascript:void (0);">7</a>

        </li>

        <li>

            <a href="javascript:void (0);">8</a>

        </li>

        <li>

            <a href="javascript:void (0);">9</a>

        </li>

    </ul>

</div>

</body>

</html>

css3鼠标经过出现转圈菜单（仿）的更多相关文章

  1. 非常酷的CSS3垂直下拉动画菜单

    昨天我向大家介绍了一款兼容性不错的jQuery淡入淡出下拉菜单,今天要分享一款相对绚丽的CSS3垂直下拉动画菜单,不过需要支持CSS3的浏览器才能有效果.下面是效果图,一起看看. 我们也可以在这里查看 ...

  2. 可以兼容ie6的纯CSS三级鼠标悬停显示/隐藏菜单实现

    本来在chrome上用js写的好好的三级显隐菜单,放到ie6上一测试竟然奇葩般的会瞎闪.问题原因至今没参透,可能是我每次响应事件的处理代码过长??总之我是对ie6幻灭了,去网上搜一搜能支持ie6的下拉 ...

  3. 如何不使用js实现鼠标hover弹出菜单效果

    最近看到很多同学在实现鼠标hover弹出菜单的效果时都是用的js代码去实现的,默认给弹出隐藏掉,通过js事件绑定动态的显/隐弹出菜单元素. <ul> <li>主页</li ...

  4. CSS3鼠标滑过图标放大以及旋转

    本人是HTML5-CSS3初学者,这次分享一款纯CSS3实现的图片动画,当鼠标滑过小图标时,图标会放大,同时图标会出现旋转的动画效果.我们在很多个性化个人博客中经常看到鼠标滑过人物头像后头像图片旋转就 ...

  5. CSS3鼠标滑过动画线条边框特效

    基于CSS属性animation动画制作,效果流畅弹性十足 效果展示 http://hovertree.com/texiao/css3/32/ 源码下载:http://hovertree.com/h/ ...

  6. CSS3鼠标悬停图片上浮显示描述代码

    效果:http://hovertree.com/texiao/css3/20/ 效果图: 代码如下: <!doctype html> <html lang="zh" ...

  7. jQuery css3鼠标悬停图片显示遮罩层动画特效

    jQuery css3鼠标悬停图片显示遮罩层动画特效 效果体验:http://hovertree.com/texiao/jquery/39/ 效果图: 源码下载:http://hovertree.co ...

  8. css3实现光标悬浮滚动菜单

    效果:http://hovertree.com/texiao/css3/21/ 本文所用到的CSS知识请点击效果展示也中第一和第二个链接. 代码: <!DOCTYPE html> < ...

  9. 用jQuery做一个三级菜单，鼠标移动到二级菜单的选项上，然后再迅速离开后，当鼠标再移动到该一级菜单或其他二级菜单选项，三级菜单也会显示。

    用jQuery做一个三级菜单,鼠标移动到二级菜单的选项上,然后再迅速离开后,当鼠标再移动到该一级菜单或其他二级菜单选项,三级菜单也会显示. 原因:在为一个元素绑定hover事件之后,用户把光标移入元素 ...

随机推荐

  1. Tomcat源码分析——启动与停止服务

    前言 熟悉Tomcat的工程师们,肯定都知道Tomcat是如何启动与停止的.对于startup.sh.startup.bat.shutdown.sh.shutdown.bat等脚本或者批处理命令,大家 ...

  2. 第6章 通过CrawlSpider对招聘网站进行整站爬取

    通过前几章的2个项目的学习,其实本章的拉钩网项目还是挺容易理解的. 本章主要的还是对CrawlSpider源码的解析,其实我对源码还不是很懂,只是会基本的一些功能而已. 不分小节记录了,直接上知识点, ...

  3. swagger api文档添加jwt授权配置

    最近写的swagger文档,要加jwt授权,所以几经google终于搞定了,简简单单几行配置如下: securityDefinitions: APIKey: type: apiKey name: Au ...

  4. Hadoop源码学习笔记(4) ——Socket到RPC调用

    Hadoop源码学习笔记(4) ——Socket到RPC调用 Hadoop是一个分布式程序,分布在多台机器上运行,事必会涉及到网络编程.那这里如何让网络编程变得简单.透明的呢? 网络编程中,首先我们要 ...

  5. [javaSE] IO流（装饰设计模式）

    装饰设计模式:当想要对已有的对象进行功能增强时,可以自定义类将已有的对象传入,并提供加强功能,自定义的该类称为装饰类 典型的: Reader--FileReader --BufferedReader ...

  6. 三：Bootstrap-js插件

    模式框: <button class="btn btn-default btn-lg" data-toggle="modal" data-target=& ...

  7. idea搭建Spring Boot+Mybatis及使用教程

    环境准备 idea 15 jDK tomcat maven 搭建方式 官网下载源码包解压缩 使用idea中的Spring initializr创建 这两种方法创建的项目完全相同,只是操作方式不一样 这 ...

  8. HDU 2680（最短路）（多个起始点）

    这道题也是死命TLE.. http://acm.hdu.edu.cn/showproblem.php?pid=2680 /* 使用pair代替结构 */ #include <iostream&g ...

  9. Spring的自动装配Bean

    spring的自动装配功能的定义:无须在Spring配置文件中描述javaBean之间的依赖关系(如配置<property>.<constructor-arg>).IOC容器会 ...

  10. mybatis-generator 动态生成实体对象、dao 以及相关的xml映射文件

    .新建maven空项目 2.修改pom.xml文件 <?xml version="1.0" encoding="UTF-8"?> <proje ...