核心代码
// 核心代码
ul li:nth-child(num)
{ transform: rotate((num - 1) * 90deg / (totalNum - 1)) translateX(180px);}
// 让每个子元素都旋转并且移动
实例:
// 默认样式
.tool-item
{
width: 50px;
height: 50px;
position: absolute;
background: red;
border-radius: 50%;
transition: opacity .3s linear, transform .3s;
}
body:hover {
ul li:nth-child(1) { transform: rotate((1 - 1) * 90deg / (5- 1)) translateX(180px); }
ul li:nth-child(2) { transform: rotate((2 - 1) * 90deg / (5- 1)) translateX(180px); }
ul li:nth-child(3) { transform: rotate((3 - 1) * 90deg / (5- 1)) translateX(180px); }
ul li:nth-child(4) { transform: rotate((4 - 1) * 90deg / (5- 1)) translateX(180px); }
ul li:nth-child(5) { transform: rotate((5 - 1) * 90deg / (5- 1)) translateX(180px); }}
