旋转小菜单
完整代码:
<!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>