hover伪类实现动画效果及使用注意事项

hover伪类实现动画效果及使用注意事项

开发工具与关键技术：DW，hover伪类的使用

作者：易金亮

撰写时间：2019.01.16

在网页制作过程中，我们经常会用到hover伪类，下面我就说几种用hover伪类实现的动画效果，首先看一下我在使用hover伪类之前的效果，如下截图：
而当我给它设置hover伪类后，鼠标移上去就会出现缩放的动画效果，其效果如下截图：

这就是通过hover伪类实现的动画效果之一，其实现代码为下

.top ul li{
 transition: all 0.5s;
}
.top ul li:hover{
 transform: scale(0.7);
}

先通过transition属性给它设置动画运动时间，再通过hover实现动画效果，如以上代码所示，当scale值小于1时出现缩小的动画效果，当scale值大于1时则出现放大的动画效果。
当然，也可以直接通过hover伪类给某个元素设置不同于它本身的宽高，例如下面这个效果我就是直接通过hover伪类设置宽高而实现的动画效果，如下截图：