CSS3 仿京东边框从中间逐渐放大效果

昨天看一个朋友发的京东的效果 然后就自己扒了下来  确实感觉到css3的强大 

话不多说 贴代码

<style>
  #box{
    width: 300px;
    height: 300px;
    transition: all 5s;
    position: relative;


  }
  #box ::before{
    content: "";
    position: absolute;
    bottom: -1px;
    left: -1px;
    right: -1px;
    top: -1px;
    transform:scale(1, 0);
    transition: all 1s;
    border-left: 1px solid red;
    border-right: 1px solid red;
  }


    #box ::after{
    content: "";
    position: absolute;
    bottom: -1px;
    left: -1px;
    right: -1px;
    top: -1px;
    transform:scale(0, 1);
    transition: all 1s;
    border-top: 1px solid red;
    border-bottom: 1px solid red;
    
  }
   #box:hover ::before , #box:hover ::after {
    transform:scale(1);
     transition:all 1s;
   }
</style>
  <div id="box"><p>Hi~ o(*￣▽￣*)ブ</p></div>

主要运用的是css3的transform的scale放大和过度时间transition   当然可以加上透明度opacity的变化 效果更好