当前位置： 首页 > news >正文

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

news 2026/1/4 2:49:28

目录

前言

开始

HTML部分

CSS部分

效果图

总结

前言

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

 6210937e3a644e908e510f46797fb442.pnge91dcc0901de4203aa1219081babef05.png

开始

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

d2ff443751024176b9d551595bee35be.png

HTML部分

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

  <body>标签内包含了一个类名为“loader”的<div>元素，这个容器用于创建加载动画。容器内有三个<span>元素，它们将通过CSS样式和动画效果来实现跳跃的三角形装载机动画。

<!DOCTYPE html> <!-- 声明文档类型为HTML5 -->
<html lang="en" ><!-- 根元素，设置语言为英语 --><head><meta charset="UTF-8"> <!-- 设置字符编码为UTF-8，这是一种广泛使用的字符编码，可以显示大多数语言 --><title>跳跃三角形装载机</title> <!-- 网页标题，显示在浏览器标签上 --><link rel="stylesheet" href="./style.css"> <!-- 引入外部CSS样式表，位于同一目录下的style.css文件，用于定义网页样式 -->
</head><body>
<div class="loader"> <!-- 创建一个加载动画的容器 --><span></span> <!-- 第一个三角形 --><span></span> <!-- 第二个三角形 --><span></span> <!-- 第三个三角形 -->
</div>
</body></html>

CSS部分

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

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

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

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

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

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

效果图

070b7e029562477495bf0dfed90a864e.pnga0aaabd189a543c19b3b4960299b5e76.pngfd43f7fb5dad4a88a16b60cadf17674e.png68bc555eb9904289aa6528ead1ff3d7c.png

 

总结

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

 

 

 

相关文章：

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

目录 前言 开始 HTML部分 CSS部分 效果图 总结 前言 无需多言&#xff0c;本文将详细介绍一段HTML和CSS代码&#xff0c;具体内容如下&#xff1a; 开始 首先新建文件夹&#xff0c;创建两个文本文档&#xff0c;其中HTML的文件名改为[index.html]&#xff0c;CSS的文件名…...

编程日记 2024/4/6 2:41:39

Acwing.504 转圈游戏(带取余的快速幂)

题目 n个小伙伴&#xff08;编号从 0到 n−1&#xff09;围坐一圈玩游戏。 按照顺时针方向给 n个位置编号&#xff0c;从 0到 n−1。 最初&#xff0c;第 0号小伙伴在第 0号位置&#xff0c;第 1号小伙伴在第 1号位置&#xff0c;…&#xff0c;依此类推。 游戏规…...

编程日记 2024/4/6 2:40:38

pair作为unordered_map的key报错

问题 pair作为unordered_map的key报错&#xff0c;编译时会报错 原因 因为pair没有哈希函数 解决方法 定义哈希函数 template <typename T> inline void hash_combine(std::size_t &seed, const T &val) {seed ^ std::hash<T>()(val) 0x9e3779b9 (…...

编程日记 2024/4/6 2:39:36

Windows提权—数据库提权-mysql提权mssql提权Oracle数据库提权

目录 Windows 提权—数据库提权一、mysql提权1.1 udf提权1.1.2 操作方法一 、MSF自动化--UDF提权--漏洞利用1.1.3 操作方法二、 手工导出sqlmap中的dll1.1.4 操作方法三、 moon.php大马利用 1.2 mof提权1.3 启动项提权1.4 反弹shell 二、MSSQL提权MSSQL提权方法1.使用xp_cmdshe…...

编程日记 2024/4/6 2:37:34

为什么android创建Fragment推荐用newInstance

FullScreenDialogFragment使用newInstance方法不是因为它是一个单例&#xff0c;而是因为这是创建DialogFragment实例并同时提供参数的一种标准模式。这种模式通常称为静态工厂方法模式&#xff0c;在Android开发中被广泛使用&#xff0c;尤其是用于Fragment的实例化。 newIns…...

编程日记 2024/4/6 2:36:33

MyBatis的xml实现方式

1、该项目引入的依赖 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://maven.apache.o…...

编程日记 2024/4/6 2:35:32

大模型prompt技巧——思维链（Chain-of-Thought）

1、Zero-shot、One-shot、Few-shot 与fintune prompt的时候给出例子答案&#xff0c;然后再让模型回答。 2、zero-shot-CoT “Let’s think step by step”有奇迹效果 3、多数投票提高CoT性能——自洽性&#xff08;Self-consistency&#xff09; 多个思维链&#xff0c;然后取…...

编程日记 2024/4/6 2:33:29

内网穿透的应用-如何在Android Termux上部署MySQL数据库并实现无公网IP远程访问

