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

CSDN个人博客 ：
https://blog.csdn.net/weixin_44538667/article/details/86515309
CSDN专业技术论坛
https://bbs.csdn.net/topics/392511664
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伪类设置宽高而实现的动画效果，如下截图：

这样当鼠标移上去时图片就会缩小到我用hover伪类设置的宽高，然后把下面隐藏的文字显示出来，这样就显得比较美观。其实现代码如下：
.cont img{
transition:all 0.3s;
}
.cont:hover img{
width:100px;
height:100px;
}
这样就能实现比较美观的动画效果了，不过在使用hover伪类时也要注意一些小的细节哦，比如我就被一个小的细节问题困扰了好久，如下图：

在使用hover时前面不能有空格，如果出现空格，它就会失效，而且不会报错，而有些其它的出现空格就会报错，如下：