body {background:#fafafa;}
.main{width:1000px;margin:0 auto;}
.main ul:after{content:"";display:block;clear:both;}
.main ul{margin-bottom:60px;}
.main ul li{width:300px;float:left;list-style:none;margin:0 auto;border: 1px solid #eee;}
.main ul li h2{font-size:16px;font-weight:normal;line-height:26px;padding-left:10px;color:#888;}

.image{width:50px;height:50px;}

.box{width:50px;height:50px;margin:90px auto;transition: all 0.9s ease;z-index: 1;box-sizing: border-box;position: relative;}

.ripple_a:before {animation: ripple 2s ease-out infinite;border: 1px solid #d8b3b3;border-radius: 50%;top: 0;bottom: 0;left: 0;right: 0;box-sizing: border-box;content: "";position: absolute;opacity: 0;}
.ripple_a:after {animation: ripple 2s 1s ease-out infinite;border: 1px solid #d8b3b3;border-radius: 50%;top: 0;bottom: 0;left: 0;right: 0;box-sizing: border-box;content: "";position: absolute;opacity: 0;}

.ripple_b:hover{ transform: scale(1.15);}
.ripple_b:hover:before {animation: ripple 2s ease-out infinite;border: 1px solid #d8b3b3;border-radius: 50%;top: 0;bottom: 0;left: 0;right: 0;box-sizing: border-box;content: "";position: absolute;opacity: 0;}
.ripple_b:hover:after {animation: ripple 2s 1s ease-out infinite;border: 1px solid #d8b3b3;border-radius: 50%;top: 0;bottom: 0;left: 0;right: 0;box-sizing: border-box;content: "";position: absolute;opacity: 0;}

.ripple_c:hover{ transform: scale(1.15) rotate(180deg);}
.ripple_c:hover:before {animation: ripple 2s ease-out infinite;border: 1px solid #d8b3b3;border-radius: 50%;top: 0;bottom: 0;left: 0;right: 0;box-sizing: border-box;content: "";position: absolute;opacity: 0;}
.ripple_c:hover:after {animation: ripple 2s 1s ease-out infinite;border: 1px solid #d8b3b3;border-radius: 50%;top: 0;bottom: 0;left: 0;right: 0;box-sizing: border-box;content: "";position: absolute;opacity: 0;}

.ripple_d:hover{ transform: scale(1.15) rotate(-180deg);}
.ripple_d:hover:before {animation: ripple 2s ease-out infinite;border: 1px solid #d8b3b3;border-radius: 50%;top: 0;bottom: 0;left: 0;right: 0;box-sizing: border-box;content: "";position: absolute;opacity: 0;}
.ripple_d:hover:after {animation: ripple 2s 1s ease-out infinite;border: 1px solid #d8b3b3;border-radius: 50%;top: 0;bottom: 0;left: 0;right: 0;box-sizing: border-box;content: "";position: absolute;opacity: 0;}

.ripple_e:hover{ transform: rotateX(180deg);}
.ripple_e:hover:before {animation: ripple 2s ease-out infinite;border: 1px solid #d8b3b3;border-radius: 50%;top: 0;bottom: 0;left: 0;right: 0;box-sizing: border-box;content: "";position: absolute;opacity: 0;}
.ripple_e:hover:after {animation: ripple 2s 1s ease-out infinite;border: 1px solid #d8b3b3;border-radius: 50%;top: 0;bottom: 0;left: 0;right: 0;box-sizing: border-box;content: "";position: absolute;opacity: 0;}

.ripple_f:hover{ transform: rotateY(180deg);}
.ripple_f:hover:before {animation: ripple 2s ease-out infinite;border: 1px solid #d8b3b3;border-radius: 50%;top: 0;bottom: 0;left: 0;right: 0;box-sizing: border-box;content: "";position: absolute;opacity: 0;}
.ripple_f:hover:after {animation: ripple 2s 1s ease-out infinite;border: 1px solid #d8b3b3;border-radius: 50%;top: 0;bottom: 0;left: 0;right: 0;box-sizing: border-box;content: "";position: absolute;opacity: 0;}

@keyframes ripple {
	 0% {
		transform: scale(1.3);
		opacity: 0.4;
	}
	25% {
		transform: scale(1.8);
		opacity: 0.3;
	}
	50% {
		transform: scale(2.3);
		opacity: 0.2;
	}
	75% {
		transform: scale(2.8);
		opacity: 0.1;
	}
	100% {
		transform: scale(3.3);
		opacity: 0;
	}
}