.content{
width: 200px;
height:200px;
margin:0 auto;
margin-bottom:25px;
}
.content img{
 width:100%;
 height:100%;
}
.content-inner{
width:117px;
margin:0 auto;
}
.img { display:block; position: relative; }
.img:before { content: ""; position: absolute; width:200px; height: 100%; top: 0; left: -150px; overflow: hidden;
background: -moz-linear-gradient(left, rgba(255,255,255,0)0, rgba(255,255,255,.2)50%, rgba(255,255,255,0)100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255,255,255,0)), color-stop(50%, rgba(255,255,255,.2)), color-stop(100%, rgba(255,255,255,0)));
background: -webkit-linear-gradient(left, rgba(255,255,255,0)0, rgba(255,255,255,.2)50%, rgba(255,255,255,0)100%);
background: -o-linear-gradient(left, rgba(255,255,255,0)0, rgba(255,255,255,.2)50%, rgba(255,255,255,0)100%);
-webkit-transform: skewX(-25deg);
-moz-transform: skewX(-25deg)
}
.img:hover:before { left: 150%; transition: left 1s ease 0s; }
.circle{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-block;
    
    color:#fff;
    line-height:30px;
box-shadow: 0 0 10px gray;
}
#circle-one{
    background-color: rebeccapurple;
    margin-right: 10px;
}

.circle:hover{
border-radius: 50%;
box-shadow: 0 0 10px rgba(0,0,0,.3) inset;
-webkit-animation-name:'ripple';/*动画属性名，也就是我们前面keyframes定义的动画名*/
-webkit-animation-duration: 2s;/*动画持续时间*/
-webkit-animation-timing-function: ease; /*动画频率，和transition-timing-function是一样的*/
-webkit-animation-delay: 0s;/*动画延迟时间*/
-webkit-animation-iteration-count: infinite;/*定义循环资料，infinite为无限次*/
-webkit-animation-direction: alternate;/*定义动画方式*/
}
#circle-two{
    background-color: #ffa500;
}
#circle-three{
    background-color:aquamarine;
    margin-left: 10px;
}
@keyframes ripple {
0% {
 
opacity:0.35;
}
100% {
 
opacity: 0.2;
}
}