Jquery 创建CSS'；路径'；悬停

我正在尝试使用（主要）CSS生成一个“漂亮”的CSS菜单，但也有一点：

我的总体想法是：

+------------------------+
|                        |
|                        |
|         +---+          |
|         |   |          |
|         |___|          | <-- 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
+------------------------+

然而，这假定将有四个div子级，因此我尝试在jQuery中生成一种“确定角度/位置”的方法（老实说，这种方法不太管用）

---

类似设计：

---

所以最后，因为有四个div，所以它们与中心的间隔为90度（360/4 div=90度）

如果有，比如说，六个儿童div

360/6 = 60 degrees

因此，它们将以60度的间隔均匀分布

---

我还将在它们之间添加动画，因此我一直在玩旋转等游戏，但我似乎无法掌握它：

我目前的样本是：

$（“.wrap”）.hover（函数（）{
var x=$（this.children（）.length；//计数'.circles'
var degree=360/x；//获取角度
风险值百分比=100/x；
var curPercent=百分比；
$（this）.children（）.each（函数（索引）{
$（this.css（“变换”、“旋转”（+degree*index+deg）”）；
$（this.css（“top”，percent+“px”）；
$（this.css（“左”，百分比+“px”）；
百分比=百分比+百分比；
});
});
.wrap{
高度：300px；
宽度：300px；
背景：红色；
位置：相对位置；
变换原点：中心；
过渡：所有0.8秒；
}
.wrap：悬停。循环{
排名：0；
左：0；
}
.圆圈{
过渡：所有0.8秒；
位置：绝对位置；
高度：50px；
宽度：50px；
顶部：calc（50%-25px）；
左：计算（50%-25px）；
背景：番茄；
}

1.
2.
3.
4.

函数rotateStep（$this，$circle，angle）{
$this.animate({
旋转：角度
}, {
步骤：函数（现在，fx）{
$this.css({
变换：'旋转（'+now+'deg）'
});
$circle.css({
变换：“平移（-50%，-50%）旋转（'+-now+'deg）”
});
}
});
}
$（'.wrap'）.hover（函数（）{
变量$this=$（this），
$circleWrapper=$this.find（'.circleWrapper'），
角度偏移=360/$circleWrappers.length，
角度=-角度偏移/2，
距离=Math.min（$this.width（），$this.height（））/2；
$circleWrappers.each（函数（）{
变量$this=$（this），
$circle=$（this.find（'.circle'）；
$circle.animate（{top:-distance}）；
rotateStep（$this，$circle，angle）；
角度-=角度偏移；
});
}，函数（）{
变量$this=$（this），
$circleWrapper=$this.find（'.circleWrapper'）；
$circleWrappers.each（函数（）{
变量$this=$（this），
$circle=$（this.find（'.circle'）；
$circle.animate（{top:0}）；
rotateStep（$this$circle，0）；
});
});
.wrap{
位置：相对位置；
背景色：#中交；
宽度：400px；
高度：400px；
过渡：所有0.8秒；
变换原点：中心；
}
.圆形振打器{
显示：内联块；
位置：绝对位置；
左：50%；
最高：50%；
}
.圆圈{
位置：绝对位置；
宽度：80px；
高度：80px；
边界半径：40px；
背景色：白色；
盒影：0px 0px 5px rgba（0,0,0,0.5）；
线高：80px；
文本对齐：居中；
字体系列：arial；
字体大小：42px；
字体大小：粗体；
转换：翻译（-50%，-50%）；
}

1.
2.
3.
4.
使用不同的方法，您将获得稍微不同的效果。您可以使用
setTimeout
和
转换时间来修改行为


+函数（）{
var-to；
$（“.wrap”）.on（'mouseenter'，function（）{
var circles=$（this.children（）；
var degree=（2*Math.PI）/circles.length；//计算三角形角度
var转换=[]；
//计算每个圆的位置
圆。每个（函数（索引）{
VarX=100*Math.cos（-0.5*Math.PI+度*（-1*index-0.5））；
变量y=100*Math.sin（-0.5*Math.PI+度*（-1*index-0.5））；
transforms.push（'translate（'+x+'px'，+y+'px'）；
});
//函数来移动所有的圆
//我们将每次弹出一个圆圈，然后递归调用此函数
函数moveCircles（）{
var transform=transforms.shift（）；
css（'transform'，transform）；
圆形拼接（0,1）；
if（circles.length）to=setTimeout（moveCircles，400）；
}
移动圆（）；
});
$（“.wrap”）.on（'mouseleave'，function（）{
var circles=$（this.children（）.css（'transform'，''）；
清除超时（to）；
});
}();
.wrap{
高度：300px；
宽度：300px；
背景：红色；
位置：相对位置；
变换原点：中心；
过渡：所有0.8秒；
}
.圆圈{
过渡：所有0.8秒；
位置：绝对位置；
高度：50px；
宽度：50px；
文本对齐：居中；
线高：50px；
顶部：calc（50%-25px）；
左：计算（50%-25px）；
背景：番茄；
边界半径：50%；
}

1.
2.
3.
4.
5.
6.
你知道@keyframes吗？因为看起来你完全可以用css做你想做的事情…@Pa3k.m:基于子对象数量的偶数度计算？@Pa3k.m:关键帧的唯一问题是它将寻找一个结束位置（在运行jquery之前我不会知道）还有很多前缀需要添加。你能解释一下为什么吗？那句话一点也不清楚，这就是为什么Pa3k.m问这个问题。您希望设置动画的精灵/div的最大和最小数量是多少？何时确定角度？在动画期间、动画之前还是动画之后？div的数量是在什么时候确定的？是在生成HTML的时候，是在加载页面的时候，还是在用户使用它的时候？（如果是最后一次，具体时间是什么时候？）谢谢你，仔细看看
360/6 = 60 degrees