body {
	margin:0;
	padding:0;
	background-color:#333;
}
.container {
	width:500px;
	height:500px;
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
}
.container .center {
	width:100px;
	height:100px;
	border-radius:50%;
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	background-color:#eee;
	overflow:hidden;
}
.container .center img {
	width:100%;
	height:100%;
}
.container .cir {
	width:100px;
	height:100px;
	border:1px solid #eee;
	border-radius:50%;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}
.container .cir.active {
	animation:cirAni 2s linear infinite;
}
@keyframes cirAni {
	0% {
	width:100px;
	height:100px;
	border:1px solid #eee;
}
100% {
	width:500px;
	height:500px;
	border:1px solid #333;
}
}