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

最新推荐文章于 2024-04-12 04:59:38 发布

北极光LG

最新推荐文章于 2024-04-12 04:59:38 发布

阅读量1.7k

点赞数 2

文章标签： hover

本文链接：https://blog.csdn.net/weixin_44538667/article/details/86515309

版权

本文介绍了如何利用CSS的hover伪类创建动画效果，包括缩放和改变宽高的过渡动画。同时，强调了在使用hover伪类时需要注意避免前导空格，否则可能导致动画失效。

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

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伪类设置宽高而实现的动画效果，如下截图：