如何用纯CSS3来模拟元素点击动画
可能一开始看到都很不屑……特别是用jquery的人，估计就更加不屑了，不过也是因为比较有趣的事情，所以我才记下来。
那么，首先能够直接解决的是，悬浮动画。毕竟css3自己带了一个：hover的选择器，能够帮我们很快的就做出悬浮的样子。那么，先看看悬浮怎么写的
<div id='test' class='moveclass'>X</div>
<style>
.moveclass{
font-size:30px;
}
.moveclass:hover{
color:blue;
}
</style>
那么，悬浮的问题就解决了，但是点击的问题呢？css3可没有给什么:click，也就给了个选择框的被选中的属性，那我该怎么解决。
左思右想，也参考了下别人的东西。大多数都是用target来解决。那么target是什么东西呢。先去粘贴下定义
定义和用法
URL 带有后面跟有锚名称 #，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。
:target 选择器可用于选取当前活动的目标元素。
当文档内某个元素被指向的时候，这句话改怎么理解呢，也就是，这个页面的url+#id,就是这个元素被指向的时候了。
例如 www.liru.com/yemian#test
而最常见的手段呢，就是用a和它的属性href，但是也知道，a这个超文本，还自带一个下划线，不过也好在，css可以把下划线去掉。所以，我们就只要在套一个指向自己的a标签就可以了，也就安安心心的把小动画写上去。
<a href='#test'><div id='test' class='moveclass'>X</div></a>
<style>
.moveclass{
font-size:30px;
}
.moveclass:hover{
color:blue;
}
.moveclass:target{
animation: moves 1s;
}
@keyframes moves{
0%{}
100%{color:red;font-size:40px;}
}
</style>
写完代码突然发现，他会闪回，哇，那可真是生气。不过，也出现了多种方法来解决这件事情，这里说最容易想到的，就是直接用css3提供的动画定格，来完成。也就是，在css里面多加上 animation-fill-mode : forwards; 来告诉css，最后一帧结束的时候，别给我还原。
到这里，点击事件就这样结束了，可以说撒花了。
不过明显标题上还写了按下和弹起。。。哇。
那么既然用了a标签，那么就不妨接着用下去，毕竟亲儿子a，还是有很多可以用的东西的。就比如，按下事件。
:active 选择器用于选择活动链接。
当您在一个链接上点击时，它就会成为活动的（激活的）。
那这看起来和target有毛区别？哦吼，那没区别的话，怎么会分离出来呢，这个active呢，就很类似与点击的按下事件，所以可以单独的拎出来。
<a href='#test'><div id='test' class='moveclass'>X</div></a>
<style>
.moveclass{
font-size:30px;
}
.moveclass:hover{
color:blue;
}
.moveclass:target{
animation: moves 1s;
animation-fill-mode : forwards;
}
@keyframes moves{
0%{}
100%{color:red;font-size:40px;}
}
.test:active{
color: yellow;
}
</style>
ps(毕竟a是亲儿子，所以自带的link（未被访问）,active（正在激活ing）,visited(激活完毕)的选择属性，也能满足点击事件的模拟)