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

    效果图

    070b7e029562477495bf0dfed90a864e.pnga0aaabd189a543c19b3b4960299b5e76.pngfd43f7fb5dad4a88a16b60cadf17674e.png68bc555eb9904289aa6528ead1ff3d7c.png

     

    总结

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

     

     

     

  • 相关阅读:
    STM32,复位和时钟控制
    Spring源码--Bean的加载
    【转】iOS消息推送机制
    Go 代码块与作用域,变量遮蔽问题详解
    数据库索引面试的相关问题
    JSP out.println()方法具有什么功能呢?
    微型计算机原理1
    Docker简单案例
    短视频矩阵-同城霸屏-一站式管理1000+多平台短视频账号
    【深度学习】笔记3-神经网络的学习
  • 原文地址:https://blog.csdn.net/qq_70814008/article/details/137299954