【前端设计】小球loading动画-编程知识

【前端设计】小球loading动画

欢迎来到前端设计专栏，本专栏收藏了一些好看且实用的前端作品，使用简单的html、css语法打造创意有趣的作品，为网站加入更多高级创意的元素。

在这里插入图片描述

html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="小球loading.css">
</head>
<body><div class="loader"><span class="ball" style="--i:1"></span><span class="shadow" style="--i:1"></span><span class="ball" style="--i:2"></span><span class="shadow" style="--i:2"></span><span class="ball" style="--i:3"></span><span class="shadow" style="--i:3"></span><span class="ball" style="--i:4"></span><span class="shadow" style="--i:4"></span><span class="ball" style="--i:5"></span><span class="shadow" style="--i:5"></span></div>
</body>
</html>

css

* {margin: 0;padding: 0;
}
html {height: 100%;
}
body {height: 100%;display: flex;justify-content: center;align-items: center;color: #333;
}
.loader {width: 650px;height: 200px;position: relative;
}
.loader  .ball {position: absolute;width: 50px;height: 50px;border-radius: 50%;background-color: lightseagreen;left: calc(var(--i) * 100px);animation: jump 2s linear infinite calc(var(--i) * 0.3s);
}
.loader  .shadow {position: absolute;bottom: -12.5px;z-index: -1;width: 50px;height: 25px;background-color: #000;border-radius: 50%;left: calc(var(--i) * 100px);animation: shadow 2s linear infinite calc(var(--i) * 0.3s);
}
@keyframes jump {0%,100% {bottom: 150px;}40%,60% {bottom: 0;height: 50px;}50% {height: 25px;filter: hue-rotate(180deg);}
}
@keyframes shadow {0%,100% {transform: scale(2);opacity: 0.1;filter: blur(5px);}40%,60% {transform: scale(1);opacity: 1;filter: blur(2px);}
}