好看的css动画

最新推荐文章于 2022-03-23 14:52:08 发布

beichen3997

最新推荐文章于 2022-03-23 14:52:08 发布

阅读量284

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/beichen3997/article/details/102613309

版权

css 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* { box-sizing: border-box; }
			html { height: 100%; }
			body {
				position: relative;
				margin: 0;
				height: 100%;
				background: linear-gradient(steelblue, beige);
				font-family: 'Lato', sans-serif;
				font-weight: 300;
				text-align: center;
			}

			#loader {
				position: absolute;
				top:50%; left:50%;
				height:200px; width:100px;
				margin-top:-100px; margin-left:-50px;
			}

			#glass {
				position: relative;
				height: 100%;
				background: rgba(255,255,255,.1);
				border-radius: 0% 0% 15% 15%;
				border: 3px solid;
				border-top: 0;
				border-bottom: 20px solid;
				border-color: rgba(255,255,255,.7);
				overflow: hidden;
			}
			#drink {
				position: absolute;
				top:100%; right:0; bottom:0; left:0;
				background: linear-gradient(to bottom, orange, orangered);
				box-shadow: inset 0 2px 1px rgba(255,69,0,.2);
				opacity: .7;
			}
			#counter {
				position: relative;
				line-height: 200px;
				font-size: 22px;
				color: rgba(255,255,255,1);
			}

			#lemon {
				display: none;
				position: absolute;
				top:0; right:0;
				height:79px; width:79px;
				margin-top:-38px; margin-right:-38px;
				background: radial-gradient(#f7f3b6 10%, #d7d26c);
				border-radius: 50%;
				border: 4px solid #47582e;
				box-shadow: inset 0 0 0 2px #f7f3b6;
			}
			#straw {
				display: none;
				position: absolute;
				bottom:20px; right:30%;
				height:220px; width:6px;
				background: steelblue;
				border-radius: 0 6px 0 0;
				transform: rotate(-18.5deg);
				transform-origin: left bottom;
				-webkit-transform: rotate(-18.5deg);
				-webkit-transform-origin: left bottom;
			}
			#straw:after {
				content: '';
				position: absolute;
				top:0; right:0;
				height:6px; width:80px;
				background: inherit;
				border-radius: 0 6px 0 0;
			}

			#cubes {
				position: absolute;
				top:0; right:0; bottom:0; left:0;
			}
			#cubes div {
				/*display: none;*/
				position: absolute;
				width:50px; height:50px;
				background: rgba(255,255,255,.3);
				border-radius: 10px;
				box-shadow: inset 0 0 10px rgba(255,255,255,.6);
			}
			#cubes div:nth-child(1) {
				bottom:0;
			}
			#cubes div:nth-child(2) {
				bottom:45px; left:25px;
				transform: rotate(32deg);
				transform-origin: center bottom;
				-webkit-transform: rotate(32deg);
				-webkit-transform-origin: center bottom;
			}
			#cubes div:nth-child(3) {
				bottom:90px; left:20px;
				transform: rotate(-34deg);
				transform-origin: center bottom;
				-webkit-transform: rotate(-34deg);
				-webkit-transform-origin: center bottom;
			}

			#coaster {
				width: 130%; height: 4px;
				margin-left: -15%;
				background: steelblue;
				border-radius: 2px;
			}

			footer {
				position: absolute;
				left:0; top:50%; right:0;
				margin-top: 120px;
				color: steelblue;
			}
		</style>
	</head>
	<body>
		<div id="loader">
		<div id="lemon"></div>
		<div id="straw"></div>
		<div id="glass">
			<div id="cubes">
				<div></div>
				<div></div>
				<div></div>
			</div>
			<div id="drink"></div>
			<span id="counter"></span>
		</div>
		<div id="coaster"></div>
	</div>

	<footer>Please wait while<br>we fill up your glass...</footer>
	<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
	<script>
		var worker = null;
		var loaded = 0;

		function increment() {
			$('#counter').html(loaded+'%');
			$('#drink').css('top', (100-loaded*.9)+'%');
			if(loaded==25) $('#cubes div:nth-child(1)').fadeIn(100);
			if(loaded==50) $('#cubes div:nth-child(2)').fadeIn(100);
			if(loaded==75) $('#cubes div:nth-child(3)').fadeIn(100);
			if(loaded==100) {
				$('#lemon').fadeIn(100);
				$('#straw').fadeIn(300);
				loaded = 0;
				stopLoading();
				setTimeout(startLoading, 1000);
			}
			else loaded++;    
		}

		function startLoading() {
			$('#lemon').hide();
			$('#straw').hide();
			$('#cubes div').hide();
			worker = setInterval(increment, 30);
		}
		function stopLoading() {
			clearInterval(worker);
		}

		startLoading();
	</script>
	</body>
</html>

beichen3997

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
好看的css动画

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> * { box-sizing: border-box; } html { height: 100%; }...
复制链接

扫一扫

专栏目录