AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

用 CSS3 实现一个 Webpack 的 logo 动画

2023-02-11 168
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 用 CSS3 实现一个 Webpack 的 logo 动画

前言

先直接展示下最终效果，想看代码的可以直接拉到最底部

4.gif

webpack 官网上的截图：

image.png

分析：webpack 这个 logo 的实现思路很简单，其实就是绘制了两个正方形，外面一个里面一个，然后让两个正方形按照不同的方向旋转即可

所以我们又可以把目标变成：如何实现一个正方形。

css 中实现一个正方形，就不得不先讲一下 css3 transform 了

1. CSS3 Transform 介绍

CSS3 Transform 属性不但允许你进行 2D 的旋转，缩放或平移指定的元素，还支持 3D 变换元素。

常见的函数 transform function 有：

  • 平移：translate3d(tx, ty, tz)
    ✓ translateX(tx) 、translateY(ty)、translateZ(tz)
  • 缩放：scale3d(sx, sy, sz)
    ✓ scaleX(sy)、scaleY(sy)、scaleZ(sz)、
  • 旋转：rotate3d(x, y, z, a)
    ✓ rotateX(x)、rotateY(y)、rotateZ(z)

◼ 通过上面的几个函数，我们可以改变某个元素的 3D 形变。
◼ 3D 形变函数会创建一个合成层来启用GPU硬件加速，比如： translate3d、translateZ、 scale3d 、 rotate3d ...

1.1. 3D旋转

1. rotateZ 、rotateX、rotateY

  • 旋转：rotateX(deg)、rotateY(deg)、rotateZ(deg)
    • 该 CSS 函数定义一个变换，它将元素围绕固定轴旋转。旋转量由指定的角度确定; 为正，旋转将为顺时针，为负，则为逆时针。
  • 值个数
    • 只有一个值，表示旋转的角度（单位 deg ）
  • 值类型：
    • deg：<angle> 类型，表示旋转角度（不是弧度）。
    • 正数为顺时针
    • 负数为逆时针
  • 简写：rotate3d(x, y, z, deg)
  • 注意：旋转的原点受 transform-origin 影响

image.png

2. rotate3d

  • 旋转：rotate3d(x, y, z, a)
    • 该 CSS 函数定义一个变换，它将元素围绕固定轴旋转。旋转量由指定的角度定义; 为正，运动将为顺时针，为负，则为逆时针。
  • 值个数
    • 一个值时，表示 z 轴 旋转的角度
    • 四个值时，表示在 3D 空间之中，旋转有 x , y , z 个旋转轴和一个旋转角度。
  • 值类型：
    • x：<number> 类型，可以是 0 到 1 之间的数值，表示旋转轴 X坐标方向的矢量（用来计算形变矩阵中的值）。
    • y：<number> 类型，可以是 0 到 1 之间的数值，表示旋转轴 Y 坐标方向的矢量。
    • z：<number> 类型，可以是 0 到 1 之间的数值，表示旋转轴 Z 坐标方向的矢量。
    • a：<angle> 类型，表示旋转角度。正的角度值表示顺时针旋转，负值表示逆时针旋转。
  • 注意：旋转的原点受 transform-origin 影响

1.2. 3D透视

  • 透视：perspective
    • 定义了观察者与 z=0 平面的距离，使具有三维位置变换的元素产生透视效果（z 表示Z 轴）。
    • z>0 的三维元素比正常的大，而 z<0 时则比正常的小，大小程度由该属性的值决定。
  • 值个数
    • 只有一个值，表示观察者距离 z=0 的平面距离 和 none
  • 必须是 <none> <length> 中的一个
    • none：没有应用 perspective 样式时的默认值。
    • length：定观察者距离 z=0 平面的距离(如下图 d 的距离，单位 px)。
      ✓ 为元素及其内容应用透视变换。当值为 0 或负值时，无透视变换。
  • 透视的两种使用方式：
    1. 在父元素上定义 CSS 透视属性
    2. 如果它是子元素或单元素子元素，可以使用函数 perspective()

image.png

1.3. 3D位移

1. translateX、translateY、translateZ

  • 平移：translateX(x)、translateY(y)、translateZ(z)
    • 该函数表示在二、三维平面上移动元素。
  • 值个数
    • 只有一个值，设置对应轴上的位移
  • 值类型：
    • 数字：100px
    • 百分比：参照元素本身（ refer to the size of bounding box ）

2. translate3d

