学习探索-波浪

最新推荐文章于 2024-07-11 22:58:04 发布

miao_zz

最新推荐文章于 2024-07-11 22:58:04 发布

阅读量71

点赞数

分类专栏： css 文章标签：学习 css css3

本文链接：https://blog.csdn.net/qq_37117408/article/details/125933474

版权

css 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

波浪

- 效果示例图
- 代码示例

效果示例图

在这里插入图片描述

代码示例

<!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;
					/* 给图像应用色相旋转。 */
					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>