前言

今天看到某网站上有关于“用js实现图片的缓慢伸展”和“图片缩放”的课程，不禁心血来潮，想要写篇文章，也算是纪念一下曾经被难倒的问题吧。

先来说一下

用js实现图片缓慢缩放效果

在我设计的某网页中，有这样一串代码：
HTML

<div class="bb1">
    <img src="./xc/img/t01b610a3fe936675f8.jpg" width="200" height="110">
</div>
<div class="bb2">
    <img src="./xc/img/QQ图片20190508133048.jpg" width="100" height="95">
</div>
<div class="bb4">
    <img src="./xc/img/QQ图片20190508133039.jpg" width="100" height="110">
</div>
<div class="bb5">
    <img src="./xc/img/160742ztopgvore162mrm5.jpg" width="100" height="110">
</div>
<div class="bb6">
</div>1234567891011121314

最后一个bb6从后面代码可以看出，这是没有相关特效的div，故将其图片放在了css中。
（图片的两种引入方式：1.HTML中 <img src="图片路径"> 和 2.css中 background:url("图片路径");）
css

.bb1{
            float: right;
            width: 200px;
            height: 110px;
            margin-top: 80px;
            margin-right: 40px;
            -webkit-transition: transform .30s linear;
            -moz-transition: transform .30s linear;
            -o-transition: transform .30s linear;
            transition: transform .30s linear;
        }
        .bb1:hover{
            transform:rotate(360deg);
        }
        .bb1 img{
            clip-path: circle(40% at 50% 50%);
            -webkit-clip-path:circle(40% at 50% 50%);
            transition: all 400ms ease;
            cursor: pointer;
        }
        .bb1 img:hover{
            clip-path: circle(75% at 50% 50%);
            -webkit-clip-path:circle(75% at 50% 50%);
        }
        .bb2{
            float: right;
            width: 110px;
            height: 99px;
            margin-top: 220px;
            margin-right: -280px;
            -webkit-transition: transform .25s linear;
            -moz-transition: transform .25s linear;
            -o-transition: transform .25s linear;
            transition: transform .25s linear;

        }
        .bb2:hover{
            transform:rotate(360deg);
        }
        .bb2 img{
            clip-path: circle(40% at 50% 50%);
            -webkit-clip-path:circle(40% at 50% 50%);
            transition: all 400ms ease;
            cursor: pointer;
        }
        .bb2 img:hover{
            clip-path: circle(75% at 50% 50%);
            -webkit-clip-path:circle(75% at 50% 50%);
        }
        .bb4{
            float: right;
            width: 100px;
            height: 100px;
            margin-top: 420px;
            margin-right: -335px;
            -webkit-transition: transform .25s linear;
            -moz-transition: transform .25s linear;
            -o-transition: transform .25s linear;
            transition: transform .25s linear;
        }
        .bb4:hover{
            transform:rotate(360deg);
        }
        .bb4 img{
            clip-path: circle(40% at 50% 50%);
            -webkit-clip-path:circle(40% at 50% 50%);
            transition: all 400ms ease;
            cursor: pointer;
        }
        .bb4 img:hover{
            clip-path: circle(75% at 50% 50%);
            -webkit-clip-path:circle(75% at 50% 50%);
        }
        .bb5{
            float: right;
            width: 100px;
            height: 100px;
            margin-top: 0;
            margin-right: 160px;
            -webkit-transition: transform .25s linear;
            -moz-transition: transform .25s linear;
            -o-transition: transform .25s linear;
            transition: transform .25s linear;
        }
        .bb5:hover{
            transform:rotate(360deg);
        }
        .bb5 img{
            clip-path: circle(40% at 50% 50%);
            -webkit-clip-path:circle(40% at 50% 50%);
            transition: all 400ms ease;
            cursor: pointer;
        }
        .bb5 img:hover{
            clip-path: circle(75% at 50% 50%);
            -webkit-clip-path:circle(75% at 50% 50%);
        }
        .bb6{
            float: left;
            width: 386px;
            height: 200px;
            margin-top: 300px;
            margin-left: 5px;
            background: url("../xc/img/qiuzhen.png") no-repeat;
            background-size: 386px 200px;
            -webkit-transition: transform .25s linear;
            -moz-transition: transform .25s linear;
            -o-transition: transform .25s linear;
            transition: transform .25s linear;
        }
        .bb6:hover{
            transform:rotate(360deg);
        }123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113

来，让我们细细‘品味’一下这串css代码：
那其他代码有什么用？
我们取bb5为例：

 .bb5 img{
            clip-path: circle(40% at 50% 50%);
            -webkit-clip-path:circle(40% at 50% 50%);
            transition: all 400ms ease;
            cursor: pointer;
        }
        .bb5 img:hover{
            clip-path: circle(75% at 50% 50%);
            -webkit-clip-path:circle(75% at 50% 50%);
        }12345678910

取div中的图片属性
让它缩小成一个圆，在鼠标悬停其上时，舒展开来，过程消耗400ms。

其次，最明显的某过于“:hover”了，这是鼠标样式的一种状态——当鼠标滑过（或说：悬浮）某区域时。。。

鼠标指向的四种状态（以a链接为例）

a:link {}： 未被访问的链接
a:visited {}：已被访问的链接
a:hover {} ：鼠标指针移动到链接上
a:active {}：正在被点击的链接

而我们比如bb1，其实就代表了以上四种状态，下面的bb1:hover意为“属性覆盖”。
我们发现，每个div属性中，都有这四行代码：

		 -webkit-transition: transform .30s linear;
            -moz-transition: transform .30s linear;
            -o-transition: transform .30s linear;
            transition: transform .30s linear;1234

这是延缓图片动作的代码（好像还包括了浏览器的兼容问题）
配合每个下面的:hover

transform:rotate(360deg);1

这就是让图片在鼠标悬停上面时旋转一圈，鼠标移出时恢复的完整代码。

怎么说呢，这也算是“通用代码”了吧，其实如果不加啥其他特效的话，记着就行，但还是建议至少将其中的属性值弄明白。。。

作者：行舟客

链接：https://blog.csdn.net/qq_43624878/article/details/90291898

来源：CSDN
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。