文章目录 前言1.安装MariaDB2.安装cpolar内网穿透工具3. 创建安全隧道映射mysql4. 公网远程连接5. 固定远程连接地址 前言 Android作为移动设备&#xff0c;尽管最初并非设计为服务器&#xff0c;但是随着技术的进步我们可以将Android配置为生产力工具&#xff0c;变成一个随身…...

编程日记 2024/4/6 2:28:25

面试算法-133-区间子数组个数

题目 给你一个整数数组 nums 和两个整数&#xff1a;left 及 right 。找出 nums 中连续、非空且其中最大元素在范围 [left, right] 内的子数组&#xff0c;并返回满足条件的子数组的个数。 生成的测试用例保证结果符合 32-bit 整数范围。 示例 1&#xff1a; 输入&#xff…...

编程日记 2024/4/6 2:27:23

物联网实战--入门篇之(八)嵌入式-空气净化器

目录 一、风扇调速 二、通讯协议 三、净化器运行逻辑 一、风扇调速 单片机是不能直接驱动电机的&#xff0c;因为主芯片的驱动电流比较小(50mA左右)&#xff0c;他们之间正常还要有个电机驱动器&#xff0c;常用的有TB6612、L298和L9110等&#xff0c;目前项目用的这个电机它…...

编程日记 2024/4/6 2:23:19

macOS上QT打开麦克风和摄像头的权限问题

同样的代码在Windows上可以轻松操作麦克风和摄像头&#xff0c;特别是用QT这种跨平台的框架。但是对macOS这种权限要求完善的系统还需要进行一些配置&#xff0c;那就是增加Info.plist属性配置文件。如果是之前的早期5.x版本的QTCreator因为使用的是qmake构建系统&#xff0c;估…...

编程日记 2024/4/6 2:22:18

鸿蒙手机cordova-plugin-camera不能拍照和图片不显示问题

鸿蒙手机cordova-plugin-camera不能拍照和图片不显示问题 一、运行环境 1、硬件 手机型号&#xff1a;NOVA 7 系统&#xff1a;HarmonyOS版本 4.0.0 2、软件 android SDK platforms&#xff1a;14.0(API Level 34)、13.0&#xff08;API Level 33&#xff09; SDK Build-T…...

编程日记 2024/4/6 2:18:14

Spring源码解析上

spring源码解析 整体架构 defaultListableBeanFactory xmlBeanDefinitionReader 创建XmlBeanFactory 对资源文件进行加载–Resource 利用LoadBeandefinitions(resource)方法加载配置中的bean loadBeandefinitions加载步骤 doLoadBeanDefinition xml配置模式 validationMode 获…...

编程日记 2024/4/6 2:17:13

第九题：最大间隙

题目描述 给定一个序列 a1,a2,⋯ ,an。其中 a1≤a2≤⋯≤an。 相邻两个数之间的差&#xff08;后一个数减前一个数&#xff09;称为它们的间隙。 请问序列中最大的间隙值是多少&#xff1f; 输入描述 输入的第一行包含一个整数 n&#xff0c;表示序列的长度。 第二行包含…...

编程日记 2024/4/6 2:16:12

【随笔】Git -- 高级命令（中篇）（七）

&#x1f48c; 所属专栏&#xff1a;【Git】 &#x1f600; 作  者&#xff1a;我是夜阑的狗&#x1f436; &#x1f680; 个人简介&#xff1a;一个正在努力学技术的CV工程师&#xff0c;专注基础和实战分享 &#xff0c;欢迎咨询&#xff01; &#x1f496; 欢迎大…...

编程日记 2024/4/6 2:14:10

可视化大屏 - 项目1

文章目录 技术栈echarts 可视化需求分析代码实现 技术栈 flexible.js rem 实现不同终端下的响应式布局&#xff0c;根据不同屏幕宽度&#xff0c;自适配布局&#xff1b; html中引入index.js&#xff0c;可以改名为flexible.js&#xff1b;默认划分10份&#xff0c;可以自己修…...

编程日记 2024/4/6 2:09:06

Collection与数据结构 链表与LinkedList(三):链表精选OJ例题(下)

