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

最新推荐文章于 2023-03-06 20:43:56 发布

Lg泪光

最新推荐文章于 2023-03-06 20:43:56 发布

阅读量1.5w

点赞数

文章标签： css3 点击事件

本文链接：https://blog.csdn.net/qq_38604499/article/details/81329207

版权

本文介绍了如何使用CSS3来创建元素的点击动画效果，包括悬浮、点击按下和弹起状态。通过`:hover`、`:target`和`:active`选择器，配合`animation-fill-mode`解决动画闪回问题，实现纯CSS的交互体验。文章鼓励读者分享更好的实现方法，一起学习进步。

摘要由CSDN通过智能技术生成

如何用纯CSS3来模拟元素点击动画

可能一开始看到都很不屑……特别是用jquery的人，估计就更加不屑了，不过也是因为比较有趣的事情，所以我才记下来。
那么，首先能够直接解决的是，悬浮动画。毕竟css3自己带了一个：hover的选择器，能够帮我们很快的就做出悬浮的样子。那么，先看看悬浮怎么写的

<div id='test' class='moveclass'>X</div>
<style>
.moveclass{
    font-size:30px;
}
.moveclass:hover{
    color:blue;
}
</style>

这里写图片描述
那么，悬浮的问题就解决了，但是点击的问题呢？css3可没有给什么:click，也就给了个选择框的被选中的属性，那我该怎么解决。
左思右想，也参考了下别人的东西。大多数都

关注