网页开发 —— 图片放大动画效果

今日一言:
我们之所以努力,不是为了改变世界,
而是为了不让世界改变我们。

网页开发 —— 图片放大动画效果

鼠标移过去图片会自动放大的动画。


HTML + CSS

需要自备一个和html文件同目录下的img文件夹,并且在里面要放一张名为"1.jpeg"的图片

<!DOCTYPE html>
<html>
<head>
    <title>图片放大</title>
</head>
<style type="text/css">
    body{
        padding0;
        margin0;
    }
    .content{
        position: absolute;
        width640px;
        height: auto;
        left50%;
        top50%;
        margin-left: -320px;
        margin-top: -25vh;
        overflow: hidden;
    }
    img{
        width640px;
        height: auto;
        transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    img:hover{
        transformscale(1.6);
    }
</style>
<body>
<div class="content">
    <img src="./img/1.jpeg">
</div>
</body>
</html>
原文地址:https://www.cnblogs.com/rcklos/p/12989517.html