关于前端:奇思妙想-CSS-3D-动画-仅使用-CSS-能制作出多惊艳的动画

38次阅读

共计 13388 个字符，预计需要花费 34 分钟才能阅读完成。

本文将从比拟多的方面具体论述如何利用 CSS 3D 的个性，实现各类乏味、酷炫的动画成果。认真读完，你将会播种到：

  • 理解 CSS 3D 的各种用处
  • 激发你新的灵感，感触动画之美
  • 对于晋升 CSS 动画制作程度会有所帮忙

CSS 3D 基础知识

本文默认读者把握肯定的 CSS 3D 常识，可能绘制初步的 3D 动画成果。当然这里会再简略过一下 CSS 3D 的基础知识。

应用 transform-style 启用 3D 模式

要利用 CSS3 实现 3D 的成果，最次要的就是借助 transform-style 属性。transform-style 只有两个值能够抉择：

// 语法：transform-style: flat|preserve-3d;
 
transform-style: flat; // 默认，子元素将不保留其 3D 地位
transform-style: preserve-3d; // 子元素将保留其 3D 地位。

当咱们指定一个容器的 transform-style 的属性值为 preserve-3d 时，容器的后辈元素便会具备 3D 成果，这样说有点形象，也就是以后父容器设置了 preserve-3d 值后，它的子元素就能够绝对于父元素所在的立体，进行 3D 变形操作。

利用 perspective & perspective-origin 设置 3D 视距，实现透视 / 景深成果

perspective 为一个元素设置三维透视的间隔，仅作用于元素的后辈，而不是其元素自身。

简略来说，当元素没有设置 perspective 时，也就是当 perspective:none/0 时所有后辈元素被压缩在同一个二维立体上，不存在景深的成果。

而如果设置 perspective 后，将会看到三维的成果。

// 语法
perspective: number|none;

// 语法
perspective-origin: x-axis y-axis;
// x-axis : 定义该视图在 x 轴上的地位。默认值：50%
// y-axis : 定义该视图在 y 轴上的地位。默认值：50%

而 perspective-origin 示意 3D 元素透视视角的基点地位，默认的透视视角核心在容器是 perspective 所在的元素，而不是他的后辈元素的中点，也就是 perspective-origin: 50% 50%。

通过绘制 Webpack Logo 相熟 CSS 3D

对于首次接触 CSS 3D 的同学而言，能够通过绘制正方体疾速相熟语法，理解规定。

而 Webpack 的 Logo，正是由 2 个 立方体组成：

以其中一个正方体而言，实现它其实非常容易：

  1. 一个正方体由 6 个面组成，所以首先设定一个父元素 div，而后这个 div 再蕴含 6 个子 div，同时，父元素设置 transform-style: preserve-3d；
  2. 6 个子元素，顺次首先旋转不同角度，再通过 translateZ 位移正方体长度的一半间隔即可
  3. 父元素能够通过 transform 和 perspective 调整视觉角度

以一个正方体为例子，简略的伪代码如下：

<ul class="cube-inner">
  <li class="top"></li>
  <li class="bottom"></li>
  <li class="front"></li>
  <li class="back"></li>
  <li class="right"></li>
  <li class="left"></li>
</ul>
.cube {
    width: 100px;
    height: 100px;
    transform-style: preserve-3d;
    transform-origin: 50px 50px;
    transform: rotateX(-33.5deg) rotateY(45deg);

    li {
      position: absolute;
      top: 0;
      left: 0;
      width: 100px;
      height: 100px;
      background: rgba(141, 214, 249);
      border: 1px solid #fff;
    }
    .top {transform: rotateX(90deg) translateZ(50px);
    }
    .bottom {transform: rotateX(-90deg) translateZ(50px);
    }
    .front {transform: translateZ(50px);
    }
    .back {transform: rotateX(-180deg) translateZ(50px);
    }
    .left {transform: rotateY(-90deg) translateZ(50px);
    }
    .right {transform: rotateY(90deg) translateZ(50px);
    }
}

