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

 

posted @ 2017-06-22 17:58  dongxiaolei  阅读(774)  评论(0)    收藏  举报