平移：translate3d(tx, ty, tz)

  • 该 CSS 函数在 3D 空间内移动一个元素的位置。这个移动由一个三维向量来表达，分别表示他在三个方向上移动的距离。
  • 值个数
    • 三个值时，表示在 3D 空间之中， tx , ty , tz 分别表示他在三个方向上移动的距离。
  • 值类型：
    • tx：是一个 <length> 代表移动向量的横坐标。
    • ty：是一个 <length> 代表移动向量的纵坐标。
    • tz：是一个 <length> 代表移动向量的 z 坐标。它不能是 <percentage> 值；那样的移动是没有意义的。
  • 注意：
    • translateX(tx)等同于 translate(tx, 0) 或者 translate3d(tx, 0, 0)。
    • translateY(ty) 等同于 translate(0, ty) 或者 translate3d(0, ty, 0)。
    • translateZ(zx) 等同于 translate3d(0, 0, tz)。

1.4. 3D缩放

1. scaleX、scaleY、scaleZ

  • 缩放：scaleX、scaleY、scaleZ
    • 函数指定了一个沿 x 、y 、z 轴调整元素缩放比例因子。
  • 值个数
    • 一个值时，设置对应轴上的缩放（无单位）
  • 值类型：
    • 数字：
      ✓ 1：保持不变
      ✓ 2：放大一倍
      ✓ 0.5：缩小一半
    • 百分比：不支持百分比

2. scaleX、scaleY、scaleZ

  • 缩放：scale3d(sx, sy，sz)
    • 该 CSS 函数定义了在 3D 空间中调整元素的缩放比例因子 。。
  • 值个数
    • 三个值时，表示在 3D 空间之中， sx, sy, sz 分别表示他在三个方向上缩放的向量。
  • 值类型：
    • sx：是一个 <number> 代表缩放向量的横坐标。
    • sy：是一个 <number> 表示缩放向量的纵坐标。
    • sz：是 <number> 表示缩放向量的 z 分量的 a（再讲到 3D 正方体再演示）。
  • 注意：
    • scaleX(sx) 等价于 scale(sx, 1) 或 scale3d(sx, 1, 1) 。
    • scaleY(sy) 等价于 scale(1, sy) 或 scale3d(1, sy, 1)。
    • scaleZ(sz) 等价于 scale3d(1, 1, sz)。

1.5. 3D空间

  • 变换式：transform-style
    • 该CSS属性用于设置元素的子元素是定位在 3D 空间中还是平展在元素的2D平面中。
    • 在3D空间中同样是可以使用透视效果。
  • 值类型：
    • flat：指示元素的子元素位于元素本身的平面内。
    • preserve-3d：指示元素的子元素应位于 3D 空间中。

image.png

  • 背面可见性：backface-visibility
    • 该CSS 属性 backface-visibility 指定某个元素当背面朝向观察者时是否可见。
  • 值类型：
    • visible：背面朝向用户时可见。
    • hidden：背面朝向用户时不可见。

image.png

2. 先实现一个正方形的骰子

先将骰子的六个面绘制出来，这里我用的 grid 布局，用 flex 也可以的

