CSS

【CSS】CSSで実装されたウォーターエフェクトCSS Water Effect

February 9, 2018

CSS Water EffectはCSSで実装されたウォーターエフェクト。

CSS

.loader{
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%,-50%);
	   -moz-transform: translate(-50%,-50%);
	    -ms-transform: translate(-50%,-50%);
	     -o-transform: translate(-50%,-50%);
	        transform: translate(-50%,-50%);
}

.loader h1{
	margin: 0;
	padding: 0;
	text-transform: uppercase;
	font-size: 10em;
	color: rgba(255,255,255,.1);
	background-image: url(image.png);
	background-repeat: repeat-x;
	-webkit-background-clip: text;
	animation: animate 15s linear infinite;

}

@keyframes animate{
	0%{
		background-position: left 0px top 80px;
	}
	40%{
		background-position: left 800px top -50px;
	}
	80%{
		background-position: left 1800px top -50px;
	}
	100%{
		background-position: left 2400px top 80px;
	}
}

HTML

	<div class="loader">
		<h1>Istiyak</h1>
	</div>