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

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

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


目录

整体效果

💎知识点:

1️⃣ transform 变形属性以及 transform-origin 基点定位

2️⃣ :before 和 :after 伪元素选择器

3️⃣ animation 动画属性
🔑思路:

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

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


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

核心代码

html 代码

html 复制代码
<div class="loading73"></div>

主体标签代码。

css 部分代码

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 页面

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 样式

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);
  }
}

页面渲染效果

以上就是所有代码,以及简单的思路,希望对你有一些帮助或者启发。


1\] [原文阅读](https://mp.weixin.qq.com/s/N-4Fo53SOdQe8AoZopksQg) \[2\] 《有趣的css》,访问网址:[funcss.liujueyi.cn](https://funcss.liujueyi.cn),欢迎大家访问。 *** ** * ** *** 我是 Just,这里是「设计师工作日常」,求点赞求关注!

相关推荐
love黄甜心34 分钟前
CSS3:深度解析与实战应用
前端·css·css3
ssshooter2 小时前
怎么在任何项目使用 Tailwind CSS
前端·css·面试
申朝先生2 小时前
CSS中的em,rem,vm,vh详解
前端·css
小小小小宇3 小时前
前端 Stylus 中如何实现样式的“组合”(Compose)
css
知识分享小能手4 小时前
CSS3学习教程,从入门到精通, 学院网站完整项目 - HTML5 + CSS3 实现(25)
前端·javascript·css·学习·css3·html5·前端项目
thinkQuadratic16 小时前
scss预处理器对比css的优点以及基本的使用
前端·css·scss
小鸭呱呱呱17 小时前
【CSS】- 表单控件的 placeholder 如何控制换行显示?
前端·javascript·css·深度学习·面试·职场和发展·html
噶琪19 小时前
理解《CSS世界》盒模型、流、布局
前端·css
the_one19 小时前
《Canvas 炫酷动态粒子连线:从零打造流动星空特效》
前端·javascript·css
剪刀石头布啊19 小时前
ECMAScript、html头、dom、bom、a空链、选择器、css样式继承等、css通用属性值、文档流等
css·html