body {
   
  margin: 0;
  width: 100vw;
  height: 100vh;
  position: relative;
}
.dice-wrapper {
   
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.dice-face {
   
  background-color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 2px solid #000;
  border-radius: 10%;
  display: grid;
  place-items: center;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  grid-template-areas:
    "a . c"
    "e g f"
    "d . b";
}

.dot {
   
  display: inline-block;
  width: 50%;
  height: 50%;
  border-radius: 50%;
  background-color: #000;
}

.dot:nth-child(2) {
   
  grid-area: b;
}

.dot:nth-child(3) {
   
  grid-area: c;
}

.dot:nth-child(4) {
   
  grid-area: d;
}

.dot:nth-child(5) {
   
  grid-area: e;
}

.dot:nth-child(6) {
   
  grid-area: f;
}

.dot:nth-child(odd):last-child {
   
  grid-area: g;
}

<div class="dice-wrapper">
  <div class="dice-face first-face">
    <span class="dot"></span>
  </div>
  <div class="dice-face second-face">
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
  <div class="dice-face third-face">
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
  <div class="dice-face fourth-face">
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
  <div class="fifth-face dice-face">
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
  <div class="dice-face sixth-face">
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
</div>

image.png

现在将 dice-wrapper 稍作修改：

/* 在父元素中添加 transform-style来启用3D空间 */
transform-style: preserve-3d;
transform: rotateX(-33.5deg) rotateY(45deg);

此时六个面的效果都是这样的：

image.png

接下来我们一个个调整位置

第一个面

.first-face {
  transform: rotateX(90deg) translateZ(100px);
}

image.png

第二个面

.second-face {
  transform: rotateX(-90deg) translateZ(100px);
}

image.png

第三个和第四个面 

.third-face {
   
  transform: rotateY(0deg) translateZ(100px);
}
.fourth-face {
   
  transform: rotateY(-180deg) translateZ(100px);
}

image.png

最后两个面

.fifth-face {
   
  transform: rotateY(-90deg) translateZ(100px);
}
.sixth-face {
   
  transform: rotateY(90deg) translateZ(100px);
}

image.png

3. 实现 Webpack logo

有了上面实现正方形的基础，我们终于可以来实现这个 logo 啦。

3.1 实现基本框架 v1 版本

  1. css 部分
    ```css
    body {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    background-color: #2b3a42;

    display: flex;
    justify-content: center;
    align-items: center;
    }

ul {
margin: 0;
padding: 0;
list-style: none;
}

.webpack-logo {
width: 100%;
height: 200px;
/ border: 1px solid red; /

position: relative;
}


2. `html` 部分

```html
<div class="webpack-logo">
  <!-- cube-inner -->
  <ul class="cube-inner">
    <li class="top"></li>
    <li class="bottom"></li>
    <li class="front"></li>
    <li class="back"></li>
    <li class="left"></li>
    <li class="right"></li>
  </ul>

  <!-- cube-outer -->
  <ul class="cube-outer">
    <li class="top"></li>
    <li class="bottom"></li>
    <li class="front"></li>
    <li class="back"></li>
    <li class="left"></li>
    <li class="right"></li>
  </ul>
</div>

上面两部分都很简单：

  1. cube-inner 作为里面的正方
  2. cube-outer 作为外面的正方形。
  3. 两个正方形都有 top bottom front back left right 六个面

3.2 绘制两个正方形

根据第 2 节中的知识绘制两个正方形，要注意的是两个正方形的大小控制好两倍，我这里设置的是
50px 100px

添加 css

.cube-inner {
   
  position: absolute;
  left: 50%;
  top: 50%;
  /* 关键,不要用 transform */
  margin: -25px 0px 0px -25px;
  width: 50px;
  height: 50px;
  /* background-color: red; */

  /* 启用3D空间 */
  transform-style: preserve-3d;
  transform: rotateX(-33.5deg) rotateY(45deg);
  /* 帧动画 */
  animation: innerLoop 4s ease-in-out infinite;
}

.cube-inner li {
   
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #175d96;
  border: 1px solid white;
}

.cube-inner .top {
   
  transform: rotateX(90deg) translateZ(25px);
}

.cube-inner .bottom {
   
  transform: rotateX(-90deg) translateZ(25px);
}

.cube-inner .front {
   
  transform: rotateX(0deg) translateZ(25px);
}

.cube-inner .back {
   
  transform: rotateX(-180deg) translateZ(25px);
}
.cube-inner .left {
   
  transform: rotateY(-90deg) translateZ(25px);
}

.cube-inner .right {
   
  transform: rotateY(90deg) translateZ(25px);
}

/* cube outer */
.cube-outer {
   
  position: absolute;
  left: 50%;
  top: 50%;
  /* 关键,不要用 transform */
  margin: -50px 0px 0px -50px;
  width: 100px;
  height: 100px;

  /* 启用3D空间 */
  transform-style: preserve-3d;
  transform: rotateX(-33.5deg) rotateY(45deg);
  /* 帧动画 */
  animation: outerLoop 4s ease-in-out infinite;
}

.cube-outer li {
   
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(141, 214, 249, 0.5);
  border: 1px solid white;
}

.cube-outer .top {
   
  transform: rotateX(90deg) translateZ(50px);
}

.cube-outer .bottom {
   
  transform: rotateX(-90deg) translateZ(50px);
}

.cube-outer .front {
   
  transform: rotateX(0deg) translateZ(50px);
}

.cube-outer .back {
   
  transform: rotateX(-180deg) translateZ(50px);
}
.cube-outer .left {
   
  transform: rotateY(-90deg) translateZ(50px);
}

.cube-outer .right {
   
  transform: rotateY(90deg) translateZ(50px);
}

3.3 添加动画

要让两个正方形转起来，可以使用 keyframes 帧动画

添加 css

@keyframes outerLoop {
   
  0% {
   
    transform: rotateX(-33.5deg) rotateY(45deg);
  }

  50%,
  100% {
   
    transform: rotateX(-33.5deg) rotateY(405deg);
  }
}

@keyframes innerLoop {
   
  0% {
   
    transform: rotateX(-33.5deg) rotateY(45deg);
  }

  50%,
  100% {
   
    transform: rotateX(-33.5deg) rotateY(-315deg);
  }
}

OK，大功告成。

文章标签：
前端开发
异构计算
关键词：
CSS动画
前端要努力QAQ
目录
相关文章
派大鑫的工作室
|
1月前
|
机器学习/深度学习 前端开发 JavaScript
CSS动画知识点
CSS动画知识点
派大鑫的工作室
69 2
游客fz577umxdejsg
|
3月前
|
前端开发
2s 利用 HTML+css动画实现企业官网效果
2s 利用 HTML+css动画实现企业官网效果
游客fz577umxdejsg
77 2
光明顶阳顶天
|
1月前
|
前端开发 搜索推荐 UED
实现 CSS 动画效果的兼容性
【10月更文挑战第16天】实现 CSS 动画效果的兼容性需要对不同浏览器的特性有深入的了解，并采取适当的策略和方法。通过不断的实践和优化，你可以在各种浏览器上创造出流畅、美观且兼容的动画效果，为用户带来更好的体验。在实际开发中，要密切关注浏览器的发展动态，及时掌握最新的兼容性技巧和解决方案，以确保你的动画设计能够在广泛的用户群体中得到良好的呈现。
光明顶阳顶天
106 58
疯狂的猿
|
8天前
jQuery+CSS3模拟过山车动态的文字动画特效源码
jQuery+CSS3模拟过山车动态的文字动画特效源码实现在全黑的背景下，画面中的文本呈现过山车的轨迹动画上下滚动转圈，且伴随文本颜色渐变效果，非常有意思，欢迎对此特效感兴趣的朋友前来下载参考。
疯狂的猿
14 1
CamilleKing
|
11天前
|
Web App开发 前端开发 JavaScript
如何在不牺牲动画效果的前提下，优化 CSS3 动画的性能？
如何在不牺牲动画效果的前提下，优化 CSS3 动画的性能？
CamilleKing
32 1
chnjames
|
1月前
|
前端开发 JavaScript API
探索 CSS Houdini：轻松构建酷炫的 3D 卡片翻转动画
本文通过构建一个 3D 翻卡动画深入探讨了 CSS Houdini 的强大功能，展示了如何通过 Worklets、自定义属性、Paint API 等扩展 CSS 的能力，实现高度灵活的动画效果。文章首先介绍了 Houdini 的核心概念与 API，并通过构建一个动态星空背景、圆形进度条以及交互式 3D 翻卡动画的实际示例，展示了如何利用 CSS Houdini 赋予网页设计更多创造力。最后，还演示了如何将这种 3D 翻卡效果集成到公司网站中，提升用户体验。CSS Houdini 的创新能力为网页设计带来了前所未有的灵活性，推动了前端开发迈向新的高度。
chnjames
31 0
探索 CSS Houdini：轻松构建酷炫的 3D 卡片翻转动画
六卿
|
2月前
|
JavaScript 前端开发
JS配合CSS3实现动画和拖动小星星小Demo
本文通过代码示例展示了如何使用JavaScript和CSS3实现动画效果和拖动小星星的交互效果，包括文字掉落动画和鼠标拖动产生小星星动画的实现方法。
六卿
50 0
JS配合CSS3实现动画和拖动小星星小Demo
Li370234940
|
1月前
|
前端开发
CSS 动画介绍及语法
CSS 动画介绍及语法
Li370234940
28 0
蓝易云
|
3月前
|
前端开发 UED 开发者
有趣的CSS - 文字加载动画效果
这个文本加载动画简单而有趣，可以在网站标题、广告标语或者关键信息的展示上吸引用户的注意力。开发者可以根据需要调整动画的持续时间、步骤数，或者光标颜色等，来适应特定的设计需求。使用这种动态元素，增强网站的互动性和用户体验，同时也为网站增添了一抹活泼的风格。
蓝易云
96 5
游客fz577umxdejsg
|
3月前
|
前端开发 JavaScript
HTML+CSS如何打造撒花动画效果？3分钟学会，炫酷到爆！
HTML+CSS如何打造撒花动画效果？3分钟学会，炫酷到爆！
游客fz577umxdejsg
233 2