CSS3设置鼠标放在图片上hover的时候会按比例放大的效果

最新推荐文章于 2024-01-27 20:29:14 发布

coodingcc

最新推荐文章于 2024-01-27 20:29:14 发布

阅读量3.6k

点赞数 4

分类专栏：前端文章标签： css3

本文链接：https://blog.csdn.net/cristina_song/article/details/88745382

版权

前端专栏收录该内容

93 篇文章 1 订阅

订阅专栏

transition 过渡属性
transition：css属性名称总时间运动曲线何时开始；

这种效果可以在鼠标单击、点击、获得焦点、或对元素任何改变中触发，并以动画效果改变CSS属性值。
运动曲线属性：

设置鼠标放在图片上hover的时候会按比例放大的效果:图片hover之后等比例放大，鼠标移开又等比例恢复原状，同时带有动画过渡效果，代码如下

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="UTF-8">  
        <title>hover放大效果</title>  
        <style type="text/css">  
            div{  
                width: 900px;  
                height: 600px;  
                border: 1px solid #000;  
                margin: 50px auto;  
                overflow: hidden;  
                border-radius: 5px;
            }  
            div img{  
                cursor: pointer;  
                transition: all 0.5s; /* 所有的属性变化在0.5s的时间段内完成 */
            }  
            div img:hover{  
                transform: scale(1.5); /* 鼠标放到图片上的时候图片按比例放大1.5倍   */
            }  
        </style>  
    </head>  
    <body>  
        <div>  
            <img src="./aaa.png"/>
        </div>  
    </body>  
</html>

coodingcc

关注

4
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
CSS3设置鼠标放在图片上hover的时候会按比例放大的效果

transition 过渡属性transition：css属性名称总时间运动曲线何时开始；这种效果可以在鼠标单击、点击、获得焦点、或对元素任何改变中触发，并以动画效果改变CSS属性值。运动曲线属性：设置鼠标放在图片上hover的时候会按比例放大的效果代码如下<!DOCTYPE html> <html> <head> ...
复制链接

扫一扫

专栏目录