实例展示：用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);

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

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