当前位置：网站首页>Learning exploration - waves

Learning exploration - waves

2022-07-25 23:24:00 【miao_ zz】

The waves

- Effect example picture
- Code example

Effect example picture

Insert picture description here

Code example

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				padding: 0px;
				margin: 0px;
				box-sizing: border-box;
			}

			body {
				height: 100vh;
				background-color: #000;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.battery {
				width: 200px;
				height: 320px;
				background-color: #fff;
				border-radius: 10px 10px 5px 5px;
				position: relative;
			}

			.battery::before {
				content: "";
				width: 50px;
				height: 20px;
				background-color: #fff;
				position: absolute;
				top: -20px;
				left: 50%;
				transform: translateX(-50%);
				border-radius: 5px 5px 0px 0px;
			}

			.battery::after {
				content: "";
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0px;
				top: 90%;
				border-radius: 10px 10px 5px 5px;
				background: linear-gradient(to bottom, #04e963 0%, #0bdf9f 44%);
				animation: change 10s linear infinite;
			}

			@keyframes change {
				0% {
					top: 100%;
					border-radius: 0px 0px 5px 5px;
					/*  Apply color rotation to the image . */
					filter: hue-rotate(90deg);
				}

				95% {
					top: 5%;
					border-radius: 0px 0px 5px 5px;
				}

				100% {
					top: 0%;
					filter: hue-rotate(0deg);
				}
			}

			.cover {
				width: 100%;
				height: 100%;
				border-radius: 10px 10px 5px 5px;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 1;
				overflow: hidden;
			}

			.cover::before {
				content: "";
				width: 400px;
				height: 400px;
				background: rgba(255, 255, 255, 0.8);
				position: absolute;
				border-radius: 40% 30%;
				left: -50%;
				animation: coverBefore 10s linear infinite;
			}

			.cover::after {
				content: "";
				width: 400px;
				height: 400px;
				background: rgba(255, 255, 255, 0.6);
				position: absolute;
				border-radius: 42% 40%;
				left: -50%;
				animation: coverAfter 10s linear infinite;
			}

			@keyframes coverBefore {
				0% {
					transform: rotate(0deg);
					bottom: 0%;
				}

				100% {
					transform: rotate(360deg);
					bottom: 100%;
				}
			}

			@keyframes coverAfter {
				0% {
					transform: rotate(30deg);
					bottom: 2%;
				}

				100% {
					transform: rotate(360deg);
					bottom: 95%;
				}
			}
		</style>
	</head>
	<body>
		<div class="battery">
			<div class="cover"></div>
		</div>
	</body>
</html>

原网站

版权声明
本文为[miao_ zz]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/206/202207252314591836.html