跳到主要内容

创建动画3D文本效果

失去爱情加拿大的JAM3是一首美丽的黑暗,移动就绪的互动诗,真实地讲述了失去爱情的持久感受。该网站布局是使用HTML5构建的GSAP图书馆为其动画提供动力,其最具视觉冲击力的特色之一就是它的动画3D文字真正将Love Lost的诗歌变为现实。

它看起来令人印象深刻,并不难融入你自己的工作来创造一个引人入胜的用户体验;这是怎么做的。

Love Lost's 3D text comes right out of the screen at the viewer

Love Lost的3D文字出现在观众的屏幕之外

01.启动HTML文档

第一步是定义HTML文档的结构。这包括启动文档的HTML容器,其中包含头部和主体部分。虽然head部分主要用于加载外部CSS文件,但body部分将存储在步骤2中创建的可见页面内容。

 3D文字运动 ***第2步在这里

02.可见的HTML内容

可见的HTML内容由包含可见文本的文章容器组成。文章容器的重要部分是'data-animate'属性,CSS将引用该属性来应用视觉效果。文章中的文字由h1标签构成,表示内容是页面的主标题。

你好!

03. CSS启动

创建一个名为“styles.css”的新文件。第一组指令将页面的HTML容器和主体设置为具有黑色背景,以及没有可见的边框间距。白色也被设置为页面上要继承的所有子元素的默认文本颜色;避免文本的默认黑色使内容看起来是不可见的。

html,body {background:#000;填充:0;保证金:0;颜色:#fff; }

04.动画容器

使用'data-animate'属性引用的内容容器应用了特定样式。它的大小设置为使用vw和vh测量单位匹配屏幕的完整大小,以及稍微旋转。应用一个名为“moveIn”的动画,该动画将持续20秒,并将无限重复。

[data-animate =“move in”] {position:relative;宽度:100vw;身高:100vh;不透明度:1;动画:20世纪无限移动; text-align:center;变换:旋转(20度); }

05.动画启动

上一步中引用的'moveIn'动画需要使用@keyframes定义。从动画的0%开始的第一帧设置默认字体大小,文本定位和可见阴影。此外,该项目设置为零不透明度,以便它最初不可见 - 即。显示在视野之外。

@keyframes moveIn {0%{font-size:1em;左:0;不透明度:0; text-shadow:none; } ***第6步此处}

06.动画进入视图

By using multiple shadows you can enhance the 3D effect

通过使用多个阴影,您可以增强3D效果

通过动画将下一帧放置在10%。此框架将不透明度设置为完全可见,从而使文本逐渐被动画化为视图。此外,使用蓝色和减少颜色值添加多个阴影,以向文本提供3D深度的幻觉。

10%{不透明度:1; text-shadow:.2em -.2em 4px #aaa,.4em -.4em 4px#777,.6em -.6em 4px#444,.8em -.8em 4px#111; } *** STEP 7在这里

07.完成动画

最终帧出现在80%和动画的最后。这些负责增加字体大小并向左移动元素。还会对文本阴影应用新设置以设置动画,同时还将文本从框架中淡出80%到100%。

80%{font-size:8em;左:-8em;不透明度:1; } 100%{font-size:10em;左:-10em;不透明度:0; text-shadow:.02em -.02em 4px #aaa,.04em -.04em 4px#777,.06em -.06em 4px#444,.08em -.08em 4px#111; } ***

本文最初发表于创意网页设计杂志Web Designer的第273期。在这里购买第273期要么在这里订阅Web Designer

相关文章:



翻译字数超限