LOGO镜面反光动效-CSS3

2020-09-10 736 阅读1分钟
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.logo-site {
				overflow: hidden;
				transition-duration: .5s;
				width: 200px;
				height: 60px;
				background: #eeeeee;
				text-align: center;
				vertical-align: middle;
			}

			.logo-site:before {
				content: "";
				position: absolute;
				left: -665px;
				top: -460px;
				width: 250px;
				height: 15px;
				background-color: rgba(255, 255, 255, .5);
				-webkit-transform: rotate(-45deg);
				-moz-transform: rotate(-45deg);
				-ms-transform: rotate(-45deg);
				transform: rotate(-45deg);
				-webkit-animation: searchLights 1s ease-in 1s infinite;
				animation: searchLights 1s ease-in 1s infinite
			}

			@-webkit-keyframes searchLights {
				0% {
					left: -100px;
					top: 0
				}

				to {
					left: 120px;
					top: 100px
				}
			}

			@-moz-keyframes searchLights {
				0% {
					left: -100px;
					top: 0
				}

				to {
					left: 120px;
					top: 100px
				}
			}

			@keyframes searchLights {
				0% {
					left: -100px;
					top: 0
				}

				to {
					left: 120px;
					top: 100px
				}
			}
		</style>
	</head>
	<body>
		<div class="logo-site">
			<p>LOGO</p>
		</div>
	</body>
</html>