整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

CSS 还原拉斯维加斯球数字动画

近大家刷抖音,是否有刷到拉斯维加斯的新地标 「Sphere」:

场馆内部的视觉效果非常惊人,其中一个效果让我虎躯一震:

我的第一想法就是,这个看起来用 CSS 也可以实现嘛?还有 CSS 不能实现的?

本文,就将尝试使用 CSS,大致还原这个效果。

拆解动画效果

其实,上述的动画效果,本质就是一个 3D 立方体。

同时,3D 立方体上每个面存在颜色不一样的文字,文字和颜色都在随机变化。

也就是说,我们需要实现一个 3D 立方体:

同时,我们还需要实现这样一个动画效果 -- 文字和颜色都在随机变化的平面效果:

两者组合一下,再挪动 3D 元素的景深距离,就能实现我们想要的效果!

好,下面我们一个一个实现。

实现一个 3D 立方体

实现一个 3D 立方体,相对另外一个文字和颜色都在随机变化的平面效果而言,属于非常非常简单的一步了。

我们在非常多篇文章中也讲过具体的实现方式:

最常见的 3D 图形,莫过于一个 3D 立方体。

如果没有上下两个面,只是一个 4 个面的图形,大概是这样:

这样一个图形,利用 CSS 3D,如何快速实现呢?

首先,构造这么一个结构:

<div class="perspective">
        <div class="container">
                <div class="img">3</div>
                <div class="img">D</div>
                <div class="img">视</div>
                <div class="img">图</div>
        </div>
</div>

4 个面,就是最内层的 4 个 .img,首先,需要给两个父容器,设置 3D 的属性:

.perspective {
  perspective: 3000px;
}
.container {
  width: 400px;
  height: 400px;
  transform-style: preserve-3d;
}

简单解释一下:

  1. perspective 可以作用于元素的后代,设置在最上层即可;
  2. transform-style: preserve-3d 设置给最终需要 3D 空间的元素的父容器之上,由于最终是 4 个 .img 需要 3D 空间,因此设置给 .container 即可。

接下来,就是最为核心的,如何设置 4 个 .img 元素的 3D 变换,使之形成 3D 立方体。

技巧就是:先旋转,再位移

这里给出一个俯视效果图:

以上述 Demo 中的正方体为例子,class 为 .img 的 div 块的高宽为 400px*400px。那么要利用 4 个 这样的 div 拼接成一个正方体,需要分别将 4 个 div 绕 Y 轴旋转 [90°, 180°, 270°, 360°],再 translateY(200px) 。

值得注意的是,一定是先旋转角度,再偏移距离,这个顺序很重要

代码如下:

.img {
        position: absolute;
        top: 0;
        left: 0;
        width: 400px;
        height: 400px;
}
@for $i from 1 through $imgCount {
        .img:nth-child(#{$i}) {
                transform: rotateY(($i * 90deg)) translateZ(200px);
        }
}

效果如下:

此时,可能会觉得图片太太太大了,此时,我们可以通过给中间层 .container 设置一个恰当的 translateZ 进行视觉大小上的调节。

.container {
    transform: translateZ(-3000px);
}

这样,就能得到恰当大小的立方体元素效果:

当然,对于我们这个效果,我们 5 要五个面(前后左右与上方即可),因此,我们基于上述的基础知识铺垫,重新实现一个我们需要的框架结构:

<div class="perspective">
  <div class="container">
    <div class="g-panel"></div>
    <div class="g-panel"></div>
    <div class="g-panel"></div>
    <div class="g-panel"></div>
    <div class="g-panel"></div>
  </div>
</div>

并且,我们希望我们的图形是一个立方体,只需要稍微改造长宽和 translateZ() 的即可。这样,我们就能得到一个前后左右与上方 5 个面的立方体元素。

示意效果如下:

实现文字动画效果

OK,立方体我们先放在一边。

接下来,我们尝试来实现这个效果:

这个效果如果一个文字用一个 DIV 承载实现,那是非常容易的,但是这样势必会造成元素过多,再设置动画效果,则会导致页面太为卡顿

