内容
《加拿大Jam3失落的爱情》是一本精美的深色，可移动设备阅读的互动式诗歌，真挚地表达了对失去的爱情的恒久感情。网站布局是使用HTML5构建的，并带有GSAP库来为其动画提供动力，其最引人注目的功能之一就是其动画3D文字，这确实使Love Lost的诗歌栩栩如生。
- 制作交互式3D排版效果
它看起来像是地狱般令人印象深刻，并且不难融入您自己的作品中以创建引人入胜的用户体验；这是完成的方式。
想建立自己的吸引力网站吗？尝试使用网站构建器工具，并通过选择合适的网络托管服务来使一切平稳运行。
01.启动HTML文档
第一步是定义HTML文档的结构。这包括用于初始化文档的HTML容器，该容器包含head和body部分。头部分主要用于加载外部CSS文件时，主体部分将存储在步骤2中创建的可见页面内容。
！DOCTYPE html> html> head>标题> 3D Text Movement / title> link rel =“ stylesheet” type =“ text / css” href =“ styles.css” /> / head> body> * * * STEP 2在这里/ body> / html>
02.可见的HTML内容
可见的HTML内容由包含可见文本的文章容器组成。文章容器的重要部分是“数据动画”属性，CSS会引用该属性以应用视觉效果。文章内的文字是使用h1标签制作的，表示内容是页面的主要标题。
article data-animate =“移入”> h1>您好！/ h1> / article>
03. CSS初始化
创建一个名为“ styles.css”的新文件。第一组说明将页面的HTML容器和正文设置为黑色背景，并且没有可见的边框间距。白色也被设置为页面上所有子元素要继承的默认文本颜色。避免使用默认的黑色文本使内容看起来不可见。
html，body {背景：＃000;填充：0;边距：0;颜色：#fff; }
04.动画容器
使用“数据动画”属性引用的内容容器已应用了特定的样式。使用vw和vh测量单位将其尺寸设置为与屏幕的整个尺寸相匹配，并略微旋转。应用了名为“ moveIn”的动画，该动画将持续20秒钟，并将无限重复。
[data-animate =“ moin in”] {职位：相对；宽度：100vw;高度：100vh；不透明度：1；动画：moveIn 20s无限；文本对齐：居中；变换：rotate（20deg）; }
05.动画启动
上一步中引用的“ moveIn”动画需要使用@keyframes进行定义。从动画的0％开始的第一帧设置默认字体大小，文本位置和可见阴影。此外，该项目的不透明度设置为零，因此一开始是不可见的，即。显示在视线之外。
@keyframes moveIn {0％{font-size：1em;左：0；不透明度：0；文本阴影：无； } * * *步骤6此处}
06.动画进入视野
在动画中将下一帧放置在10％的位置。此框架将不透明度设置为完全可见，从而使文本逐渐变为可见的动画。此外，还添加了多个带有蓝色的阴影，并减小了颜色值，以使文本具有3D深度的错觉。
10％{不透明度：1；文本阴影：.2em -.2em 4px＃aaa，.4em -.4em 4px＃777，.6em -.6em 4px＃444，.8em -.8em 4px＃111; } * * * STEP 7此处
07.完成动画
最终的帧出现在动画的80％处并且在动画的最后。这些负责增加字体大小并将元素向左移动。新设置也适用于文本阴影，以使其朝动画方向移动，同时还使文本从80％到100％的帧淡出视线。
80％{字号：8em;左：-8em;不透明度：1； } 100％{font-size：10em;左：-10em;不透明度：0；文本阴影：.02em -.02em 4px＃aaa，.04em -.04em 4px＃777，.06em -.06em 4px＃444，.08em -.08em 4px＃111; } * * *
注意：无论您正在进行什么项目，拥有可应付的云存储都是必不可少的（我们的指南会有所帮助）。
本文最初发表于创意网站设计杂志Web Designer的第273期。 在这里购买第273期 或者 在此处订阅Web Designer.
