<div id="wrap">

	<!-- section -->
	<div class="section">
		<div class="center">

			<div class="block">
				<div class="block__content"></div>
			</div>

		</div>
	</div>
	<!--/section -->

</div>

html,
body {
	margin: 0;
	padding: 0;
	font-family: sans-serif;
	font-size: 16px;
	line-height: 1.4;
	color: #555;
	background: #fff;
}

* {
	box-sizing: border-box;
}

#wrap {
	position: relative;
}

.section {
	padding: 40px;
}

.block {
	width: 300px;
	height: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	position: relative;
	
	&::before {
		content: '';
		display: block;
		position: absolute;
		width: 200%;
		height: 200%;
		top: -50%;
		left: -50%;
		background-image: linear-gradient(to right, #ccc 50%, #000 50%);
		animation: rotate 2s linear infinite;
		
		@keyframes rotate {
			to {
				transform: rotate(360deg);
			}
		}
	}
	
	&::after {
		content: '';
		display: block;
		position: absolute;
		z-index: 1;
		top: 2px;
		right: 2px;
		bottom: 2px;
		left: 2px;
		background: #fff;
	}
	
	&__content {
		position: relative;
		z-index: 2;
		width: 240px;
		height: 140px;
		background: #000;
	}
}