• 【HTML】制作一个简单的三角形动态图形

    目录

    前言

    开始

    HTML部分

    CSS部分

    效果图

    总结

    前言

            无需多言，本文将详细介绍一段HTML和CSS代码，具体内容如下：

     6210937e3a644e908e510f46797fb442.pnge91dcc0901de4203aa1219081babef05.png

    开始

            首先新建文件夹，创建两个文本文档，其中HTML的文件名改为[index.html]，CSS的文件名改为[style.css]，创建好后右键用文本文档打开，再把下面相对应代码填入后保存即可。

    d2ff443751024176b9d551595bee35be.png

    HTML部分

            HTML部分的代码定义了一个包含加载动画的网页结构。文档类型声明为HTML5，并且页面的主要语言被设置为英语。在标签内，指定了字符编码为UTF-8，确保了网页可以正确显示各种语言的字符。网页标题被设置为“跳跃三角形装载机”，这个标题将显示在浏览器的标签页上。此外，还链接了一个名为“style.css”的外部CSS样式表，用于后续的样式定义。

      标签内包含了一个类名为“loader”的

    元素，这个容器用于创建加载动画。容器内有三个元素，它们将通过CSS样式和动画效果来实现跳跃的三角形装载机动画。

    1. html> 
    2. <html lang="en" >
    3.  
    4. <head>
    5.   <meta charset="UTF-8"> 
    6.   <title>跳跃三角形装载机title> 
    7.   <link rel="stylesheet" href="./style.css"> 
    8. head>
    9.  
    10. <body>
    11. <div class="loader"> 
    12.     <span>span> 
    13.     <span>span> 
    14.     <span>span> 
    15. div>
    16. body>
    17.  
    18. html>

    CSS部分

            CSS部分的代码主要负责定义网页的整体样式和加载动画的效果。首先，通过定义CSS变量--c，为页面指定了一个主题颜色，即橙色。

            对于标签，样式包括移除外边距和内边距，设置宽高为视口的100%，以及隐藏超出元素边界的内容。使用Flexbox布局确保了页面内容的居中显示。背景设置为从中心开始的径向渐变，从深灰色过渡到黑色，为加载动画提供了一个暗色调的背景。

            .loader类的样式设置了容器的大小、定位方式、布局以及背景。背景使用了圆锥渐变，从橙色过渡到白色，并且添加了多层阴影滤镜效果，以创建3D立体效果。

            .loader span类的样式定义了每个三角形元素的大小、定位、变换基点和旋转动画。通过animation属性，每个元素将无限循环地旋转，从而产生跳跃的效果。每个元素的变换基点不同，这是通过transform-origin属性来实现的，以确保三角形能够以正确的方式旋转。

            最后，@keyframes spin定义了名为“spin”的关键帧动画，它规定了动画的旋转过程，从60度旋转到300度，从而完成了三角形跳跃的视觉效果。

    1. :root {
    2.   --c: #ffa500; /* 定义一个CSS变量 --c，并赋予它一个颜色值 #ffa500，即橙色 */
    3. }
    4.  
    5. body {
    6.   margin: 0; /* 移除body元素的默认外边距 */
    7.   padding: 0; /* 移除body元素的内边距 */
    8.   width: 100vw; /* 设置body元素的宽度为视口宽度的100% */
    9.   height: 100vh; /* 设置body元素的高度为视口高度的100% */
    10.   overflow: hidden; /* 隐藏超出body元素边界的内容 */
    11.   display: flex; /* 使用Flexbox布局 */
    12.   align-items: center; /* 垂直居中Flex容器内的子元素 */
    13.   justify-content: center; /* 水平居中Flex容器内的子元素 */
    14.   background: radial-gradient(circle at 50% 50%, #252525, #010101); /* 设置body背景为从中心开始的径向渐变，从#252525过渡到#010101 */
    15. }
    16.  
    17. .loader {
    18.   width: 15vmin; /* 设置.loader容器的宽度为视口宽度的15% */
    19.   height: 15vmin; /* 设置.loader容器的高度为视口高度的15% */
    20.   position: relative; /* 设置定位为相对定位 */
    21.   display: flex; /* 使用Flexbox布局 */
    22.   align-items: center; /* 垂直居中Flex容器内的子元素 */
    23.   justify-content: center; /* 水平居中Flex容器内的子元素 */
    24.   background: conic-gradient(from 150deg at 50% 14%, var(--c) 0 60deg, #fff0 0 100%); /* 设置.loader背景为圆锥渐变，从150度开始，渐变颜色为定义的--c变量值和白色 */
    25.   filter: 
    26.     /* 以下一系列drop-shadow滤镜用于给.loader添加多层阴影效果，创建3D立体效果 */
    27.     drop-shadow(0.2vmin 0.2vmin 0vmin #bf7200) 
    28.     drop-shadow(0.2vmin 0.2vmin 0vmin #ab6701) 
    29.     drop-shadow(0.2vmin 0.2vmin 0vmin #9c5e01) 
    30.     drop-shadow(0.2vmin 0.2vmin 0vmin #8d5502) 
    31.     drop-shadow(0.4vmin 0.2vmin 0vmin #744602) 
    32.     drop-shadow(0.4vmin 0.2vmin 0vmin #5f3900) 
    33.     drop-shadow(0.4vmin 0.2vmin 0vmin #4d2e00) 
    34.     drop-shadow(0.4vmin 0.2vmin 0vmin #382200) 
    35.     drop-shadow(4vmin 3vmin 1vmin #0008);
    36. }
    37.  
    38. .loader span {
    39.   width: 100%; /* 设置span元素的宽度为.loader容器宽度的100% */
    40.   height: 100%; /* 设置span元素的高度为.loader容器高度的100% */
    41.   position: absolute; /* 设置定位为绝对定位，相对于最近的非static定位祖先元素 */
    42.   transform-origin: 100% 100%; /* 设置变换的基点为元素的右下角 */
    43.   transform: rotate(60deg); /* 初始旋转角度为60度 */
    44.   animation: spin 1.5s ease-in-out -1.245s infinite; /* 应用名为spin的关键帧动画，持续时间1.5秒，缓动函数为ease-in-out，延迟开始时间为-1.245秒，无限循环 */
    45.   background: conic-gradient(from 150deg at 50% 14%, var(--c) 0 60deg, #fff0 0 100%); /* 设置span背景为圆锥渐变，与.loader容器背景相同 */
    46. }
    47.  
    48. .loader span + span {
    49.   transform-origin: 0% 100%; /* 设置第二个span元素的变换基点为左下角 */
    50. }
    51.  
    52. .loader span + span + span {
    53.   transform-origin: 50% 14%; /* 设置第三个span元素的变换基点为右下角偏上 */
    54. }
    55.  
    56. @keyframes spin {
    57.   100% { transform: rotate(300deg); } /* 在动画的100%阶段，将span元素旋转至300度 */
    58. }

    效果图

    070b7e029562477495bf0dfed90a864e.pnga0aaabd189a543c19b3b4960299b5e76.pngfd43f7fb5dad4a88a16b60cadf17674e.png68bc555eb9904289aa6528ead1ff3d7c.png

     

    总结

            整体而言，这段代码通过HTML和CSS的结合，创建了一个具有视觉吸引力的加载动画。HTML部分构建了基本的网页结构和加载动画的容器，而CSS部分则负责实现动画的细节和效果。通过使用CSS变量、Flexbox布局、渐变背景和关键帧动画，这段代码展示了如何创建一个动态的、响应式的加载效果，增强了用户的交互体验。这种技术可以广泛应用于网页设计中，作为一个视觉反馈，告知用户数据正在加载，同时也为页面增添了现代感和吸引力。

     

     

     

  • 相关阅读:
    redis(封装jedis)-----面试
    zabbix学习3--zabbix6.x-proxy
    基于Mybatis-Plus实现Geometry字段在PostGis空间数据库中的使用
    C++位图简明介绍与实现
    Kubernetes1.16.0重置升级到1.22.2
    JWT 使用教程 授权 认证
    数据仓库扫盲系列（1）：数据仓库诞生原因、基本特点、和数据库的区别
    【JAVA】-- 简易超市管理系统窗口（四）（实现思路+每步代码）
    Qt 5.15集成Crypto++ 8.8.0（MSVC 2019）笔记
    Java注解-最通俗易懂的讲解
  • 原文地址：https://blog.csdn.net/qq_70814008/article/details/137299954