如何用纯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(激活完毕)的选择属性,也能满足点击事件的模拟)