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

北极光LG 学生  2019-01-17 09:51:33
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时前面不能有空格,如果出现空格,它就会失效,而且不会报错,而有些其它的出现空格就会报错,如下:


...全文
10 1 收藏 回复
写回复
回复
切换为时间正序
请发表友善的回复…
发表回复

还没有回复,快来抢沙发~

发帖
其他
创建于2009-10-09

222

社区成员

其他产品/厂家
申请成为版主
帖子事件
创建了帖子
2019-01-17 09:51
社区公告
暂无公告