css 动画效果

效果如上图。
html代码:

<a href="javascript:;" class="a a-hover">hover</a><a href="javascript:;" class="a a-hover2">    hover</a><a href="javascript:;" class="a a-hover3">   hover</a>

css代码:

* {  box-sizing: inherit;  -webkit-transition-property: all;  transition-property: all;  -webkit-transition-duration: .6s;          transition-duration: .6s;  -webkit-transition-timing-function: ease;          transition-timing-function: ease;}body{  background: palevioletred;}.a{    color: white;    font-size: 14px;    height: 40px;    display: block;    width: 150px;    line-height: 40px;    text-align: center;    text-decoration: none;    text-transform: uppercase;    margin: 0 auto;    margin-top: 20px;}.a-hover:hover , .a-hover:active{    letter-spacing: 5px;}.a-hover:before ,.a-hover:after{    border: 1px solid rgba(255,255,255,0);    content: "";    display: block;    width: 0;    transition: all 280ms ease-in-out;    margin: 0 auto;}.a-hover:hover:after , .a-hover:hover:before{    border-color: #fff;    -webkit-transition: width 350ms ease-in-out;    width: 70%;}.a-hover2{    position: relative;    border: 1px solid white;    overflow: hidden;}.a-hover2:after{    background: #fff;    content: " ";    height: 155px;    display: block;    position: absolute;    top: -70px;    width: 50px;    z-index: 10;    opacity: .2;    left: -105px;    transform: rotate(45deg);  z-index: -10;  transition: all 550ms ease-in-out;}.a-hover2:hover:after{    left: 200px;    transition: all 550ms ease-in-out;}.a-hover3{    outline: 1px solid rgba(255,255,255,0.5);    text-shadow: none;    border: 0px;}.a-hover3:hover{    border: 1px solid white;    box-shadow:inset 0 0 20px rgba(255,255,255,0.5) , 0 0 20px rgba(0,0,0,.2);    outline: 1px solid rgba(255,255,255,0);    outline-offset: 15px;    text-shadow: 1px 1px 2px #427388;}