当前位置：首页 > article >正文

有趣的css - 跷跷板加载动画

article 2024/10/22 18:01:06

大家好，我是 Just，这里是「设计师工作日常」，今天分享的是使用 css 模拟一个跷跷板效果的加载动画效果。

《有趣的css》系列最新实例通过公众号「设计师工作日常」发布。

整体效果

💎知识点：
1️⃣ transform 变形属性以及 transform-origin 基点定位
2️⃣ :before 和 :after 伪元素选择器
3️⃣ animation 动画属性

🔑思路：
创建一个长矩形和一个正方形，然后让正方形进行翻转移动，同时让整体变化角度，形成如同跷跷板一样的效果。

模拟一个跷跷板效果的加载动画，让用户在等待页面加载时更有趣一些。

核心代码部分，简要说明了写法思路；完整代码在最后，可直接复制到本地运行。

核心代码

html 代码

<div class="loading73"></div>

主体标签代码。

css 部分代码

.loading73{
  width: 80px;
  height: 80px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  transform-origin:center center;
  animation: effbox73 3s cubic-bezier(0, 0.6, 1, 0.4) infinite;
}
@keyframes effbox73{
  0%{
    transform: rotate(-30deg);
  }
  40%{
    transform: rotate(30deg);
  }
  50%{
    transform: rotate(30deg);
  }
  90%{
    transform: rotate(-30deg);
  }
  100%{
    transform: rotate(-30deg);
  }
}
.loading73::before{
  content: '';
  width: 100%;
  height: 4px;
  background-color: #000;
  position: absolute;
  left: 0;
}
.loading73::after{
  content: '';
  width: 16px;
  height: 16px;
  background-color: #089f1f;
  position: absolute;
  top: 21px;
  left: 0;
  border-radius: 3px;
  animation: eff73 3s ease-in-out infinite;
}
@keyframes eff73{
  0%{
    transform: translateX(0) rotate(0);
  }
  10%{
    transform: translateX(16px) rotate(90deg);
  }
  20%{
    transform: translateX(32px) rotate(180deg);
  }
  30%{
    transform: translateX(48px) rotate(270deg);
  }
  40%{
    transform: translateX(64px) rotate(360deg);
  }
  50%{
    transform: translateX(64px) rotate(360deg);
  }
  60%{
    transform: translateX(48px) rotate(270deg);
  }
  70%{
    transform: translateX(32px) rotate(180deg);
  }
  80%{
    transform: translateX(16px) rotate(90deg);
  }
  90%{
    transform: translateX(0) rotate(0);
  }
  100%{
    transform: translateX(0) rotate(0);
  }
}

1、给主体标签添加基本样式，定义 flex 布局，让内元素平行垂直居中；添加 transform-origin:center center; 属性，让主体整体基于中心点对齐；

2、利用 :before 基于主体创建一个伪元素长矩形作为跷跷板，宽度为 100% ，高度为 4px ，设置定位属性，靠左对齐，背景色为 #000 黑色，。

3、利用 :after 基于主体创建一个伪元素正方形，设置其基本样式，通过定位靠左对齐，并且让底部与长矩形跷跷板顶部差 1px，这样正方形在旋转时，不会遮盖住长矩形。

4、给伪元素正方形添加 animation 属性，设置参数 animation: eff73 3s ease-in-out infinite; ，并且设置关键帧，让伪元素正方形不停的翻转移动。

5、最后给主体标签添加 animation 属性，设置参数 animation: effbox73 3s cubic-bezier(0, 0.6, 1, 0.4) infinite; ，注意这里设置运动速率为 cubic-bezier(0, 0.6, 1, 0.4) ，让伪元素正方形翻转移动到跷跷板两头时加速跷跷板下降；最后同样要设置关键帧，让跷跷板和正方形的关键帧同步。

完整代码如下

html 页面

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>跷跷板加载动画</title>
  </head>
  <body>
    <div class="app">
      <div class="loading73"></div>
    </div>
  </body>
</html>

css 样式

/** style.css **/
.app{
  width: 100%;
  height: 100vh;
  background-color: #ffffff;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.loading73{
  width: 80px;
  height: 80px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  transform-origin:center center;
  animation: effbox73 3s cubic-bezier(0, 0.6, 1, 0.4) infinite;
}
@keyframes effbox73{
  0%{
    transform: rotate(-30deg);
  }
  40%{
    transform: rotate(30deg);
  }
  50%{
    transform: rotate(30deg);
  }
  90%{
    transform: rotate(-30deg);
  }
  100%{
    transform: rotate(-30deg);
  }
}
.loading73::before{
  content: '';
  width: 100%;
  height: 4px;
  background-color: #000;
  position: absolute;
  left: 0;
}
.loading73::after{
  content: '';
  width: 16px;
  height: 16px;
  background-color: #089f1f;
  position: absolute;
  top: 21px;
  left: 0;
  border-radius: 3px;
  animation: eff73 3s ease-in-out infinite;
}
@keyframes eff73{
  0%{
    transform: translateX(0) rotate(0);
  }
  10%{
    transform: translateX(16px) rotate(90deg);
  }
  20%{
    transform: translateX(32px) rotate(180deg);
  }
  30%{
    transform: translateX(48px) rotate(270deg);
  }
  40%{
    transform: translateX(64px) rotate(360deg);
  }
  50%{
    transform: translateX(64px) rotate(360deg);
  }
  60%{
    transform: translateX(48px) rotate(270deg);
  }
  70%{
    transform: translateX(32px) rotate(180deg);
  }
  80%{
    transform: translateX(16px) rotate(90deg);
  }
  90%{
    transform: translateX(0) rotate(0);
  }
  100%{
    transform: translateX(0) rotate(0);
  }
}