今天看到某网站上有关于“用js实现图片的缓慢伸展”和“图片缩放”的课程，不禁心血来潮，想要写篇文章，也算是纪念一下曾经被难倒的问题吧。
先来说一下
用js实现图片缓慢缩放效果
在我设计的某网页中，有这样一串代码：
HTML
最后一个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为例：
取div中的图片属性
让它缩小成一个圆，在鼠标悬停其上时，舒展开来，过程消耗400ms。
其次，最明显的某过于“:hover”了，这是鼠标样式的一种状态——当鼠标滑过（或说：悬浮）某区域时。。。
鼠标指向的四种状态（以a链接为例）
a:link {}： 未被访问的链接
a:visited {}：已被访问的链接
a:hover {} ：鼠标指针移动到链接上
a:active {}：正在被点击的链接
而我们比如bb1，其实就代表了以上四种状态，下面的bb1:hover意为“属性覆盖”。
我们发现，每个div属性中，都有这四行代码：
这是延缓图片动作的代码（好像还包括了浏览器的兼容问题）
配合每个下面的:hover
这就是让图片在鼠标悬停上面时旋转一圈，鼠标移出时恢复的完整代码。
怎么说呢，这也算是“通用代码”了吧，其实如果不加啥其他特效的话，记着就行，但还是建议至少将其中的属性值弄明白。。。