css - 实现镜头拉近效果

Posted 2022-05-26 wx628dd70197058

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css - 实现镜头拉近效果相关的知识，希望对你有一定的参考价值。

文章目录

css - 实现镜头拉近效果

1、代码实现
2、效果
3、说明

css - 实现镜头拉近效果

1、代码实现


<html lang="zh-cn">
<head>

    <title>title>


    <style>

        div 
            margin-top: 300px;
            margin-left: 300px;
            overflow: hidden;
            width: 490px;
        

        img 
            transition: transform 1.5s;
        

        img:hover 
            -webkit-transform: scale(1.3, 1.3);
            -moz-transform: scale(1.3, 1.3);
            -ms-transform: scale(1.3, 1.3);
            -o-transform: scale(1.3, 1.3);
            transform: scale(1.3, 1.3);
        
    style>
head>
<body>

<div>
    <img src="https://img-blog.csdnimg.cn/20190608145523400.png">
div>


body>
html>