css3加载动画

最新推荐文章于 2024-09-18 16:43:04 发布

月薪不过5000不改名

最新推荐文章于 2024-09-18 16:43:04 发布

阅读量215

点赞数

文章标签： css3 动画 css

原文链接：https://www.bilibili.com/video/BV1C3411E7KU?spm_id_from=333.999.0.0

版权

1.效果图
css3加载动画
2.案例介绍
这里用到了一些好玩的属性倒影-webkit-box-reflect属性可以去看一下这位博主讲的比较详细朝阳39

3.源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>css3加载动画</title>
		<style>
			*{
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			body{
				display: flex;
				justify-content: center;
				align-items: center;
				min-height: 100vh;
				background-color: #000;
				overflow: hidden;
			}
			.container{
				position: relative;
				width: 100%;
				transform: rotate(-35deg);
			}
			.container .box{
				position: relative;
				left: -200px;
				display: flex;
				justify-content: center;
				align-items: center;
				width: calc(100% + 400px);
				/* 倒影 -webkit-box-reflect */
				-webkit-box-reflect:below 1px linear-gradient(transparent,#0004); 
				animation: animateSurface 1.5s ease-in-out infinite;
			}
			.container .box .cube{
				position: relative;
				width: 200px;
				height: 200px;
				background-color: #03e9f4;
				box-shadow: 0 0 5px rgba(3, 233, 244, 1),
				0 0 25px rgba(3, 233, 244, 1),
				0 0 50px rgba(3, 233, 244, 1),
				0 0 100px rgba(3, 233, 244, 1),
				0 0 200px rgba(3, 233, 244, 1),
				0 0 300px rgba(3, 233, 244, 0.5);
				transform-origin: bottom right;
				animation: animate 1.5s ease-in-out infinite;
			}
			@keyframes animate{
				0%{
					transform: rotate(0deg);
				}
				60%{
					transform: rotate(90deg);
				}
				65%{
					transform: rotate(85deg);
				}
				70%{
					transform: rotate(90deg);
				}
				75%{
					transform: rotate(87.5deg);
				}
				80%,100%{
					transform: rotate(90deg);
				}
			}
			@keyframes animateSurface {
				0%{
					transform: translateX(0px);
				}
				100%{
					transform: translateX(-200px);
				}
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="box">
				<div class="cube"></div>
			</div>
		</div>
	</body>
</html>

每天一个前端小案例！！！