Css 单击可将圆形背景从一个元素切换或移动到另一个元素

每当我单击任何列表图标时，我想将颜色从一个列表动画到另一个列表，如下图所示

.days cal li{
颜色：#d5d1e6；
高度：36px；
宽度：36px；
显示：内联块；
边界半径：19px；
利润率：0.5px；
填充顶部：06px；
-webkit过渡：0.5s线性；
-moz转变：0.5s线性；
-o过渡：0.5s线性；
过渡：0.5s线性；
}
.天cal li.活动{
背景：#4B916C；
文本对齐：居中；
边际：0px0；
填充顶部：6px；
}

Sun
Mon
Tue
Wed
Thu
Fri
Sat

使用虚拟元素和转换：

实现这一点的一种方法是在

ul.days cal

中使用虚拟元素，该元素创建圆，然后根据单击的元素的索引对其进行转换（使用CSS转换）

$（'li'）。在（'click'，function（）上{
var translateX=（$（this）.index（））*46；/*宽度+2*边距*/
$（'ul.days-cal.circle'）.css（'transform'，'translateX（'+translateX+'px'））；
});
.days cal li{
颜色：#d5d1e6；
高度：36px；
宽度：36px；
浮动：左；
线高：36px；
利润率：0.5px；
填充顶部：6px；
过渡：0.5s线性；
文本对齐：居中；
}
.天卡尔{
位置：相对位置；
填充：0；
列表样式：无；
}
.days cal li.circle{
位置：绝对位置；
内容：''；
高度：36px；
宽度：36px；
顶部：6px；
左：0px；
填充：0px；
利润率：0px 5px；
背景：#4B916C；
边界半径：50%；
z指数：-1；
}


太阳
周一
星期二
结婚
周四
星期五
坐


下面是一个片段，展示CSS是如何做到这一点的。我在这里使用tabindex，但我也可以使用form元素来模拟当您单击项目时ng类缺少的函数所做的任何操作（猜不到它，但等待您更新问题，以便我可以更新answser:）

CSS部分是第n个子项（x）

和选择器

~

，因此您可以更新由最后一个项生成的伪项的坐标

///您的函数丢失了，所以我不会将代码段链接到任何库///
//在CSS部分，将：focus的出现替换为.active/

.item{
字体大小：16px；
背景：rgba（255255,0.1）；
溢出：隐藏；
位置：相对位置；
边缘：1米；
}
李先生{
颜色：#d5d1e6；
文本对齐：居中；
线高：36px；
高度：36px；
宽度：36px；
显示：内联块；
边界半径：19px；
利润率：0.5px；
}
/*将：焦点的发生替换为。活动*/
.天cal li:第n个孩子（7）：焦点：之前{
左：345px；
}
.days cal li:第n个孩子（6）：焦点~li:类型的最后一个：之前{
左：295px；
}
.天cal li:第n个孩子（5）：焦点~li:类型的最后一个：之前{
左：245px；
}
.days cal li:第n个孩子（4）：焦点~li:类型的最后一个：之前{
左：195px；
}
.days cal li:第n个孩子（3）：焦点~li:类型的最后一个：之前{
左：145px；
}
.days cal li:第n个孩子（2）：焦点~li:类型的最后一个：之前{
左：95px；
}
.days cal li:第n个孩子（1）：焦点~li:类型的最后一个：之前{
左：45像素；
}
李：最后一种类型：before{
内容：''；
高度：36px；
宽度：36px；
显示：内联块；
背景：#4B916C；
位置：绝对位置；
左：-50px；
过渡：左0.5s；
z指数：-1；
边界半径：50%；
}
李：焦点{
动画：滴0.5s
}
@关键帧点滴{
0 , 50%{
长方体阴影：0.0 rgba（0,0,0,0.5），插入0.0 rgba（255255,0.3），插入0.0 rgba（0,0,0,0.5），插入0.0 rgba（255255255,0.3），插入0.0 rgba（0,0,0,0.5）；
}
20% {
盒影：0.0 3px rgba（0,0,0,0.5），嵌入0.0 3px rgba（255255255,0.3），嵌入0.0 3px 3px rgba（0,0,0,0.5），嵌入0.0 2px 9px rgba（255255255,0.3），嵌入0.2px 11px rgba（0,0,0,0.5）；
}
}
身体{
背景：352B58；
}

Sun
Mon
Tue
Wed
Thu
Fri
Sat

您是否尝试创建结构/布局或至少创建一个圆？你能告诉我们你试过什么吗？是的，我已经添加了一个天数列表代码，csscan你也可以分享你的函数，看看你是如何使用ng类的。那么我们看看你是如何管理它的，并最终得到一个可用选择器的线索？看起来你也需要有棱角的部分…@哈利，好吧，在我看来这是它的一部分：）如何处理安古拉我不知道安古拉，因为我从来没有用过它@Mohammadhaban。我的建议是，你接受这个答案（如果有帮助的话），并为AngularJS集成提出一个单独的问题，因为这不是你最初问题的一部分。顺便说一下，答案非常好。把它做完