叠加两个，调整色彩和透明度，咱们能够十分轻松的实现 Webpack 的 LOGO：

当然，这里的 LOGO 为了保障每条线条视觉上的一致性，其实是没有设置景深成果 perspective 的，咱们能够尝试给顶层父容器增加一下如下代码，通过 transform 和 perspective 调整视觉角度，设置景深成果：

.father {
    transform-style: preserve-3d;
    perspective: 200px;
    transform: rotateX(10deg);
}

就能够失去真正的 3D 成果，感触很不一样：

残缺的代码，你能够戳这里：CodePen Demo — Webpack LOGO

OK，热身结束，接下来，让咱们插上设想的翅膀，走进 CSS 3D 的世界。

实现文字的 3D 成果

首先，看看一些有意思的 CSS 3D 文字特效。

要实现文字的 3D 成果，看起来是平面的，通常的形式就是叠加多层。

上面有一些实现一个文字的 3D 成果的形式。

假如咱们有如下构造：

<div class="g-container">
    <p>Lorem ipsum</p>
</div>

如果什么都不加，文字的展现可能是这样的：

咱们能够通过叠加暗影多层，营造 3D 的感觉，次要是正当管制暗影的间隔及色彩，外围 CSS 代码如下：

p {
    text-shadow: 
        4px 4px 0 rgba(0, 0, 0, .8),
        8px 8px 0 rgba(0, 0, 0, .6),
        12px 12px 0 rgba(0, 0, 0, .4),
        16px 16px 0 rgba(0, 0, 0, .2),
        20px 20px 0 rgba(0, 0, 0, .05);
}

这样，就有了根底的 3D 视觉效果。

3D 氖灯文字效果

基于此，咱们能够实现一些 3D 文字效果，来看一个 3D 氖灯文字效果，外围就是：

  • 利用 text-shadow 叠加多层文字暗影
  • 利用 animation 动静扭转暗影色彩 
<div class="container">
    <p class="a">CSS 3D</p>
    <p class="b">NEON</p>
    <p class="a">EFFECT</p>
</div>

外围 CSS 代码：

