手把手教你如何用纯CSS3来模拟元素点击（按下，弹起，悬浮）动画 - 好文

如何用纯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:
moves1s; } @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:
moves1s; animation-fill-mode : forwards; } @keyframes moves{ 0%{} 100%{color:
red;font-size:40px;} } .test:active{ color: yellow; } </style>

ps(毕竟a是亲儿子，所以自带的link（未被访问）,active（正在激活ing）,visited(激活完毕)的选择属性，也能满足点击事件的模拟)

当然，我本身的css就不咋地。。。如果大佬有什么更好的方法，欢迎给建议，目标就是每天积累一小点，总有一天熬出头┗|｀O′|┛ 嗷~~

热门工具换一换