Html 如何向文本添加过渡？

我正在尝试向我的网页添加转换。我希望标题中的文本与来自Mineplex站点的标题中的文本相同：。我想让它的文本成为突出显示从底部到顶部。我试过自己做，但失败了。如果有人能帮忙，非常感谢！克拉夫德

这是我的HTML：

---

你的CSS真的需要一些帮助。。。那里有很多重复和重叠。我建议在尝试添加新内容之前，先清理一下

如果有帮助，以下是负责mineplex.com上转换的CSS：

#top ul a:nth-child(-n+2):after, #top ul a:nth-child(n+4):after {
   position: absolute;
   content: "";
   width: 100%;
   height: 0%;
   left: 0;
   bottom: 0;
   z-index: -100;
   background: #63cae3;
   transition: height ease-in-out 0.5s;
}

---

：after选择器在导航栏中的链接后插入内容。高度、宽度、左侧、底部和背景属性都非常简单。“位置”（position）和“z索引”（z-index）属性将新内容放在链接文本后面，而“过渡”（transition）属性则是动画的责任所在。您可以阅读更多相关内容并进行实验。

要实现与链接的悬停效果相似的悬停效果，您可以使用：

-webkit-transition: 0.5s ease;

这增加了一个很好的平滑效果，可以用来调整div高度。这将创建您想要的效果

---

我拼凑了一个JSFIDLE项目的例子来更好地展示我的意思。您可以发现，

可以通过在以下位置设置重复线性渐变背景位置的动画来实现此目的：以这种方式悬停：

身体{ 背景图片：url'images/image.png'； 颜色：000305； 字体大小：87.5%； /*基本字体大小：14px*/ 字体系列：'Trebuchet MS'，Trebuchet'，Lucida Sans Unicode'，'Lucida Grande'，'Lucida Sans'，Arial，Sans serif； 线高：1.429； 保证金：0； 填充：0； 文本对齐：左对齐； } a{ 大纲：0； } img{ 边界：0px； 文字装饰：无； } a:链接，a:已访问{ 颜色：CF5C3F； 填充：0 1px； 文字装饰：无； } a:悬停，a:活动{ 背景色：CF5C3F； 颜色：fff； 文字装饰：无； } .main标题导航{ 背景：666人； 字号：1.143em； 高度：40px； 线高：30px； 保证金：0自动； 文本对齐：居中； 边界半径：5px； 左边距：-40px； } .mainHeader导航ul{ 列表样式：无； 保证金：0自动； 宽度：430px； } .main头导航ul li{ 显示：内联块； 垂直对齐：顶部； } .mainHeader导航a:链接，.mainHeader导航a:已访问{ 颜色：fff； 显示：内联块； 高度：30px； 填充：5px23px； 文字装饰：无； } .mainHeader导航a:悬停，.mainHeader导航a:激活，.mainHeader导航.active a:链接，.mainHeader导航.active a:已访问{ 颜色：fff； } .main头导航李a{ 背景：-webkit-repeating-linear-Gradient666666666641px、FF9317 41px、FF9317 82px； 背景：-moz-repeating-linear-gradient666666、666666 41px、FF9317 41px、FF9317 82px； 背景：重复线性梯度666666，666666 41px，FF9317 41px，FF9317 82px； 背景大小：100%200%； -webkit转换：所有1； -moz转换：所有1； 过渡：均为0.5s； } .main标题导航a：悬停{ 背景位置：0px-40px； } .主收割台导航ul li h1{ 高度：40px； 线高：10px； 左边距：10px； 右边距：10px； } 手工艺

---

谢谢通过清理，您的意思是将.topsidebar、.middlesidebar和.bottomsidebar更改为：.topsidebar、.middlesidebar、.bottomsidebar{width:24%；float:left；margin left:2%；border radius:5px；-moz border radius:5px；-webkit border radius:5px；背景色：EBE4DD；padding:2%3%；}，等等？我的意思是使用选择器main header img两次，属性几乎相同。是的，看起来好多了！有没有办法将线性渐变分开，这样它们就不会相互接触？@CraftdMC-你是什么意思？@CraftdMC-你是指lis之间的边距？@CraftdMC-只需将左边边距：5px和右边边距：5px添加到.main header nav ul li。演示-->。还编辑了我的答案。是的。此外，当我尝试将文本放在Gallery和About之间时，就会发生这种情况。

#top ul a:nth-child(-n+2):after, #top ul a:nth-child(n+4):after {
   position: absolute;
   content: "";
   width: 100%;
   height: 0%;
   left: 0;
   bottom: 0;
   z-index: -100;
   background: #63cae3;
   transition: height ease-in-out 0.5s;
}

-webkit-transition: 0.5s ease;

.mainHeader nav li a {
    background: repeating-linear-gradient(#666666, #666666 50%, #FF9317 50%, #FF9317 200%);
    background-size: 100% 200%;
    transition: all 0.5s;
}
.mainHeader nav a:hover {
    background-position: 0px -40px;
}