实例展示：用css实现网页图片特效

前言

今天看到某网站上有关于“用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>      

最后一个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);
        }      

来，让我们细细‘品味’一下这串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%);
        }      

取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;      

这是延缓图片动作的代码（好像还包括了浏览器的兼容问题）

配合每个下面的:hover

transform:rotate(360deg);