.container {transform: rotateX(25deg) rotateY(-25deg);
}
.a {
    color: #88e;
    text-shadow: 0 0 0.3em rgba(200, 200, 255, 0.3), 0.04em 0.04em 0 #112,
        0.045em 0.045em 0 #88e, 0.09em 0.09em 0 #112, 0.095em 0.095em 0 #66c,
        0.14em 0.14em 0 #112, 0.145em 0.145em 0 #44a;
    animation: pulsea 300ms ease infinite alternate;
}
.b {
    color: #f99;
    text-shadow: 0 0 0.3em rgba(255, 100, 200, 0.3), 0.04em 0.04em 0 #112,
        0.045em 0.045em 0 #f99, 0.09em 0.09em 0 #112, 0.095em 0.095em 0 #b66,
        0.14em 0.14em 0 #112, 0.145em 0.145em 0 #a44;
    animation: pulseb 300ms ease infinite alternate;
}
@keyframes pulsea {// ... 暗影色彩变动}
@keyframes pulseb {// ... 暗影色彩变动}

能够失去如下成果：

残缺的代码，你能够猛击这里 CSS 灵感 — 应用暗影实现文字的 3D 氖灯成果

利用 CSS 3D 配合 translateZ 实现真正的文字 3D 成果

当然，上述第一种技巧其实没有使用 CSS 3D。上面咱们应用 CSS 3D 配合 translateZ 再进一步。

假如有如下构造：

<div>
  <h1>Glowing 3D TEXT</h1>
  <h1>Glowing 3D TEXT</h1>
  <h1>Glowing 3D TEXT</h1>
  <h1>Glowing 3D TEXT</h1>
  <h1>Glowing 3D TEXT</h1>
  <h1>Glowing 3D TEXT</h1>
  <h1>Glowing 3D TEXT</h1>
  <h1>Glowing 3D TEXT</h1>
  <h1>Glowing 3D TEXT</h1>
  <h1>Glowing 3D TEXT</h1>  
</div>

咱们通过给父元素 div 设置 transform-style: preserve-3d，给每个 <h1> 设定不同的 translateZ() 来达到文字的 3D 成果:

div {transform-style: preserve-3d;}
h1:nth-child(2) {transform: translateZ(5px);
}
h1:nth-child(3) {transform: translateZ(10px);
}
h1:nth-child(4) {transform: translateZ(15px);
}
h1:nth-child(5) {transform: translateZ(20px);
}
h1:nth-child(6) {transform: translateZ(25px);
}
h1:nth-child(7) {transform: translateZ(30px);
}
h1:nth-child(8) {transform: translateZ(35px);
}
h1:nth-child(9) {transform: translateZ(40px);
}
h1:nth-child(10) {transform: translateZ(45px);
}

当然，辅助一些旋转，色调变动，就能够失去更纯正一些 3D 文字效果：

残缺的代码，你能够猛击这里 CSS 灵感 — 3D 光影变换文字效果

利用间隔、角度及光影构建不一样的 3D 成果

还有一种很有意思的技巧，制作的过程须要比拟多的调试。

正当的利用间隔、角度及光影构建出不一样的 3D 成果。看看上面这个例子，只是简略是设置了三层字符，让它们在 Z 轴上相距肯定的间隔。

简略的伪代码如下：

<div>
  <span class='C'>C</span>
  <span class='S'>S</span>
  <span class='S'>S</span>
  <span></span>
  <span class='3'>3</span>
  <span class='D'>D</span>
</div>
$bright : #AFA695;
$gold : #867862;
$dark : #746853;
$duration : 10s;
div {
    perspective: 2000px;
    transform-style: preserve-3d;
    animation: fade $duration infinite;
}
span {
    transform-style: preserve-3d;
    transform: rotateY(25deg);
    animation: rotate $duration infinite ease-in;
    
    &:after, &:before {content: attr(class);
        color: $gold;
        z-index: -1;
        animation: shadow $duration infinite;
    }
    &:after{transform: translateZ(-16px);
    }
    &:before {transform: translateZ(-8px);
    }
}
@keyframes fade {// 透明度变动}
@keyframes rotate {// 字体旋转}
@keyframes shadow {// 字体色彩变动}

简略捋一下，上述代码的外围就是：

  1. 父元素、子元素设置 transform-style: preserve-3d
  2. 用 span 元素的两个伪元素复制两个雷同的字，利用 translateZ() 让它们在 Z 轴距离肯定间隔
  3. 增加简略的旋转、透明度、字体色彩变动

能够失去这样一种相似电影开片的题目 3D 动画，其实只有 3 层元素，然而因为角度失当，视觉上的连接比拟完满，看上去就十分的 3D。

为什么下面说须要正当的利用间隔、角度及光影呢？

还是同一个动画成果，如果动画的初始旋转角度设置的略微大一点，整个成果就会穿帮：

能够看到，在前几帧，能看进去简略的分层构造。又或者，简略调整一下 perspective，设置父容器的 perspective 由 2000px 改为 500px，穿帮成果更为显著：

也就是说，在失当的间隔，适合的角度，咱们仅仅通过很少的元素，就能在视觉上造成比拟不错的 3D 成果。

上述的残缺代码，你能够猛击这里：CSS 灵感 — 3D 文字出场动画

3D 计数器

当然，施展设想，咱们还能够利用 3D 文字效果，制作出十分多有意思的成果。

譬如这个，我之前使用在咱们业务的可视化看板我的项目中的 3D 计数器：

代码比拟长，就不贴出来了，然而也是应用纯 CSS 能够实现的成果。

残缺的代码，你能够猛击这里 CSS 灵感 — 3D 数字计数动画

空间成果

嗯，上述章节次要是对于文字的 3D 成果，上面咱们持续探寻 3D 在营造空间成果上的神奇之处。

优良的 3D 成果，能让人有一种身临其境的感觉，都说 CSS 3D 其实作用无限，能做的不多，然而不代表它不能实现酷炫真切的成果。

要营造真切的 3D 成果，要害是失当益处的使用 perspective 属性。

简略把握原理，咱们也能够很轻松的利用 CSS 3D 绘制一些十分有空间美感的成果。

这里我率领大家疾速绘制一副具备空间美感的 CSS 3D 作品。

空间 3D 成果热身

首先，咱们借助 Grid/Flex 等布局，在屏幕上布满格子（item），随便点就好：

<ul class="g-container">
  <li></li>
  <li></li>
  // ... 很多子 li
  <li></li>
</ul>

初始背景色为彩色，每个 item 填充为红色

接着，扭转下每个 item 的形态，让他变成长条形的，能够扭转通过扭转 item 宽度，应用突变填充局部等等形式：

接下来，父容器设置 transform-style: preserve-3d 和 perspective，子元素设置 transform: rotateX(45deg)，神奇的事件就产生了：

Wow，仅仅 3 步，咱们就初步失去了一副具备空间美感的图形，让咱们再回到每个子 item 的色彩设置，给它们随机填充不同的色彩，并且加上一个 transform: translate3d() 的动画，一个简略的 CSS 3D 作品就绘制实现了：

基于这个技巧的变形和延长，咱们就能够绘制十分多相似的成果。

在这里，我再次举荐 CSS-Doodle 这个工具，它能够帮忙咱们疾速的发明简单 CSS 成果。

CSS-doodle 是一个基于 Web-Component 的库。容许咱们疾速的创立基于 CSS Grid 布局的页面，以实现各种 CSS 成果（或者能够称之为 CSS 艺术）。

咱们能够把上述的线条切换成圆弧：

残缺的代码能够戳这里，利用 CSS-Doodle 也就几十行：CodePen Demo – CSS-Doodle Random Circle

又譬如袁川老师创作的 Seeding：

利用图片素材

当然，基于上述技巧，有的时候会认为利用 CSS 绘制一些线条、圆弧、方块比拟麻烦。能够进一步尝试利用现有的素材基于 CSS 3D 进行二次创作，这里有一个十分有意思的技巧。

假如咱们有这样一张图形：

这张图先放着备用。在应用这张图之前，咱们会先绘制这样一个图形：

<div class="g-container">
  <div class="g-group">
      <div class="item item-right"></div>
      <div class="item item-left"></div>   
      <div class="item item-top"></div>
      <div class="item item-bottom"></div> 
      <div class="item item-middle"></div>    
  </div>
</div>
body {background: #000;}
.g-container {position: relative;}
.g-group {
  position: absolute;
  width: 100px;
  height: 100px;
  left: -50px;
  top: -50px;
  transform-style: preserve-3d;
}
.item {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, .5);
}
.item-right {
  background: red;
  transform: rotateY(90deg) translateZ(50px);
}
.item-left {
  background: green;
  transform: rotateY(-90deg) translateZ(50px);
}
.item-top {
  background: blue;
  transform: rotateX(90deg) translateZ(50px);
}
.item-bottom {
  background: deeppink;
  transform: rotateX(-90deg) translateZ(50px);
}
.item-middle {background: rgba(255, 255, 255, 0.5);
  transform: rotateX(180deg) translateZ(50px);
}

一共设置了 5 个子元素，不过认真看 CSS 代码，其中 4 个子元素都设置了 rotateX/Y(90deg/-90deg)，也就是绕 X 轴或者 Y 轴旋转了 90°，在视觉上是垂直屏幕的一张立体，所以直观视觉上咱们是不到的，只能看到一个立体 .item-middle。

我将 5 个子 item 设置了不同的背景色，后果如下：

当初看来，如同平平无奇，的确也是。

不过，见证奇观的时候来了，此时，咱们给父元素 .g-container 设置一个极小的 perspective，譬如，设置一个 perspective: 4px，看看成果：

.g-container {
  position: relative;
+ perspective: 4px;
}
// ... 其余款式放弃不变

此时，画风骤变，整个成果就变成了这样：

因为 perspective 失效，本来的立体成果变成了 3D 的成果。接下来，咱们应用下面筹备好的星空图，替换一下下面的背景色彩，全副都换成同一张图，神奇的事件产生了：

因为设置的 perspective 十分之下，而每个 item 的 transform: translateZ(50px) 设置的又比拟大，所以图片在视觉上被拉伸的十分厉害。然而整体是充斥整个屏幕的。

接下来，咱们只须要让视角动起来，给父元素减少一个动画，通过管制父元素的 translateZ() 进行变动即可：

.g-container{
  position: relative;
  perspective: 4px;
  perspective-origin: 50% 50%;
}

.g-group{
  position: absolute;
  // ... 一些定位高宽代码
  transform-style: preserve-3d;
  + animation: move 8s infinite linear;
}

@keyframes move {
  0%{transform: translateZ(-50px) rotate(0deg);
  }
  100%{transform: translateZ(50px) rotate(0deg);
  }
}

看看，神奇美好的星空穿梭的成果就进去了，Amazing：

美中不足之处在于，动画没能有限连接上，结尾和结尾都有很大的问题。

当然，这难不倒咱们，咱们能够：

  1. 通过叠加两组同样的成果，一组比另一组通过负的 animation-delay 提前前进，使两组动画衔接起来（一组完结的时候另外一组还在前进中）
  2. 再通过透明度的变动，暗藏掉 item-middle 迎面飞来的突兀感
  3. 最初，能够通过父元素的滤镜 hue-rotate 管制图片的色彩变动

咱们尝试批改 HTML 构造如下：

<div class="g-container">
  <div class="g-group">
      <div class="item item-right"></div>
      <div class="item item-left"></div>   
      <div class="item item-top"></div>
      <div class="item item-bottom"></div> 
      <div class="item item-middle"></div>    
  </div>
  <!-- 减少一组动画 -->
  <div class="g-group">
      <div class="item item-right"></div>
      <div class="item item-left"></div>   
      <div class="item item-top"></div>
      <div class="item item-bottom"></div>   
      <div class="item item-middle"></div>    
  </div>
</div>

批改后的外围 CSS 如下：

.g-container{
  perspective: 4px;
  position: relative;
  // hue-rotate 变动动画，能够让图片色彩始终变换
  animation: hueRotate 21s infinite linear;
}

.g-group{
  transform-style: preserve-3d;
  animation: move 12s infinite linear;
}
// 设置负的 animation-delay，让第二组动画提前进行
.g-group:nth-child(2){
  animation: move 12s infinite linear;
  animation-delay: -6s;
}
.item {background: url(https://z3.ax1x.com/2021/08/20/fLwuMd.jpg);
  background-size: cover;
  opacity: 1;
  // 子元素的透明度变动，缩小动画连接时候的突兀感
  animation: fade 12s infinite linear;
  animation-delay: 0;
}
.g-group:nth-child(2) .item {animation-delay: -6s;}
@keyframes move {
  0%{transform: translateZ(-500px) rotate(0deg);
  }
  100%{transform: translateZ(500px) rotate(0deg);
  }
}
@keyframes fade {
  0%{opacity: 0;}
  25%,
  60%{opacity: 1;}
  100%{opacity: 0;}
}
@keyframes hueRotate {
  0% {filter: hue-rotate(0);
  }
  100% {filter: hue-rotate(360deg);
  }
}

最终残缺的成果如下，星空穿梭的成果，整个动画首尾相连，能够始终有限上来，简直没有漏洞，十分的赞：

上述的残缺代码，你能够猛击这里：CSS 灵感 — 3D 宇宙时空穿梭成果

3D 有限延长视角动画

OK，当把握了上述技巧之后，咱们能够很容易的对其持续变形发散，实现各种各样的有限延长的 3D 视角动画。

这里还有一个十分有意思的使用了相似技巧的动画：

原理与上述的星空穿梭大致相同，4 面墙的背景图应用 CSS 突变能够很轻松的绘制进去，接下来就只是须要思考如何让动画能有限循环上来，管制好首尾的连接。

该成果最早见于 jkantner 的 CodePen，在此基础上我对其进行了欠缺和丰盛，残缺代码，你能够猛击这里：CSS 灵感 — 3D 有限延长视角动画

视差成果

因为 CSS 3D 的个性，它天生就非常适合拿来制作一些视差成果。

本章节的内容之前在我的另外一篇文章，也有过一些探讨 — CSS 实现视差成果

原理就是：

  1. 咱们给容器设置上 transform-style: preserve-3d 和 perspective: [x]px，那么处于这个容器的子元素就将位于 3D 空间中，
  2. 再给子元素设置不同的 transform: translateZ()，这个时候，不同元素在 3D Z 轴方向间隔屏幕（咱们的眼睛）的间隔也就不一样
  3. 滚动滚动条，因为子元素设置了不同的 transform: translateZ()，那么他们滚动的高低间隔 translateY 绝对屏幕（咱们的眼睛），也是不一样的，这就达到了滚动视差的成果。

外围代码示意就是：

<div class="g-container">
    <div class="section-one">translateZ(-1)</div>
    <div class="section-two">translateZ(-2)</div>
    <div class="section-three">translateZ(-3)</div>
</div>
html {
    height: 100%;
    overflow: hidden;
}

body {
    perspective: 1px;
    transform-style: preserve-3d;
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
}

.g-container {
    height: 150%;

    .section-one {transform: translateZ(-1px);
    }
    .section-two {transform: translateZ(-2px);
    }
    .section-three {transform: translateZ(-3px);
    }
}

总结就是父元素设置 transform-style: preserve-3d 和 perspective: 1px，子元素设置不同的 transform: translateZ，滚动滚动条，成果如下：

CodePen Demo — CSS 3D parallax

很显著，当滚动滚动条时，不同子元素的位移水平从视觉上看是不一样的，也就达到了所谓的滚动视差成果。

滚动视差文字暗影 / 虚影成果 / 多图展现

那么，使用 translate3d 的视差成果，又能有一些什么好玩的成果呢？上面这个滚动视差文字暗影 / 虚影成果很有意思：

CodePen Demo — CSS translate3d Parallax

另外一种就是咱们能够把这个技巧使用到相似个人主页，图片展现等一些大屏场景下。

外围就是给每张图片设置不同的 translateZ，给父元素设置一个 persepective 即可，这样，在高低滚动的过程中，就能呈现简略的视差成果：

CodePen Demo — CSS Scroll Parallax Effect

同理，这个滚动视差不仅仅能够作用于高低的滚动，对于左右方向的滚动也是同样失效的：

CodePen Demo — CSS-Only Horizontal Parallax Gallery By Paulina Hetman

其余实用场景介绍

在这一章节，会介绍一些乏味的，能够落地的 3D 成果或者动画。

404 Rolling Box

在我本人的集体网站的 404 页面，就应用 CSS 3D 实现的立方体制作的一个 404 成果：

其外围就在于在一个 CSS 3D 立方体的根底上：

  1. 增加立方体的滚动动画
  2. 管制着落的缓动函数，及落地的震荡动画（为了成果更为真切，使用了设计动画中的准备动作、追随和重叠动画等技巧）
  3. 管制立方体及高空数字画面的平移
  4. 管制动画的有限循环

整体制作还是十分有难度的，然而用在本人的 404 页面，的确也是十分的酷炫。这个成果，我最早见于 Yusuke Nakaya 大神，残缺的代码你能够戳这里：CodePen — Only CSS: 404 Rolling Box

立方体进度条

嗯，上面这个还是借助了立方体。咱们来实现一个立方体进度条~

首先，实现一个立方体，构造如下：

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

咱们能够把这个立方体设想成一个平面的进度条容器，通过管制 6 面的色彩，咱们能够奇妙的失去一种 3D 进度条成果。

当然，其实咱们不须要那么多面，4 个面即可，去掉左右，而后利用突变批改一下立方体各个面的色彩，去掉 border，外围的 CSS 代码如下：

.demo-cube {
  position: relative;

  .cube {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 100px;
    transform-style: preserve-3d;
    transform: translate(-50%, -50%) rotateX(-33.5deg);

    li {
      position: absolute;
      width: 300px;
      height: 100px;
      background: linear-gradient(90deg, rgba(156, 39, 176, .3), rgba(255, 34, 109, .8) 70%, rgba(255, 255, 255, .6) 70%, rgba(255, 255, 255, .6));
    }
    .top {transform: rotateX(90deg) translateZ(50px);
    }
    .bottom {transform: rotateX(-90deg) translateZ(50px);
    }
    .front {transform: translateZ(50px);
    }
    .back {transform: rotateX(-180deg) translateZ(50px);
    }
  }
}

咱们就能够失去一个十分酷炫的 3D 进度条成果：

利用 CSS Property 给 3D 进度条加上动画

当然，进度条嘛，它须要一个填充动画。因为咱们应用的是突变实现的进度条的进度，须要去管制其中的色彩百分比变动。

而失常而言，CSS 是不反对突变的动画的，不过这也难不倒咱们，因为咱们能够应用 CSS @Property。

简略革新一下代码：

@property --per {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

.demo-cube .cube {
  .top,
  .front,
  .bottom,
  .back {background: linear-gradient(90deg, rgba(255, 217, 34, .6), rgba(255, 34, 109, .8) var(--per), rgba(255, 34, 109, .1) var(--per), rgba(255, 34, 109, .1));
    animation: perChange 6s infinite;
  }
}

@keyframes perChange {
  0% {--per: 0%;}
  90%,
  to {--per: 80%;}
}

这样，咱们就实现了一个会动的 3D 进度条，只须要管制 --per CSS 自定义属性即可，成果如下：

对于 CSS @Property 不算很理解的，能够看看作者的这篇文章 — CSS @property，让不可能变可能，它的呈现，让 CSS 极大的晋升了制作各种动画的能力。

上述的残缺代码，你能够猛击这里：CSS 灵感 — 3D 立方体进度条

总结一下

感激浏览到此，如果认真看完上述内容，置信你肯定会惊叹于 CSS 的神奇。心愿本文的内容可能让你：

  • 理解 CSS 3D 的各种用处
  • 激发你新的灵感，感触动画之美
  • 晋升你的 CSS 动画制作程度

当然，离奇乏味的 CSS 3D 内容还有很多，我还有十分多个有意思的 DEMO 没有贴出来，当然对于本文的内容，我感觉曾经足够空虚，剩下的下次持续分享。

仅应用 CSS 能制作出多惊艳的动画？我感觉这个问题没有答案，随着 CSS 语言一直倒退，各种新个性的继续退出，尽管某些方面比不上一些更业余的语言，然而它也在便利性、易学性上有着本人的劣势。

最初

好了，本文到此结束，心愿对你有帮忙 :)

想 Get 到最有意思的 CSS 资讯，千万不要错过我的公众号 — iCSS 前端趣闻 😄

更多精彩 CSS 成果能够关注我的 CSS 灵感

更多精彩 CSS 技术文章汇总在我的 Github — iCSS，继续更新，欢送点个 star 订阅珍藏。

如果还有什么疑难或者倡议，能够多多交换，原创文章，文笔无限，满腹经纶，文中若有不正之处，万望告知。

正文完
前端
发表至： 前端
2021-08-24
 0
关于前端:纯前端数据可视化编辑器初始化时预置数据源和数据集
关于前端:编写高质量可维护的代码一目了然的注释
关于前端:JavaScript的循环结构语句
关于前端:京东前端二面常考手写面试题必备