码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2020-05-29 21:24:05      阅读:95      评论:0      收藏:0      [点我收藏+]

标签:tle   block   body   cto   import   shadow   ima   XML   imp   

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

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

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


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>

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

标签:tle   block   body   cto   import   shadow   ima   XML   imp   

原文地址:https://www.cnblogs.com/rcklos/p/12989517.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!