使用HTML和CSS创建具有名称的高档装载机-DEV365 开发者社区

简介：

在本教程中，我们将探讨如何使用HTML和CSS创建使用名称的时尚装载机。该装载机由一个旋转的外圈，一个内圆和代表名称的变化字母组成。在本教程结束时，您将拥有一个可以在网络项目中使用的漂亮装载机。

先决条件：

在开始之前，请确保您对HTML和CSS有基本的了解。另外，请确保您在计算机上安装了文本编辑器和Web浏览器。

步骤1：设置HTML结构：
首先创建一个新的HTML文件并添加以下代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Loader..</title>
    <!------- linking CSS file to the HTML file --------->
    <link href="loader.css" type="stylesheet">
 </head>
<body>

    <div class="container">
        <div class="circle"></div>
        <div class="inner-circle"></div>
        <div class="letter" id="letter"></div>
    </div>

</body>
</html>

在此代码中，我们有一个容器div，可以容纳装载机元素：外圆，内圆和字母。

。

步骤2：用CSS造型装载机：
接下来，让我们使用CSS为装载机设计。将以下代码添加到HTML文件的<style>部分或创建单独的CSS文件并将其链接到您的HTML，如HTML代码的第6行所示：

@import url('https://fonts.googleapis.com/css2?family=Train+One&display=swap');

* {
    box-sizing: border-box;
}

body {
    background: #000000;
}

.container {
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.circle {
    position: relative;
    height: 100px;
    width: 100px;
    border-radius: 50%;
    border: solid 4px #fff;
    padding: 15px;
}

.inner-circle {
    position: absolute;
    height: 80px;
    width: 80px;
    border: solid 2px #000;
    border-radius: 50%;
    border-right-color: #fff;
    animation: rotate 2s infinite linear;
}

.letter {
    position: absolute;
    height: 60px;
    width: 60px;
    border-radius: 50%;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    font-weight:;
    color: #fff;
    font-family: 'Train One', cursive;
}

.letter::before {
    content: "";
    animation: name 8s infinite linear;
}

@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes name {
    0%, 100% {
        opacity: 1;
        content: "A";
    }
    12.5% {
        opacity: 0;
    }
    25% {
        opacity: 1;
        content: "J";
    }
    37.5% {
        opacity: 0;
    }
    50% {
        content: "A";
        opacity: 1;
    }
    62.5% {
        opacity: 0;
    }
    75% {
        content: "Y";
        opacity: 1;
    }
    87.5% {
        opacity: 0;
    }
}

在此CSS代码中，我们定义了容器，圆，字母和动画键框的样式。我们还从Google字体中导入“训练一个”字体。

步骤3：了解CSS代码：
让我们浏览CSS代码的关键部分：

容器类设置容纳装载器的主容器。它使用flexbox将元素垂直和水平居中。
圆形类创建了加载程序的外圈。它具有固体白色边框，相对于容器定位。
内部圆形类创建旋转的内圆。它具有较小的尺寸，并且绝对放置在外圈内。旋转动画被应用以使其连续旋转。
字母类代表加载程序中变化的字母。它是一个绝对位于外圈内的圆形元件。名称动画用于根据定义的密钥帧更改字母。
名称动画负责以特定的间隔更改字母。在此示例中，它以不同的密钥帧百分比在字母“ A”，“ J”和“ Y”之间过渡。

步骤4：测试加载器：
保存您的HTML文件并将其打开在Web浏览器中。您应该看到带有旋转圆圈的装载机，并更改代表名称为“ Ajay”的字母。随意修改动画键框并将名称调整为您的喜好。

结论：

在本教程中，我们学会了如何使用HTML和CSS创建使用名称的高档装载机。该加载程序可用于在等待内容加载时增强用户体验。尝试不同的动画效果，颜色和字体，以自定义加载程序以匹配项目的样式。您还可以使用JavaScript进行动态加载方案探索将该加载程序集成到Web应用程序中。

我希望您对此教程有所帮助！开始在您的Web项目中使用此精美的加载程序，并给您的用户留下持久的印象。愉快的编码！