css3 圆形渐变扩张效果缩略图
<div id="kefu" class="kefu-link">
	<a href="#" class="robot-link">
		<img src="images/customer@2x.png" >
		<div class="eye-top"></div>
		<div class="eye-bottom"></div>
	</a>
</div>

.kefu-link:after, 
.kefu-link:before {
    content: "";
    position: absolute;
    width: 60px;
    height: 60px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    border: 1px solid #e1edff;
	background: #7f9ef8;
	filter: blur(1px);
    border-radius: 50%;
    z-index: 3;
}
.kefu-link:after {
    -webkit-animation: outter 2s linear 1s infinite;
    animation: outter 2s linear 1s infinite;
}
.kefu-link:before {
    -webkit-animation: inner 2s linear 2s infinite;
    animation: inner 2s linear 2s infinite;
}

By lxcss

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注