Simple Note

CSS3实现轮播图的思路

2016.03.31

如果只是实现一个无限循环的轮播动画,只需要animation即可。如果还需要切换按钮,就要找到CSS中带有“选中状态”的特性,让某个元素被点击时,触发另一个元素进入“选中状态”。CSS中有两个特性可以实现这一点:

  • :target选择器。URL带有锚信息的时候,该选择器会匹配锚信息中ID对应的元素,所以,我们可以在页面中用超链接代替按钮,链接指向#name,点击链接的时候,ID为name的元素就会应用#name:target设置的样式。
  • :checked选择器。需要inputlabel配合,用forlabelinput关联起来,点击label会激活对应的input

CSS中没有父元素选择器,所以要让被点击激活的元素与轮播动画所在的元素成兄弟关系。

Comments
Write a Comment