旋转小菜单

旋转小菜单_第1张图片

 

旋转小菜单_第2张图片

 

 

完整代码:

doctype html>
<html>
<head>
<meta charset="utf-8">
<title>旋转菜单02title>
<script type="text/javascript" src="jquery-3.1.1.js">script>

<style> 
    *{margin: 0;padding: 0;}
    body{background-color: black;}
    
    #rotate_menu{transition: all 1s ease;transform: rotate(180deg);position: fixed;left: 600px;top: 200px;}     
    
    #rotate_menu div{width: 60px;height: 60px;border-radius: 50%; transition: all 1s ease;}
    #rotate_menu .li1,.li2,.li3,.li4{background-color:#00796B;}
    #rotate_menu .li1{position: absolute;left: -160px;top: 0;}    /*半径为160px的1/4圆*/ 
    #rotate_menu .li2{position: absolute;left: -138.6px;top: -80px;}     /*根据角度的关系(sin30,sin60)可以算出中间两个小圆(即中间两个div)的位置*/
    #rotate_menu .li3{position: absolute;left: -80px;top: -138.6px;}     
    #rotate_menu .li4{position: absolute;left: 0;top: -160px;}
    
    #rotate_menu .click_icon{position: absolute;box-shadow: 0 3px 10px grey;background-color:#00796B;}
    #rotate_menu .click_icon .dot{width: 12px;height: 12px;background-color: white;left: 36px;top: 24px;opacity: 1;transition: all 1s ease;position: absolute;}
    #rotate_menu .click_icon .dot:before{content: '';display: block; width: 12px;height: 12px;background-color: white;position: absolute;top: 12px;left: -20px;border-radius: 50%;opacity: 1;transition: all 1s ease;position: absolute;}
    #rotate_menu .click_icon .dot:after{content: '';display: block; width: 12px;height: 12px;background-color: white;position: absolute;top: -12px;left: -20px;border-radius: 50%;opacity: 1;transition: all 1s ease;position: absolute;}
    
    #rotate_menu .click_icon .bar{width: 24px;height: 3px;background-color: white; border-radius: 0;top: 22px;left: 18px; transform: rotate(30deg);transition: all 1s ease;position: absolute;}
    #rotate_menu .click_icon .bar:before{content: '';display: block; width: 24px;height: 3px;background-color: white;position: absolute;top: 12px;left: 8px; transform: rotate(-60deg);transition: all 1s ease;position: absolute;}
    
    
    #rotate_menu .click_icon.close .dot{opacity: 0;transition: all 1s ease;position: absolute;}
    #rotate_menu .click_icon.close .bar{top: 30px;transform: rotate(405deg);transition: all 1s ease;position: absolute;}
    #rotate_menu .click_icon.close .bar:before {top: -0;left: -0; transform: rotate(-450deg);transition: all 1s ease;position: absolute;}
    #rotate_menu .click_icon.close{background-color: #00796B;transform: scale(0.7);}

style>
<script type="text/javascript" src="jquery-3.1.1.js">script>
<script>
    $(document).ready(function (ev) {
        var toggle=$('#click_toggle');
        var menu=$('#rotate_menu');
        var rot;
        $('#click_toggle').on('click', function (ev) {
            rot = parseInt($(this).data('rot')) - 180;
            menu.css('transform', 'rotate(' + rot + 'deg)');
            
            if (rot / 180 % 2 == 0) 
            {
                toggle.addClass('close');
            } 
            else
            {
                toggle.removeClass('close');
            }
            
        $(this).data('rot', rot);
        });
      });  
    
script>
head>

<body>
<div id="rotate_menu">   
    <div class="li1">div>
    <div class="li2">div>
    <div class="li3">div>
    <div class="li4">div> 
    <div>
        <div id="click_toggle" class="click_icon" data-rot="180">
        <div class="dot">div>
        <div class="bar">div>
        div>
    div>
div>
body>
html>

 

转载于:https://www.cnblogs.com/Timonj/p/6699031.html

你可能感兴趣的:(旋转小菜单)