旋转小菜单

最新推荐文章于 2024-07-20 10:36:53 发布

aadmeqqi72246

最新推荐文章于 2024-07-20 10:36:53 发布

阅读量98

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Timonj/p/6699031.html

版权

完整代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>旋转菜单02</title>
<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">   <!--用一个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

aadmeqqi72246

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
旋转小菜单

完整代码：<!doctype html><html><head><meta charset="utf-8"><title>旋转菜单02</title><script type="text/javascript" src="jquery-3.1.1.js"&g...
复制链接

扫一扫