css 实现心形加载动画

最新推荐文章于 2022-08-18 18:30:00 发布

青青子衿~~

最新推荐文章于 2022-08-18 18:30:00 发布

阅读量596

点赞数 2

分类专栏：前端动画 css3 文章标签： css css3 html

本文链接：https://blog.youkuaiyun.com/weixin_45727272/article/details/126015634

版权

前端同时被 3 个专栏收录

54 篇文章

订阅专栏

动画

11 篇文章

订阅专栏

css3

11 篇文章

订阅专栏

文章目录

前言
一、html代码
二、css
总结

前言

心形加载动画

提示：以下是本篇文章的代码内容,供大家参考,相互学习

一、html代码

代码如下：

<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

		<title>心</title>
	</head>

	<body>
		<div class="container">
			<div class="loading">
				<span></span>
				<span></span>
				<span></span>
			</div>
			<div class="shadow"></div>
		</div>
	</body>

</html>

二、css

代码如下：

* {
				/* 初始化 */
				margin: 0;
				padding: 0;
			}

			body {
				/* 100%窗口高度 */
				height: 100vh;
				/* 弹性布局 居中 */
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.container {
				/* 绝对定位 */
				position: absolute;
				top: 40vh;
			}

			.loading {
				/* 执行动画：动画名 时长 贝塞尔曲线 无限次播放 */
				animation: rotate 2.5s cubic-bezier(0.75, 0, 0.5, 1) infinite;
			}

			.loading span {
				width: 100px;
				height: 100px;
				display: block;
				position: absolute;
				background-color: #ff8f92;
				border: 1px solid #ff8f92;
				border-radius: 100%;
			}

			.loading span:nth-child(1) {
				transform: translate(-28px, -28px);
				/* 执行动画：动画名 时长 贝塞尔曲线 无限次播放 */
				animation: animate1 2.5s cubic-bezier(0.75, 0, 0.5, 1) infinite;
			}

			.loading span:nth-child(2) {
				transform: translate(28px, -28px);
				/* 执行动画：动画名 时长 贝塞尔曲线 无限次播放 */
				animation: animate2 2.5s cubic-bezier(0.75, 0, 0.5, 1) infinite;
			}

			.loading span:nth-child(3) {
				position: relative;
				border-radius: 0;
				transform: scale(0.98) rotate(-45deg);
				/* 执行动画：动画名 时长 贝塞尔曲线 无限次播放 */
				animation: animate3 2.5s cubic-bezier(0.75, 0, 0.5, 1) infinite;
			}

			/* 阴影部分 */
			.shadow {
				position: relative;
				width: 100px;
				height: 20px;
				background-color: #d9d9d9;
				border-radius: 50%;
				top: 50px;
				animation: shadow 2.5s cubic-bezier(0.75, 0, 0.5, 1) infinite;
			}

			/* 定义动画 */
			/* 心形 左圆 */
			@keyframes animate1 {
				60% {
					transform: scale(0.4);
				}
			}

			/* 心形 右圆 */
			@keyframes animate2 {
				40% {
					transform: scale(0.4);
				}
			}

			/* 心形 中间部分 */
			@keyframes animate3 {
				50% {
					border-radius: 100%;
					transform: scale(0.5) rotate(-45deg);
				}

				100% {
					transform: scale(0.98) rotate(-45deg);
				}
			}

			/* 再加个心形整体的旋转动画 */
			@keyframes rotate {
				50% {
					transform: rotate(360deg);
				}

				100% {
					transform: rotate(720deg);
				}
			}

			/* 阴影动画 */
			@keyframes shadow {
				50% {
					background-color: #f2f2f2;
					transform: scale(0.5);
				}
			}