1. 分割链表 OJ链接 class Solution {public ListNode partition(ListNode head, int x) {if(head null){return null;//空链表的情况}ListNode cur head;ListNode formerhead null;ListNode formerend null;ListNode latterhead null;ListNode latterend null;//定义…...

编程日记 2024/4/6 2:08:05

如何通过C++身份证实名认证接口实现实名认证功能

线上平台使用身份核验过程是验证个人身份真实性的过程&#xff0c;对于大多数线上平台来说&#xff0c;自己去开发集成身份证实名认证接口需要耗费大量的人力、物力成本&#xff0c;对此&#xff0c;为助力有需要的企业快速实现实名认证的功能&#xff0c;翔云平台提供了身份证…...

编程日记 2024/4/6 2:07:04

用html写一个爱心

<!DOCTYPE html> <html lang"zh-CN"><head><meta http-equiv"Content-Type" content"text/html; charsetUTF-8" /><title>爱您</title><style>* {padding: 0;margin: 0;}body {background-color: pin…...

编程日记 2024/4/6 2:06:02

如何看到 synchronized 背后的“monitor 锁”？

Java全能学习+面试指南：https://javaxiaobear.cn 获取和释放 monitor 锁的时机 我们都知道，最简单的同步方式就是利用 synchronized 关键字来修饰代码块或者修饰一个方法，那么这部分被保护的代码，在同一时刻就最多只有一个线程可以运行，而 synchronized 的背后正是利用 …...

编程日记 2024/4/6 2:03:00

使用VSCode开发Django指南

使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架&#xff0c;专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用&#xff0c;其中包含三个使用通用基本模板的页面。在此…...

编程新知 2025/12/25 2:11:21

51c自动驾驶~合集58

我自己的原文哦~ https://blog.51cto.com/whaosoft/13967107 #CCA-Attention 全局池化局部保留&#xff0c;CCA-Attention为LLM长文本建模带来突破性进展 琶洲实验室、华南理工大学联合推出关键上下文感知注意力机制&#xff08;CCA-Attention&#xff09;&#xff0c;…...

编程新知 2025/12/31 19:38:25

HTML 列表、表格、表单

1 列表标签 作用&#xff1a;布局内容排列整齐的区域 列表分类&#xff1a;无序列表、有序列表、定义列表。 例如&#xff1a; 1.1 无序列表 标签&#xff1a;ul 嵌套 li&#xff0c;ul是无序列表&#xff0c;li是列表条目。 注意事项&#xff1a; ul 标签里面只能包裹 li…...

编程新知 2025/12/21 22:08:53

OkHttp 中实现断点续传 demo

在 OkHttp 中实现断点续传主要通过以下步骤完成&#xff0c;核心是利用 HTTP 协议的 Range 请求头指定下载范围&#xff1a; 实现原理 Range 请求头&#xff1a;向服务器请求文件的特定字节范围&#xff08;如 Range: bytes1024-&#xff09; 本地文件记录&#xff1a;保存已…...

编程新知 2025/12/12 0:56:22

令牌桶 滑动窗口-＞限流 分布式信号量-＞限并发的原理 lua脚本分析介绍

文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结&#xff1a; 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析&#xff1a; 实际业务去理解体会统一注…...

编程新知 2026/1/1 23:14:13

今日科技热点速览

&#x1f525; 今日科技热点速览 &#x1f3ae; 任天堂Switch 2 正式发售 任天堂新一代游戏主机 Switch 2 今日正式上线发售&#xff0c;主打更强图形性能与沉浸式体验&#xff0c;支持多模态交互&#xff0c;受到全球玩家热捧 。 &#x1f916; 人工智能持续突破 DeepSeek-R1&…...

编程新知 2025/11/20 14:26:29

ios苹果系统，js 滑动屏幕、锚定无效

现象&#xff1a;window.addEventListener监听touch无效&#xff0c;划不动屏幕&#xff0c;但是代码逻辑都有执行到。 scrollIntoView也无效。 原因&#xff1a;这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作&#xff0c;从而会影响…...

编程新知 2025/12/31 7:46:02

GitFlow 工作模式（详解）

今天再学项目的过程中遇到使用gitflow模式管理代码&#xff0c;因此进行学习并且发布关于gitflow的一些思考 Git与GitFlow模式 我们在写代码的时候通常会进行网上保存&#xff0c;无论是github还是gittee&#xff0c;都是一种基于git去保存代码的形式&#xff0c;这样保存代码…...

编程新知 2025/12/31 16:29:17

Razor编程中@Html的方法使用大全

文章目录 1. 基础HTML辅助方法1.1 Html.ActionLink()1.2 Html.RouteLink()1.3 Html.Display() / Html.DisplayFor()1.4 Html.Editor() / Html.EditorFor()1.5 Html.Label() / Html.LabelFor()1.6 Html.TextBox() / Html.TextBoxFor() 2. 表单相关辅助方法2.1 Html.BeginForm() …...

编程新知 2026/1/3 4:47:00

打手机检测算法AI智能分析网关V4守护公共/工业/医疗等多场景安全应用

一、方案背景​ 在现代生产与生活场景中&#xff0c;如工厂高危作业区、医院手术室、公共场景等&#xff0c;人员违规打手机的行为潜藏着巨大风险。传统依靠人工巡查的监管方式&#xff0c;存在效率低、覆盖面不足、判断主观性强等问题&#xff0c;难以满足对人员打手机行为精…...

编程新知 2026/1/3 7:15:13