内容
过渡链接是一种吸引用户注意力的好方法，尤其是当链接链接进行了不寻常的操作或原始操作时。中间孩子有一个很好的效果，很少见到其他地方，它捕获每个字母并用动画将它们分开，当访客将鼠标悬停在单词上时，动画就会生效。动画有助于传达三明治品牌的趣味性。
在本文中，我们向您展示如何在您的网站上重新创建效果。要获得更多启发，请参阅我们的最佳CSS动画示例指南（以及有关如何进行编码的说明）。如果有所不同，请尝试使用顶级网站构建器或我们选择的最佳云存储。而且，如果您要使网站变得更加复杂，请确保您的网络托管服务已到位。
01.悬停文字效果
Middle Child网站上最出色的文字效果之一是菜单上的翻转效果，其中字母在文字上分开并略微旋转。首先使用一些简单的HTML标记。
02.创建CSS
使用单独的CSS文件或样式标签来添加以下CSS规则，并通过确保正文和包装器占据可用的全部高度来使页面填充浏览器的整个尺寸。
身体{宽度：100％；高度：100％;边距：0;填充：0; } .wrapper {display：grid;高度：100％; }
03.放置单词
这 单词 类将单词置于网格的中心。给出的任何文本 单词 类可以对此应用。这 向上 该类将应用于所有其他字母，并且它们将向上移动。
.word {font-size：3em;保证金：自动自动; } .word .up {display：inline-block;转换：translate3d（0px，0px，0px）rotation（0deg）;过渡：所有0.5s缓进缓出； }
04.以上
现在 下 该课程与以下课程具有非常相似的设置 向上 但悬停显示的是向上移动 向上 滚下。向上还会略微旋转以增强外观。
.word .down {display：inline-block;转换：translate3d（0px，0px，0px）rotation（0deg）;过渡：所有0.5s缓进缓出； } .word：hover .up {transform：translation3d（0px，-8px，0px）rotation（12deg）;颜色：＃058b05}
05.徘徊
当用户将鼠标悬停在文本上方时，down类将文本向下移动。稍后在JavaScript中，文本将被拆分为单独的跨度，而这些类会自动添加到备用跨度中。
.word：hover .down {transform：translate3d（0px，8px，0px）rotation（-12deg）;颜色：＃058b05; }
06.自动为人
必须将每个字母与不同的类交替放置，这有点麻烦，因此我们将通过让JavaScript查询选择器并获取每个字母来使该过程自动化。在这里 力量 变量在循环遍历文本时获取当前字母。
script> var elements = document.querySelectorAll（’.word’）; for（var i = 0，l = elements.length; i l; i ++）{var str = elements [i] .textContent; elements [i] .innerHTML =‘’;
07.添加交替类
现在，另一个循环将每个字母放在其自己的span元素中，并添加 向上 或者 下 跨度。如果您在浏览器中查看此内容，您会看到文本在稍微旋转的同时按字母上下分开。
您可以在“中间儿童”网站上看到实际效果。
for（var j = 0，ll = str.length; j ll; j ++）{var spn = document.createElement（’span’）; elements [i] .appendChild（spn）; spn.textContent = str [j];令pos =（j％2）？ ‘up’：‘down’； spn.classList.add（pos）; }} / script>
本文最初发表在“创意网站设计”杂志上 网站设计者.购买第286期 或者 订阅.
