纯CSS实现液面流动上涨，水面效果，充电效果

最新推荐文章于 2023-08-18 13:35:54 发布

har01d

最新推荐文章于 2023-08-18 13:35:54 发布

阅读量1.2k

点赞数 1

文章标签： css3 html animation css

本文链接：https://blog.csdn.net/weixin_43951592/article/details/114241040

版权

在这里插入图片描述
直接上图片效果+代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="gb2312" />
		<style>
			html,body {
			    width: 100%;
			    height: 100%;
			    display: flex;
			    background: #ceb68b;
			}
			
			.a {
			    position: relative;
			    width: 540px;
			    margin: auto;
			}		
			.b {
			    position: relative;
			    height: 220px;
			    box-sizing: border-box;
			    border-radius: 15px 15px 5px 5px;
			    box-shadow: 0 0 5px 2px rgba(255, 255, 255, 0.22);
			    background: #fff;
			    z-index: 1;			    			    
			}
			.b::before {
			    content: "";
			    position: absolute;
			    left: 0;
			    right: 0;
			    bottom: 0;
			    top: 80%;
			    background: linear-gradient(to bottom, #7abcff 0%, #00BCD4 44%, #2196F3 100%);
			    border-radius: 0px 0px 5px 5px;
			    box-shadow: 0 14px 28px rgba(33, 150, 243, 0), 0 10px 10px rgba(9, 188, 215, 0.08);
			    animation: charging 10s linear infinite;
			    filter: hue-rotate(90deg);
			}
			.w {
			    position: absolute;
			    top: 0;
			    left: 0;
			    height: 220px;
			    width: 540px;
			    border-radius: 15px 15px 5px 5px;
			    overflow: hidden;
			}
			
			.wave {
			    position: absolute;
			    width: 1540px;
			    height: 1540px;
			    background: rgba(255, 255, 255, .8);
			    border-radius: 45% 47% 44% 42%;
			    bottom: 25px;
			    left: 50%;
			    transform: translate(-50%, 0);
			    z-index: 1;
			    animation: move 10s linear infinite;
			}
			
			.wave:nth-child(2) {
			    border-radius: 38% 46% 43% 47%;
			    transform: translate(-50%, 0) rotate(-135deg);
			}
			
			.wave:nth-child(3) {
			    border-radius: 42% 46% 37% 40%;
			    transform: translate(-50%, 0) rotate(135deg);
			}
			
			@keyframes charging {
				50% {
			        box-shadow: 0 14px 28px rgba(0, 150, 136, 0.83), 0px 4px 10px rgba(9, 188, 215, 0.4);
			    }
			    
			    95% {
			        top: 5%;
			        filter: hue-rotate(0deg);
			        border-radius: 0 0 5px 5px;
			        box-shadow: 0 14px 28px rgba(4, 188, 213, .2), 0 10px 10px rgba(9, 188, 215, 0.08);
			    }
			    100% {
			        top: 0%;
			        filter: hue-rotate(0deg);
			        border-radius: 15px 15px 5px 5px;
			        box-shadow: 0 14px 28px rgba(4, 188, 213, 0), 0 10px 10px rgba(9, 188, 215, 0.4);
			    }
			}
			
			@keyframes move {
			    100% {
			        transform: translate(-50%, -160px) rotate(720deg);
			    }
			}

		</style>
	</head>
	<body>
		<div class="a">
		    <div class="b"></div>
		    <div class="w">
		        <div class="wave"></div>
		        <div class="wave"></div>
		        <div class="wave"></div>
		    </div>
		</div>	
	</body>
</html>

har01d

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
纯CSS实现液面流动上涨，水面效果，充电效果

直接上图片效果+代码<!DOCTYPE html><html> <head> <meta charset="gb2312" /> <style> html,body { width: 100%; height: 100%; display: flex; background: #ceb68b; } .a { position: relat.
复制链接

扫一扫