1 2 3 |
|
简单吧。上面这句CSS声明就为div指定了一个悬停效果。如下就是目前它展现的样子。而你之所以能够看到过渡样式，是因为我们一开始在名为box的类中使用了transition:all 0.25s ease;的声明。看下面，是不是一个还不错的褪色效果：
2.来点颜色看看
指定一个变色过渡其实和褪色过渡的过程异曲同工。首先，创建一个div元素，并为它添加一个名为color的类。
1 2 3 |
|
同样地，我们也要借助:hover选择器来帮我们完成这件事，但是这一次我们不是改变透明度而是背景色：
1 2 3 |
|
如下就是实际效果了：
3.一起摇摆
接下来，来实现一个摆动的效果。这个效果实现起来比前面的两个例子稍显复杂。在这个例子中，我会采用@keyframes来完成。
@keyframes――赋予你在一个CSS动画序列中控制中间步骤的魔力。
首先还是一样，你肯定已经听烦了，创建一个div元素，并未它添加一个名为wiggle的类：
1 2 3 |
|
接下来，我们要做的就是借助@keyframes来创建动画。我们先给动画起个名字，就叫wiggle吧。并在如下的代码中添加抖动效果的实现：
1 2 3 4 5 6 7 |
|
从上面的代码已经可以看出，@keyframes赋予我们将动画分解成单步，并且精确定义每一步发生了什么的能力。通过百分比的方式指定动画的进度：
20%――div相对于初始位置右移4px。
40%――div相对于初始位置左移4px。
60%――div相对于初始位置右移2px。
80%――div相对于初始位置左移1px。
100%――div恢复到初始位置。
现在我们就能借助:hover选择器来展示wiggle的动画了：
1 2 3 4 |
|
我们将animation设置成wiggle。同时希望动画持续1秒的时长，采用ease的动画效果。
最后，就是指定动画在每次鼠标指针悬停的时候触发一次。
下图就是最终的动画效果：
以上就是利用CSS完成一个悬停过渡动画的项目（超级简单）的详细内容，更多文章请关注木庄网络博客！
相关阅读 >>
更多相关阅读请进入《css》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