所以,我们需要另辟蹊径。这里,我们可以使用多层渐变配合 background-clip: text

首先,我们利用等宽字体,随机实现一列文字:

<div>ABCDEFGHIJKLMN</div>
div {
    font-family: monospace;
    text-align: center;
    font-size: 25px;
    width: 25px;
    line-height: 25px;
    color: #fff;
}

效果大致如下:

此时,如果我们再利用线性渐变,给每个字符的对应空间(也就 25px x 25px),设置上不同的颜色,大概是这样:

@function randomLinear($count) {
    $value: '';
    
    @for $i from 0 through ($count - 1) {
        $value: $value + randomColor() + string.unquote(" 0 #{$i * 25}px,");
    }
    
    @return linear-gradient(string.unquote(#{$value}) randomColor() 0 100%);
}
@function randomColor() {
    @return rgb(randomNum(255), randomNum(255), randomNum(255));
}
div {
    // ...
    background: randomLinear(14);
}

其中,randomLinear(14) 是一个 SASS 函数,参数 14 表示生成 14 层线性渐变,每一个文字区域的颜色都是随机的,经过编译后的其中一种结果如下:

div {
    // ...
    background: linear-gradient(#feea96 0 25px, #edde42 0 50px, #e2344a 0 75px, #cdab7e 0 100px, #e16c8b 0 125px, #dcdc7d 0 150px, #dcb42a 0 175px, #d6a587 0 200px, #984f71 0 225px, #221e34 0 250px, #5e9a69 0 275px, #a955e4 0 300px, #4e908f 0 325px, #8d177e 0 350px);
}

上面,我们按照每间隔 25px 的高度,利用线性渐变随机设置了一种颜色,最终,能够得到这么个效果:

此时,我们只需要再设置 background-clip: text,配合透明文字颜色 color: transparent,就可以实现单个 div 内,单列文字,每个字体的颜色都是不一样的:

div {
    // ...
    background: randomLinear(14);
    background-clip: text;
    color: transparent;
}

此时,效果如下:

当然,文字颜色可以随机,那么文字本身也应该随机。这个不难,我们也可以借助 SASS 函数,编写一个随机字符的函数,通过元素的伪元素 content 进行设置。

那么此时,完整的代码可能是这样的:

<div></div>
$str: 'QWERTYUIOPASDFGHJKLZXCVBNMabcdefghigklmnopqrstuvwxyz123456789';
$length: str-length($str);

@function randomLinear($count) {
    $value: '';
    
    @for $i from 0 through ($count - 1) {
        $value: $value + randomColor() + string.unquote(" 0 #{$i * 25}px,");
    }
    
    @return linear-gradient(string.unquote(#{$value}) randomColor() 0 100%);
}
@function randomColor() {
    @return rgb(randomNum(255), randomNum(255), randomNum(255));
}
@function randomChar() {
    $r: random($length);
    @return str-slice($str, $r, $r);
}
@function randomChars($number) {
    $value: '';

    @if $number > 0 {
        @for $i from 1 through $number {
            $value: $value + randomChar();
        }
    }
    @return $value;
}

div {
    position: relative;
    width: 25px;
    height: 350px;

    &::before {
        content: randomChars(14);
        position: absolute;
        font-family: monospace;
        background: randomLinear(14);
        background-clip: text;
        color: transparent;
        text-align: center;
        font-size: 25px;
        width: 25px;
        line-height: 25px;
    }
}

这样,每次 div 内的文字,都是从上面 SASS 函数中 $str 变量中随机取的:

接下来,我们需要实现文字的随机跳变,也很好做,我们需要在一开始,随机生成多个不同的 content,然后,借助 CSS 动画,进行切换。

div {
   &::before {
        content: randomChars(14);
        --content1: "#{randomChars(14)}";
        --content2: "#{randomChars(14)}";
        --content3: "#{randomChars(14)}";
        --content4: "#{randomChars(14)}";
        animation: contentChange 1s infinite;
    }
}

@keyframes contentChange {
    20% {
        content: var(--content1);
    }
    40% {
        content: var(--content2);
    }
    60% {
        content: var(--content3);
    }
    80% {
        content: var(--content4);
    }
}

这里,我们一次生成了 5 个 content,其中 4 个用 CSS 变量保存了起来,随后,在 CSS 动画中,利用提前生成好的 content,进行字符内容的替换,此时,整个效果如下:

随机内容有了,单个字体颜色不一样有了,就差颜色的随机跳变动画了,这个也非常好做,我们在多篇文章也提及过,利用 filter: hue-rotate() 可以快速实现内容的颜色切换。

div {
    animation: colorChange 1s steps(12) infinite;
}
@keyframes colorChange {
    100% {
        filter: hue-rotate(360deg);
    }
}

我们利用了 filter: hue-rotate() 加上了步骤动画(steps),成功的实现了颜色的跳变!效果如下:

当然,我们最终要实现的是整个面随机颜色加上随机文字的跳变动画,只需要在上述的基础上,利用 SASS 函数,循环重复多列操作即可。基于上述所有内容的铺垫,我们最终的单个面下的动画效果代码如下:

<div class="g-container">
  <div></div>
  // ... 一个 32 个子 div
  <div></div>
</div>
@use "sass:string";

$str: 'QWERTYUIOPASDFGHJKLZXCVBNMabcdefghigklmnopqrstuvwxyz123456789';
$length: str-length($str);
$size: 25;
$count: 41;

@function randomNum($max, $min: 0, $u: 1) {
    @return ($min + random($max)) * $u;
}

@function randomLinear($count) {
    $value: '';
    
    @for $i from 0 through ($count - 1) {
        $value: $value + randomColor() + string.unquote(" 0 #{$i * 25}px,");
    }
    
    @return linear-gradient(string.unquote(#{$value}) randomColor() 0 100%);
}

@function randomColor() {
    @return rgb(randomNum(255), randomNum(255), randomNum(255));
}

@function randomChar() {
    $r: random($length);
    @return str-slice($str, $r, $r);
}

@function randomChars($number) {
    $value: '';

    @if $number > 0 {
        @for $i from 1 through $number {
            $value: $value + randomChar();
        }
    }
    @return $value;
}

body,
html {
    width: 100%;
    height: 100%;
    background: #000;
    font-family: monospace;
}

.g-container {
    position: relative;
    width: 800px;
    height: 800px;
    display: flex;
    animation: colorChange 1s steps(12) infinite;
    
    div {
        position: relative;
        width: #{$size}px;
        height: 800px;
        flex-shrink: 0;
        
        &::before {
            position: absolute;
            inset: 0;
            text-align: center;
            font-size: #{$size}px;
            width: #{$size}px;
            text-align: center;
            line-height: #{$size}px;
            color: transparent;
        }
    }
    
    @for $i from 1 to $count {
        div:nth-child(#{$i}) {
            &::before {
                content: randomChars(32);
                --content1: "#{randomChars(32)}";
                --content2: "#{randomChars(32)}";
                --content3: "#{randomChars(32)}";
                --content4: "#{randomChars(32)}";
                animation: contentChange 1s infinite;
                background: randomLinear(32);
                background-clip: text;
            }
        }
    }
}
@keyframes colorChange {
    100% {
        filter: hue-rotate(360deg);
    }
}
@keyframes contentChange {
    20% {
        content: var(--content1);
    }
    40% {
        content: var(--content2);
    }
    60% {
        content: var(--content3);
    }
    80% {
        content: var(--content4);
    }
}

这样,我们就成功的实现了单个平面下的,颜色随机,文字随机,且不断变化的动画效果:

实现立体效果

有了上面的立方体和单个平面的效果,要实现立体效果就不难了。我们尝试将两者结合起来。

改造原有的立方体结构,大致改成如下形式:

.perspective
    .container
        .g-panel
            -for(var i=0; i<32; i++)
                div
        .g-panel
            -for(var i=0; i<32; i++)
                div
        .g-panel
            -for(var i=0; i<32; i++)
                div
        .g-panel
            -for(var i=0; i<32; i++)
                div
        .g-panel
            -for(var i=0; i<32; i++)
                div

上面采用了 PUG 模板引擎来简化代码,编译后的效果如下:

<div class="perspective">
  <div class="container">
    <div class="g-panel">
      <div></div>
      // ... 32 个
      <div></div>
    <div class="g-panel">
      <div></div>
      // ... 32 个
      <div></div>
    <div class="g-panel">
      <div></div>
      // ... 32 个
      <div></div>
    <div class="g-panel">
      <div></div>
      // ... 32 个
      <div></div>
    <div class="g-panel">
      <div></div>
      // ... 32 个
      <div></div>
  </div>
</div>

这里,我们只需要实现 5 个面的立方体即可(前后左右以及上方)。

每个 .g-panel,实现一个我们上面铺垫的单面文字跳变效果,这样,我们就能得到这么一个立体的 3D 立方体动画效果:

接下来,我们只需要稍加调试,通过控制 perspective 和 transform: translateZ() 控制视觉上的纵深,将画面的视角放置于整个立方体之中,即可得到这么个效果:

好,最后,我们模拟文章开头拉斯维加斯球的效果,让顶部的平面,向下运动,实现一种天花板往下掉的动画效果,最终,我们即可使用纯 CSS,大致模拟出整个效果:

由于 GIF 录制问题,实际效果会比 GIF 展示效果更为震撼。

话说:工欲善其事,必先利其器!对于绘制几个图形也是如此,选择一个好的绘图软件将会令你事半功倍,快速绘制出各种各样的几何图形。为了方便大家的使用,小编在这里收录了各类专业几何图像设计工具,不仅仅可以辅助你的工作学习,还可以方便你制作各类数学几何图形类课件来方便教学。



一、几何画板

几何画板是由美国Key Curriculum Press公司制作并出版的优秀教育软件,1996年该公司授权人民教育出版社在中国发行该软件的中文版。它是一个通用的数学、物理教学环境,提供丰富而方便的创造功能使用户可以随心所欲地编写出自己需要的教学课件。其功能非常强大,可以说是最出色的教学软件之一,软件获取地址参考:http://www.jihehuaban.com.cn/xiazai.html

正如其名“21世纪动态几何”,它能够动态地展现出几何对象的位置关系、运行变化规律,是数学与物理教师制作课件的“利剑”!该软件界面简洁,易于操作,由题标栏、菜单栏、工具栏、状态栏、绘图窗口和记录窗口等组成。工具栏依次是选择工具(实现选择,及对象的平移、旋转、缩放功能)、画点工具、画线工具、画圆工具、文本工具和对象信息工具。在选择工具和画线工具按钮上按住鼠标左键停留片刻,会弹出更多的类型工具;选择对象的方法可以选择点按、按Shift点按或拖动等方式选中对象。



二、几何图形计算软件

几何图形计算软件是一款面建筑工程常用几何图形计算软件,可以快速计算出几何图形的体积、表面积以及侧表面积,支持长方体、交叉圆柱体、棱台、棱锥、球、球带体、球缺等几何图形的计算,并且使用非常简单,只需输入相关数据即可以及给出结果,方便实用。



三、Z+Z智能教育平台

Z+Z智能教育平台是为我国基础数学教育量身定做的数学教育软件,是知识性和智能型相结合的、多功能的教育工具平台,包括超级画板、立体几何、网络画板等软件。适合于中学数学、物理教师进行课件制作、课堂演示以及课题研究的工具平台,也是一套适合于学生开展动手实践、自主探索、合作交流的学科实验室。



四、PhysicsEditor (box2d形状编辑器)

PhysicsEditor是一款box2d形状生成器,只需点点鼠标即可生成plist图形文件,还有很有特色的魔术棒工具,可自动完成标记定点和分隔polygon的过程。。该工具属于物理属性的编辑器,相当纯净,附带的Helper文件,可以且仅仅帮我管理shape和物理属性,不负责bodydef, fixturedef的代码,这可以让设计更加灵活随意。它最强的地方在于魔术棒工具,上面那个杯子的shape顶点,只需要点一下魔术棒就自动完成了标记顶点和分隔polygon的过程。



五、几何表达式

几何表达式是一款世界领先的交互式符号几何系统。几何图形可以按符号约束或者数字领域进行定义。绘图上的测量与计算不再是唯一的单纯的近似数字了(世界上大多数乃至几乎全部的软件对于度量与计算都是这样的),它可以是精确的明确符号或公式,相当于数学式子的推导。通过参数、符号来定义轨迹可以为您的绘图带来强大的生命力。

几何表达式可以作为一个单独程序使用,或者通过 MathML 输入和输出,与您所喜爱的数学系统配合使用,当然还可以把几何表达式作为您的代数系统的平面几何软件,或者考虑把该软件作为几何系统的代数扩展,也可考虑把该软件作为数学方面互不干预的独立系统。





以上就是当下比较流行的几款几何图形绘图软件,每个软件的优点不同,使用的侧重点也不一样,大家在使用的时候可以自行选择,希望以上整理对大家有帮助。

文立体排版由纯代码构建

内容为教师节主题排版设计

文末有教师节设计素材福利

想学更多 H5 硬技术?点击报名▼

是赋

轻我

风桨

,叶

土我

壤枝

,芽

福教

您师

,节

绝大多数新媒体排版,只在二维平面上展开视觉体。本期,我们为各位品牌主介绍两种让画面更呼之欲出的三维立体排版法。

低面多边形设计

普通的图片之所以不立体,是因为:

  • 画质被微信压缩,立体保真度降低;

  • 用户无法与图像互动,无法触手可得;

若要图像完全无损,我们很容易想到采用 JZ 和微信团队共同推出的 SVG 高级解决方案。但是 JZ 曾在《SVG 交互式图文的系统适配与优化问题》提醒过读者们,SVG 在微信图文内并不支持渐变。

而「渐变」似乎又是立体内容的标配之一:因为在光照渲染之下,物体必然有大量渐变的效果存在。

有没有折衷的办法?如果你是设计师出身,或许就会想到 LOW POLY 设计(低面多边形)。由于这种三维表现手法中,一切事物都又多个连续平面(四边形或三角形)组合而成,所以单个平面上的光照分布基本均匀,可以不存在渐变关系,但整体上依旧提供了超强的立体感官。

以下为部分低面多边形设计范例▼

立体感十足吧?而且制作这类图像的方式并不算太难,如果你熟悉 C4D(Cinema 4D)的话,可以现在软件内构造好模型。

接下来,第一种方式是在「TAGS」中生成模型的素描材质球▼

并且将对线条的设置,调整为「边沿」而不是「边缘」▼

当然如果你想利用其表面填充也无妨,随后在 C4D 中导出为 AI,并获得如下结构。并基于你的设计能力进行逐步的色彩还原▼

当然,对于结构简单的模型,我们也可以偷个懒,直接从 C4D 烘焙出一张位图效果,随后通过 AI 的描摹形成矢量稿,最终通过 SVG 代码的方式注入图文中。

当然更重要的是,要给低面多边形设计内容预留交互内容。比如在本文的示范中,小风车通过点击太阳可以开始转动,就让用户有了触手可得的体验。

CSS 文本立体设计

我们要介绍的第二种三维立体微信图文排版则和文字有关,这个设计相对来说也更广为人知一些。

文字(可选中的 TEXT 形态)立体设计有如下要点:通过<text-shadow>连续叠加形成文字“厚度”;通过<text-shadow>连续柔化形成文字“阴影”;如果需要产生视角倾斜的话,通过<transform:skew>视情况变形;

如果手动调这些参数,有时候效率比较低,这里推荐一个可视化调控工具▼

http://tools.jb51.net/aideddesign/css3_textshadow

因而一个常规的文本阴影通常按如下方式书写。三位数分别表示水平偏移、垂直偏移、和模糊半径:

text-shadow:1px -1px 0px #333333;

而设计立面文字,其实并没有真的使文字立体,而是通过给文字连续排列多重无模糊阴影,而在视觉上形成立体(iPaiban 有非倾斜立面字的基本模板可用):

<section style="margin:0.5rem auto;">

<section style="width:100%;

text-align: center;

transform:skew(0deg,30deg);

padding:1rem;

box-sizing: border-box;

font-size: 1rem;

line-height: 1.5;

height:auto;

overflow:hidden;

color: #fff;

text-shadow:0.5px -1px 0 #ddd,

0.5px -1.1px 0 #dadada,

0.5px -1.2px 0 #ccc,

0.5px -1.3px 0 #cacaca,

0.5px -1.4px 0 #aaa,

1px -1px 1px rgba(0,0,0,.1),

1px -3px 5px rgba(0,0,0,.3),

1px -5px 7px rgba(0,0,0,.2),

1px -7px 9px rgba(0,0,0,.25),

1px -9px 11px rgba(0,0,0,.2),

1px -19px 21px rgba(0,0,0,.15);

">

<p style="margin: 0px; text-align: center;">

<span style="font-size: 1rem;">测</span>

</p>

<p style="margin: 0px;">

<span style="font-size: 1rem;">试</span>

</p>

<p style="margin: 0px;">

<span style="font-size: 1rem;">范</span>

</p>

<p style="margin: 0px;">

<span style="font-size: 1rem;">例</span>

</p>

<p style="margin: 0px; text-align: center;">

<br/>

</p>

<p style="margin:0">

<br/>

</p>

</section>

</section>

其中,形成立面的效果是如下五个阴影,距离越来越远,颜色越来越深:

text-shadow:0.5px -1px 0 #ddd,

0.5px -1.1px 0 #dadada,

0.5px -1.2px 0 #ccc,

0.5px -1.3px 0 #cacaca,

0.5px -1.4px 0 #aaa,

而另外的阴影效果则是:

1px -1px 1px rgba(0,0,0,.1),

1px -3px 5px rgba(0,0,0,.3),

1px -5px 7px rgba(0,0,0,.2),

1px -7px 9px rgba(0,0,0,.25),

1px -9px 11px rgba(0,0,0,.2),

1px -19px 21px rgba(0,0,0,.15);

十分易于理解的 CSS 表达。

素材福利

当然考虑到一般品牌主的教师节 Digital 营销设计计划,本期我们提供了一组更通用的教师节素材打包提供免费下载▼

如需下载

请向公众平台回复关键字

「教师节」

获取

通过 SVG 交互设计、低面多边形设计、CSS 渲染,平面化的图文有了显著的三维效果。这种设计可以应用于大量场景设计,包括可以产生立面二维码、立体游戏流程、立体产品展示等,也可以尝试应用入 H5 设计中。第七期 JZ 主持的 H5 杀手训练营(零基础准入)即将举办,可以点击下方小程序链接了解▼

其他你会感兴趣的内容

回复 排版入门专业级新媒体排版技术

回复 广告阅读更多广告营销行业指南

回复 漫威获取漫威片头 AE 速成模版

回复 汉仪获取字库免费试用优质字体

回复 多边形下载低面多边形背景素材

H5、平面、视频等数字营销服务请致电

TEL:(021)3721 8818

合作客户:APEC 峰会 | 中国航天科技集团 | 香奈儿 | 肯德基(湖南) | 中国国际航空 | 湖北省电视台 | 河南卫视 | 浙江省人民广播电台 | 三生制药 | 交通银行 | 建设银行 | 真格基金 | 南方周末 | 上海闵行教育学院 | 牛津大学出版社 | 新东方集团 | 伟巴斯特 | 雪佛兰汽车 | 观致汽车 | 雷诺汽车 | TNS 新华信 | 高力国际|第一太平戴维斯|德国莱茵|盖茨基金会|追星集团