在网站上添加炫酷的HTML效果的8种方法

194 阅读4分钟

为了让你开始使用一些很酷的HTML效果,我们汇编了这些免费的代码模板供你复制。它们将增强你网站的功能和用户体验,而不需要花费一分钱。虽然它们主要是HTML,但这些很酷的代码也可能包含一些CSS和PHP。

1.酷炫的HTML视差效果

你可能已经在有在线广告的网站上看到了视差效果。当你向下滚动一篇文章时,背景图片会以不同的速度滚动,或者出现一个广告。

或者,当你访问网站的不同部分时,背景图片也会发生变化。这是一个很酷的效果,为内容增加了视觉深度,即使你不懂基本的HTML代码,也可以添加。

你可以玩玩这个效果,并从W3Schools复制一个简单的视差滚动效果的代码。

在其最复杂的版本中,这种效果是HTML、CSS和JS的组合。

继续从CodePen获取上述页眉/页脚视差效果的代码。

2.可滚动的HTML评论框代码

这是一个简单而有用的HTML元素,可以让你把长的文本片段打包成一个紧凑的格式。这样它就不会占用页面上的全部空间。

你可以玩玩文本框的颜色和大小,使它符合你的需要。

输入。

<div style="width: 25%; height: 50px; overflow: auto; scrollbar-face-color: #CE7E00; scrollbar-shadow-color: #FFFFFF; br /scrollbar-highlight-color: #6F4709; scrollbar-3dlight-color:#11111; scrollbar-darkshadow-color: #6F4709; br /scrollbar-track-color: #FFE8C1; scrollbar-arrow-color: #6F4709;">

如果你想要一些更高级的东西,你也可以从Quackit获取可定制的评论框的代码。

在那里你会发现几个模板,但你也可以使用他们的编辑器来手动改变和测试(运行)你的自定义代码。

3.一个很酷的HTML技巧:突出显示的文本

通过一个简单的标签,你可以为你的文本或图像添加大量很酷的HTML效果。请注意,并不是所有的效果都能在不同的浏览器中使用。这里提到的效果可以在谷歌浏览器、微软浏览器和火狐浏览器中使用。

这个HTML文本效果突出了标签之间的文本。

输入。

<span style="background-color: #FFFF00>Your highlighted text here.</span>

输出演示。

4.在文本中添加一个很酷的背景图片的HTML代码

同样,你也可以改变文本的颜色或添加一个背景图片。如果文字的字体比较大,这个看起来很不错。

输入。

<span style="background-image: url(https://www.makeuseof.com/wp-content/uploads/2017/09/Background-Image.jpg); font-size: 20pt">MakeUseOf presents...</span>

通过在标签中为文本添加样式和字体元素,可以达到同样的效果。

输出演示。

5.添加标题工具提示的实用HTML技巧

当你用鼠标滚动到一块 "处理过的 "文本或图像上时,就会出现一个标题工具提示。你会看到网站上的图片、链接文本,甚至是桌面应用程序中的菜单项都使用了这种提示。使用这个HTML代码,可以在你的网页上为纯文本添加一个工具提示。

输入。

<span title="See, this is the tooltip. :)">Move your mouse over me!</span>

输出演示。

6.目前最酷的HTML技巧。滚动或下落的文本

当你在谷歌上搜索 "marquee html "时,你会发现一个小小的复活节彩蛋。看到顶部的滚动搜索结果计数了吗?那是一个由现在已经过时的marquee标签创造的效果。虽然这种曾经很酷的HTML文本效果已经被废弃,但大多数浏览器仍然支持它。

输入。

<marquee>I wanna scroll with it, baby!</marquee>

输出演示。

你可以进一步添加属性来控制滚动行为、背景颜色、方向、高度等。

例如,你可以用以下方式向左滚动。

<marquee 

把 "左 "换成 "右",就可以向相反的方向滚动文本。

另外,你甚至可以向上或向下滚动。

<marquee 

此外,marquee也有一个 "滑动 "行为,它限制了文本可以滚动的距离。然而,请注意;如果过度使用,这些效果可能会变得相当恼人。要想获得很酷的文字下落效果,请再次前往Quackit,复制他们高度定制的marquee代码。

7.用HTML建立一个很酷的开关菜单

最酷的HTML技巧是动态HTML效果。然而,它们往往是基于脚本的。这里有一个用于菜单的效果,你会同意它看起来非常滑稽。

它比一般的HTML标签要复杂一些,因为它与样式表和脚本一起工作。它的优点是,你不需要上传CSS或脚本文件来使它工作。相反,只需将动态驱动器的代码粘贴到网站的部分。

8.用Tableizer获得一个HTML电子表格

如果你想在你的网站上显示电子表格,让Tableizer!将你的数据转换成HTML表格。只要把Excel、Google Doc或任何其他电子表格的原始数据粘贴到tableizer.journalistopia.com的转换器工具中。调整表格选项,然后点击Tableize It来接收HTML输出。

这也许是你的网站最酷的HTML代码之一,因为Tableize It!做了所有的艰苦工作。

点击复制HTML到剪贴板,复制HTML代码并将其添加到你的网站。考虑编辑background-colors属性以获得更酷的效果。

虽然这不是真正的HTML效果,但它是相当方便的。

为你的网站提供更多很酷的HTML代码和效果

HTML、CSS和JavaScript的力量为你的网站提供了潜在的无限选择,以获得令人惊叹的效果。想要更多吗?

我们已经向你展示了八个很酷的HTML代码,你可以复制它们来增强你的网站。虽然不同,但只要你知道基本的HTML编码技术,它们都很容易实现。