如果只是实现一个无限循环的轮播动画,只需要animation即可。如果还需要切换按钮,就要找到CSS中带有“选中状态”的特性,让某个元素被点击时,触发另一个元素进入“选中状态”。CSS中有两个特性可以实现这一点:
:target
选择器。URL带有锚信息的时候,该选择器会匹配锚信息中ID对应的元素,所以,我们可以在页面中用超链接代替按钮,链接指向#name
,点击链接的时候,ID为name的元素就会应用#name:target
设置的样式。:checked
选择器。需要input
与label
配合,用for
将label
和input
关联起来,点击label
会激活对应的input
。
CSS中没有父元素选择器,所以要让被点击激活的元素与轮播动画所在的元素成兄弟关系。