Pure CSS Water Wave Loading Animation - CSS Wave Effects - No Image or SVG for Wave effects

Hôm nay mình sẽ giới thiệu cho các bạn một hiệu ứng Water Wave Loading Animation đơn giản nhưng không khó để thực hiện được.
<div id="loadding-page">
    <div id="circle">
        <div id="wave"></div>
    </div>
</div>

#loadding-page {
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	height: 50vh;
	background-color: #fff;
	#circle {
		width: 150px;
		height: 150px;
		border:5px solid #fff;
		box-shadow: 0 0 0 5px #4973ff;
		border-radius: 100%;
		overflow: hidden;
	}
	#wave {
		position: relative;
		width: 100%;
		height: 100%;
		background-color: #4973ff;
		border-radius: 100%;
		box-shadow: inset 0 0 50px rgba(0,0,0,.5);
		&:before,&:after {
			content: "";
			position: absolute;
			width: 200%;
			height: 200%;
			top:0;
			left: 50%;
			transform: translate(-50%,-75%);
			background-color: #000;
		}
		&:before {
			border-radius: 45%;
			background:rgba(255,255,255,1);
			animation: wave 5s linear infinite;
		}
		&:after {
			border-radius: 40%;
			background:rgba(255,255,255,.5);
			animation: wave 10s linear infinite;
		}
	}
}
@keyframes wave {
	0% {
		transform: translate(-50%,-75%) rotate(0deg);
	}
	100% {
		transform: translate(-50%,-75%) rotate(360deg);
	}
}

0 thảo luận về Pure CSS Water Wave Loading Animation - CSS Wave Effects - No Image or SVG for Wave effects

comment_blank
Hãy để lại #comment của bạn mình sẽ giải đáp thắc mắc một cách sớm nhất có thể.

Bài viết cùng chuyên mục