hover时创build一个CSS“path”

我试图用（主要）CSS生成一个'漂亮的'CSS菜单，但也有一些jQuery ：

我的总体思路是：

+------------------------+ | | | | | +---+ | | | | | | |___| | <-- Hover this center piece | | | | | | +------------------------+ +------------------------+ | _ | | |\ | <-- All start moving up to top of screen | \ +---+ | | | | | | |___| | | | | | | | +------------------------+ +------------------------+ | +---+ | | | | | | |___| | | | | || All, but one | | || moves down | | \/ | | | +------------------------+ +------------------------+ | +---+ | | | | | | |___| | | | | One stays, | | +---+ the rest move this way | | | ---> | | |___| | +------------------------+ +------------------------+ | +---+ | | | | | | |___| ^ | The rest move up | | | | | | | +---+ +---+ | | | | | | | | |___| |___| |<-- Another stays +------------------------+ 

完成：

 +------------------------+ | +---+ +---+ | | | 1 | | 4 | | | |___| |___| | | | | | | +---+ +---+ | | | 2 | | 3 | | | |___| |___| | +------------------------+ 

然而，这假设将会有四个div的孩子，所以我试图产生一个“确定angular度/位置”在jQuery（老实说，不是工作得很好）的方式。

---

类似的devise：

---

所以最后，由于有四个div，它们距离中心90度（360/4 divs = 90度）。

如果有的话，有六个孩子的div;

 360/6 = 60 degrees 

所以它们会以60度的间隔均匀分布。

---

我也会在它们之间添加animation，所以为什么我一直在玩旋转等等，但我似乎无法理解它：

我目前的样本是：

 $(".wrap").hover(function(){ var x =$(this).children().length; //Counts '.circles' var degree = 360 / x; //Gets angle var percent = 100 / x; var curPercent = percent; $(this).children().each(function (index) { $(this).css("transform","rotate(" + degree*index + "deg)"); $(this).css("top",percent + "px"); $(this).css("left",percent + "px"); percent = percent + curPercent; }); }); 

 .wrap{ height: 300px; width: 300px; background: red; position: relative; transform-origin: center center; transition: all 0.8s; } .wrap:hover .circle{ top: 0; left: 0; } .circle{ transition: all 0.8s; position: absolute; height: 50px; width: 50px; top: calc(50% - 25px); left: calc(50% - 25px); background: tomato; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrap"> <div class="circle">1</div> <div class="circle">2</div> <div class="circle">3</div> <div class="circle">4</div> </div> 

小提琴

---

会有人：

• （一）：知道如何让div旋转指定的angular度或距离相关的jQuery代码中指定的父？

• （二）：获取“animation”重置hover？

• （C）： 有什么想法我在说什么？

---

类似的实现（虽然不是确切的）：

• 这里
• 这更是如此 – 但这使用Sass （不想要）

Answer 1

使用不同的方法，你会得到一个稍微不同的效果。 你可以玩setTimeout和transition来修改行为。

看小提琴

 + function() { var to; $(".wrap").on('mouseenter', function() { var circles = $(this).children(); var degree = (2 * Math.PI) / circles.length; //calc delta angle var transforms = []; // Calculate the position for each circle circles.each(function(index) { var x = 100 * Math.cos(-0.5 * Math.PI + degree * (-1 * index - 0.5)); var y = 100 * Math.sin(-0.5 * Math.PI + degree * (-1 * index - 0.5)); transforms.push('translate(' + x + 'px,' + y + 'px)'); }); // Function to moves all the circles // We'll pop a circle each time and than call this function recursively function moveCircles() { var transform = transforms.shift(); circles.css('transform', transform); circles.splice(0, 1); if (circles.length) to = setTimeout(moveCircles, 400); } moveCircles(); }); $(".wrap").on('mouseleave', function() { var circles = $(this).children().css('transform', ''); clearTimeout(to); }); }(); 

  .wrap { height: 300px; width: 300px; background: red; position: relative; transform-origin: center center; transition: all 0.8s; } .circle { transition: all 0.8s; position: absolute; height: 50px; width: 50px; text-align: center; line-height: 50px; top: calc(50% - 25px); left: calc(50% - 25px); background: tomato; border-radius: 50%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrap"> <div class="circle">1</div> <div class="circle">2</div> <div class="circle">3</div> <div class="circle">4</div> <div class="circle">5</div> <div class="circle">6</div> </div> 

Answer 2

 function rotateStep($this, $circle, angle) { $this.animate({ rotation: angle }, { step: function(now, fx) { $this.css({ transform: 'rotate(' + now + 'deg)' }); $circle.css({ transform: 'translate(-50%, -50%) rotate(' + -now + 'deg)' }); } }); } $('.wrap').hover(function() { var $this = $(this), $circleWrappers = $this.find('.circleWrapper'), angleOffset = 360 / $circleWrappers.length, angle = - angleOffset / 2, distance = Math.min($this.width(), $this.height()) / 2; $circleWrappers.each(function() { var $this = $(this), $circle = $(this).find('.circle'); $circle.animate({ top: -distance }); rotateStep($this, $circle, angle); angle -= angleOffset; }); }, function() { var $this = $(this), $circleWrappers = $this.find('.circleWrapper'); $circleWrappers.each(function() { var $this = $(this), $circle = $(this).find('.circle'); $circle.animate({ top: 0 }); rotateStep($this, $circle, 0); }); }); 

 .wrap { position: relative; background-color: #cccccc; width: 400px; height: 400px; transition:all 0.8s; transform-origin: center center; } .circleWrapper { display: inline-block; position: absolute; left: 50%; top: 50%; } .circle { position: absolute; width: 80px; height: 80px; border-radius: 40px; background-color: white; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5); line-height: 80px; text-align: center; font-family: arial; font-size: 42px; font-weight: bold; transform: translate(-50%, -50%); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrap"> <div class="circleWrapper"><div class="circle">1</div></div> <div class="circleWrapper"><div class="circle">2</div></div> <div class="circleWrapper"><div class="circle">3</div></div> <div class="circleWrapper"><div class="circle">4</div></div> </div>