使用 HTML 更改“Hello World”的边框

编写一个 hello world 程序意味着你已经开始学习这门语言了。 hello world 程序的下一步应该是即兴创作。在本文中，我们将看到如何使用 HTML 和 CSS 创建一个简单的 hello world 程序，但会更改文本边框。阅读直到最后找到奖励的想法。

了解颜色：

我们将使用红色、黄色和蓝色的原色。除此之外，我们还将添加绿色作为我们的第四种颜色。

funfact：大多数公司更喜欢在其徽标中使用原色，以获得各种不同的优势

步骤1：

创建将输出显示为 hello world 的 HTML 文件

HTML code for hello world project

你可以省略 类=“容器流体” 因为这涉及引导程序。我们现在不需要那个。

第2步：

创建 CSS 文件。我们将使用动画来处理连续的边界变化。

Properties applied to text ‘hello world’

为了使文本看起来更加粗体和增强，我们对其应用了不同的格式。将其对齐到中心，增加大小，更改字体。文本本身是黑色的，因为我选择的背景颜色也是黑色的，并且边框会更加明显。我们将动画循环到无限，因为我们不希望它停止。让我们添加关键帧，通过这些关键帧我们实际上可以告诉浏览器何时该做什么以及该做什么。

Different color setting for different time interval

使用上面的代码，我们不断地单独改变文本的左、上、右和下边框。时间设置为四个不同的间隔 [25%、50%、75%、100%（或）0%]。

让我们看看我们有什么！

First image

Second image

虽然我们只指定了四种颜色，但我们也看到了一些重叠和其他颜色的出现。这是关于原色的重要部分。原色能做什么是相当惊人的。尝试找出这些图片与代码相比是在哪个阶段捕获的。

奖金： 尝试与正文边框相同的效果，现在不仅您的文本而且外边框都在改变颜色。玩弄颜色，有一个巨大的海洋要学习。

Rotating Text and Body Border

上述项目的 Github 参考资料：
网站

github
链接素

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/5814/02090100