顺时针方向的

 

<--HTML代码-->
<div class="button clockwise horizontal"><img src="/uploadfile/2016/1231/20161231052131162.jpg"></div>
<div class="button clockwise vertical"><img src="/uploadfile/2016/1214/20161214015746749.jpg"></div>
<div class="button clockwise both"><img src="/uploadfile/2016/1214/20161214020012572.jpg"><div class="inner"></div></div>

<style type="text/css">
/*CSS代码*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;list-style:none;}
.button {position:relative;display:inline-block;width:200px;height:158px;margin:0 10px 20px 0;text-align:center;background-color:white;overflow:hidden;}
.button:last-child {margin-right:0;}
.button:before,
.button:after {
  display:block;position:absolute;content:"";
  -webkit-transition:-webkit-transform 0.3s;
  transition:-webkit-transform 0.3s;
  transition:transform 0.3s;
  transition:transform 0.3s,-webkit-transform 0.3s;
}
/*水平方向*/
.button.horizontal:before,
.button.horizontal:after {
  left:0;
  width:100%;
  height:3px;
  -webkit-transform:scaleX(0);
          transform:scaleX(0);
}
.button.horizontal:before {top:0;}
.button.horizontal:after {bottom:0;}

.button.horizontal:hover:before,
.button.horizontal:hover:after {
  -webkit-transform:scaleX(1);
          transform:scaleX(1);
}
.button.horizontal.clockwise:before {
  -webkit-transform-origin:right center;
          transform-origin:right center;
}
.button.horizontal.clockwise:after {
  -webkit-transform-origin:left center;
          transform-origin:left center;
}
/*
当鼠标指针移动(指向)到该元素时，改变该元素的伪元素(:before和:after)的变形基准点，使得:before伪元素从左边中间开始变形(伸展/延长)到右边中间，:after伪元素从右边中间开始变形到左边中间，从而形成顺时针方向的变形效果。
*/
.button.horizontal.clockwise:hover:before {
  -webkit-transform-origin:left center;
          transform-origin:left center;
}
.button.horizontal.clockwise:hover:after {
  -webkit-transform-origin:right center;
          transform-origin:right center;
}
/*垂直方向*/
.button.vertical:before,
.button.vertical:after {
  top:0;
  width:3px;
  height:100%;
  -webkit-transform:scaleY(0);
          transform:scaleY(0);
}
.button.vertical:before {left:0;}
.button.vertical:after {right:0;}

.button.vertical:hover:before,
.button.vertical:hover:after {
  -webkit-transform:scaleY(1);
          transform:scaleY(1);
}
.button.vertical.clockwise:before {
  -webkit-transform-origin:top center;
          transform-origin:top center;
}
.button.vertical.clockwise:after {
  -webkit-transform-origin:bottom center;
          transform-origin:bottom center;
}
/*
当鼠标指针移动(指向)到该元素时，改变该元素的伪元素(:before和:after)的变形基准点，使得:before伪元素从底部中间开始变形(伸展/延长)到顶部中间，:after伪元素从顶部中间开始变形到底部中间，从而形成顺时针方向的变形效果。
*/
.button.vertical.clockwise:hover:before {
  -webkit-transform-origin:bottom center;
          transform-origin:bottom center;
}
.button.vertical.clockwise:hover:after {
  -webkit-transform-origin:top center;
          transform-origin:top center;
}
/*四周(水平加垂直)*/
.button.both:before,
.button.both:after {
  left:0;
  width:100%;
  height:3px;
  -webkit-transform:scaleX(0);
          transform:scaleX(0);
}
.button.both:before {top:0;}
.button.both:after {bottom:0;}
.button.both:hover:before,
.button.both:hover:after {
  -webkit-transform:scaleX(1);
          transform:scaleX(1);
}
.button.both.clockwise:before {
  -webkit-transform-origin:right center;
          transform-origin:right center;
}
.button.both.clockwise:after {
  -webkit-transform-origin:left center;
          transform-origin:left center;
}
.button.both.clockwise:hover:before {
  -webkit-transform-origin:left center;
          transform-origin:left center;
}
.button.both.clockwise:hover:after {
  -webkit-transform-origin: right center;
          transform-origin: right center;
}
.button .inner {
  position:absolute;top:0;left:0;
  width:100%;height:100%;
}
.button .inner:before,
.button .inner:after {
  position:absolute;
  content:"";
  display:block;
  -webkit-transition:-webkit-transform 0.3s;
  transition:-webkit-transform 0.3s;
  transition:transform 0.3s;
  transition:transform 0.3s,-webkit-transform 0.3s;
}
.button.both .inner:before,
.button.both .inner:after {
  top:0;
  width:3px;
  height:100%;
  -webkit-transform:scaleY(0);
          transform:scaleY(0);
}
.button.both .inner:before {left:0;}
.button.both .inner:after {right:0;}
.button.both .inner:hover:before,
.button.both .inner:hover:after {
  -webkit-transform:scaleY(1);
          transform:scaleY(1);
}
.button.both.clockwise .inner:before {
  -webkit-transform-origin:top center;
          transform-origin:top center;
}
.button.both.clockwise .inner:after {
  -webkit-transform-origin:bottom center;
          transform-origin:bottom center;
}
.button.both.clockwise:hover .inner:before {
  -webkit-transform-origin:bottom center;
          transform-origin:bottom center;
}
.button.both.clockwise:hover .inner:after {
  -webkit-transform-origin:top center;
          transform-origin:top center;
}
.button:nth-of-type(1):before,
.button:nth-of-type(1):after {background-color:#cc3344;}
.button:nth-of-type(2):before,
.button:nth-of-type(2):after {background-color:#cc3344;}
.button:nth-of-type(3):before,
.button:nth-of-type(3):after,
.button:nth-of-type(3) .inner:before,
.button:nth-of-type(3) .inner:after {background-color:#cc3344;}
</style>