基于css选择器设计交互效果，在实际的应用

下面看看这些选择器是如何应用的：

一、active

对于:active
这个选择器，MDN上是这样定义的：

:active

CSS伪类匹配被用户激活的元素。它让页面能在浏览器监测到激活时给出反馈。当用鼠标交互时，它代表的是用户按下按键和松开按键之间的时间。

现在我们知道了，通过这个属性，可以获得一个元素上，鼠标左键按下／松开两个状态

button { /* 鼠标松开 */}button:active { /* 鼠标按下 */} 那么，拿到了这个状态后，你就不想做点什么吗？

应用场景

简单应用

最简单的应用呢，就是在Button按下时改变一些样式，在视觉上给用户一些反馈，比如这样

button { background-color: rgb(77, 181, 255, 0);
}button:active { background-color: rgb(77, 181, 255, 1); color: #fff;
}

如果觉得动画太生硬，还可以使用 transition 来过渡，使动画看起来更加‘顺滑’

效果如下：

变颜色这种最基础的操作，肯定是无法满足大家滴，我们可以玩的花一点，比如给他定义一个animation

button:active { animation: shake 0.1s ease infinite;
}

效果如图（依旧是录制帧数过低）:

再多想一下

以上的两个例子，都是在两个状态之间切换，说白了只是改个样式，并没有很强的交互性，我们就只能做到这种程度吗？

二、emmmmm.....??

在等外卖的无聊时间里，我骚动不已的心终于蹦出来了一个想法！我们可以自己定义动画，就意味着多掌握了一项关键属性，那就是时间，现在我有了按下、松开和时间三个要素，我可以做一个计时的操作啊

效果没有，图片太大了，下面有源码~~

这个demo做的呢，是在按钮被按住2s后发起一个操作，不到2s松开就会取消

这里光用css肯定不行的啦，我加了一点点js进来，这里用到了animationend这个事件

document.getElementById('ring').addEventListener('animationend', function () { alert('结束啦')
}, false)

对的，只是用js写的alert，动画部分还是纯css实现的，代码有点长，就不放这里了，有兴趣的同学可以戳‘阅读原文’自取, 这里只谈一下思路

注意事项

1.active和:hover这两个状态会同时活动，所以如果你在同一个元素上定义了这两个状态的话，请注意一下css的书写顺序

2.在button元素上，:active生效的同时，会出发:focus状态，需要先重置浏览器的默认:focus样式

三、checked

TODO

1. 简单应用 => 开灯／关灯效果

2. 深入联想 => 评分组件

+ 和 ~ 这两个选择器

TODO

上面的例子中都用用到，简单介绍下概念就好了，主要用来扩大css选择器的控制范围，实现更复杂的效果