用css实现的一个loading效果

乌克兰老母居

2020-05-05 / 0 评论 / 0 点赞 / 126 阅读 / 2,138 字 / 正在检测是否收录...

05/05

温馨提示：

本文最后更新于 2021-01-10，若内容或图片失效，请留言反馈。部分素材来自网络，若不小心影响到您的利益，请联系我们删除。

最终的效果是这样的

Html代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Love_Loading</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</body>
</html>

css代码：

* {
  margin: 0;
  padding: 0;
}
ul, ol {
  list-style: none;
}
body {
  background-color: #000;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
ul {
  height: 200px;
  display: flex;
}
li {
  width: 20px;
  height: 20px;
  border-radius: 20px;
  background-color: red;
  margin-right: 20px;
}
li:nth-child(1) {
  background-color: red;
  animation: love1 3s 0s infinite;
}
li:nth-child(2) {
  background-color: darkturquoise;
  animation: love2 3s 0.1s infinite;
}
li:nth-child(3) {
  background-color: darksalmon;
  animation: love3 3s 0.2s infinite;
}
li:nth-child(4) {
  background-color: deeppink;
  animation: love4 3s 0.3s infinite;
}
li:nth-child(5) {
  background-color: yellow;
  animation: love5 3s 0.4s infinite;
}
li:nth-child(6) {
  background-color: deeppink;
  animation: love4 3s 0.5s infinite;
}
li:nth-child(7) {
  background-color: darksalmon;
  animation: love3 3s 0.6s infinite;
}
li:nth-child(8) {
  background-color: darkturquoise;
  animation: love2 3s 0.7s infinite;
}
li:nth-child(9) {
  background-color: red;
  animation: love1 3s 0.8s infinite;
}
@keyframes love1 {
  30%,50% {
    height: 60px;
    transform: translateY(-30px);
  }
  70%,100% {
    height: 20px;
    transform: translateY(0px);
  }
}
@keyframes love2 {
  30%,50% {
    height: 125px;
    transform: translateY(-60px);
  }
  70%,100% {
    height: 20px;
    transform: translateY(0px);
  }
}
@keyframes love3 {
  30%,50% {
    height: 160px;
    transform: translateY(-75px);
  }
  70%,100% {
    height: 20px;
    transform: translateY(0px);
  }
}
@keyframes love4 {
  30%,50% {
    height: 180px;
    transform: translateY(-30px);
  }
  70%,100% {
    height: 20px;
    transform: translateY(0px);
  }
}
@keyframes love5 {
  30%,50% {
    height: 200px;
    transform: translateY(-45px);
  }
  70%,100% {
    height: 20px;
    transform: translateY(0px);
  }
}