css实现图片放大效果

最新推荐文章于 2024-07-27 23:51:58 发布

5024

最新推荐文章于 2024-07-27 23:51:58 发布

阅读量3.2w

点赞数 13

文章标签： css html

本文链接：https://blog.csdn.net/m0_37771093/article/details/80555865

版权

放大后放大前

css动画效果，感觉transition和transform真的很强大。transform本质上是一系列变形函数。具有很多属性。

transition从效果上看是一种平滑过渡的动画，本质上是在线性时间内将属性从开始值过渡到结束值。涉及到时间。对与transition的讲解点击打开链接对于transform点击打开链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<style>
    img{
        width: 500px;
        overflow: hidden;
        margin: 0 auto;
    }
    #img img{
        width: 100%;
        transition:all 2s;/*图片放大过程的时间*/
        position: relative;
    }
    img:hover{
        cursor: crosshair;
        transform: scale(1.9);  /*以y轴为中心旋转*/
    }
</style>
<body>
<div id="img">
<img src="img/jdt1.jpg" alt=""><!--放图片-->
</div>
</body>
</html>