鼠标经过图片缓慢放大缩小代码CSS3

原创 新起点博客  2020-05-21 10:32 
【上云必备】上云仅?102/年

鼠标经过图片缓慢放大缩小代码CSS3,新起点亲身测试可以实现的代码,非常简单好用。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css3图片缓慢放大缩小</title>
    <style>
    .div{
        width: 200px;
        height: 200px;
        margin: 150px auto 0;
    }
/* 如果放大图片的话掩盖住其他内容大家可以在图片外层标签元素设定overflow: hidden */
    .div img{
        transition: all 2s ease 0s;
    }
    /* transition 别放hover里,放到img里,这样移入移出一样缓慢,不然只对hover移上去有缓慢效果 */
    .div img:hover{
/**1.2为放大,1以下是缩小数值大家自己选择**/
        transform: scale(1.2);
        /*transition: all 2s ease-in-out 0s;*/
    }
    </style>
</head>
<body>
 
<div class="div">
    <img src="img.jpg">
</div>
 
</body>
</html>

 

本文地址:https://www.henenseo.com/archives/1965
关注我们:请关注一下我们的微信公众号:扫描二维码新起点博客的公众号,公众号:xinqidian129
版权声明:本文为原创文章,版权归 新起点博客 所有,欢迎分享本文,转载请保留出处!
宝塔服务器面板,一键全能部署及管理,送你3188元礼包,点我领取
【腾讯云】海外1核2G服务器低至2折,半价续费券限量免费领取!

发表评论


表情