zoukankan html css js c++ java

css3鼠标经过出现转圈菜单（仿）

<!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>

View Code

查看全文

相关阅读:
Ubuntu配置sublime text 3的c编译环境
 ORA-01078错误举例：SID的大写和小写错误
 linux下多进程的文件拷贝与进程相关的一些基础知识
 ASM(四) 利用Method 组件动态注入方法逻辑
 基于Redis的三种分布式爬虫策略
 Go语言并发编程总结
 POJ2406 Power Strings 【KMP】
nyoj 会场安排问题
 Server Tomcat v7.0 Server at localhost was unable to start within 45 seconds. If the server requires more time, try increasing the timeout in the server editor.
Java的String、StringBuffer和StringBuilder的区别

原文地址：https://www.cnblogs.com/dongxiaolei/p/7066408.html