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

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

news 2026/2/7 13:48:11

目录

前言

开始

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

利用最小二乘法找圆心和半径

#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...

编程新知 2026/2/1 6:20:07

【Java学习笔记】Arrays类

Arrays 类 1. 导入包&#xff1a;import java.util.Arrays 2. 常用方法一览表 方法描述Arrays.toString()返回数组的字符串形式Arrays.sort()排序&#xff08;自然排序和定制排序&#xff09;Arrays.binarySearch()通过二分搜索法进行查找&#xff08;前提&#xff1a;数组是…...

编程新知 2025/12/3 9:38:15

基于Flask实现的医疗保险欺诈识别监测模型

基于Flask实现的医疗保险欺诈识别监测模型 项目截图 项目简介 社会医疗保险是国家通过立法形式强制实施&#xff0c;由雇主和个人按一定比例缴纳保险费&#xff0c;建立社会医疗保险基金&#xff0c;支付雇员医疗费用的一种医疗保险制度&#xff0c; 它是促进社会文明和进步的…...

编程新知 2026/1/24 14:59:08

基于数字孪生的水厂可视化平台建设：架构与实践

分享大纲&#xff1a; 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年&#xff0c;数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段&#xff0c;基于数字孪生的水厂可视化平台的…...

编程新知 2025/12/23 17:14:55

如何为服务器生成TLS证书

TLS&#xff08;Transport Layer Security&#xff09;证书是确保网络通信安全的重要手段&#xff0c;它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书&#xff0c;可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...

编程新知 2025/12/17 5:54:30

PL0语法，分析器实现！

简介 PL/0 是一种简单的编程语言，通常用于教学编译原理。它的语法结构清晰，功能包括常量定义、变量声明、过程（子程序）定义以及基本的控制结构（如条件语句和循环语句）。 PL/0 语法规范 PL/0 是一种教学用的小型编程语言，由 Niklaus Wirth 设计，用于展示编译原理的核…...

编程新知 2026/1/29 17:06:33

Java求职者面试指南：Spring、Spring Boot、MyBatis框架与计算机基础问题解析

Java求职者面试指南&#xff1a;Spring、Spring Boot、MyBatis框架与计算机基础问题解析 一、第一轮提问&#xff08;基础概念问题&#xff09; 1. 请解释Spring框架的核心容器是什么&#xff1f;它在Spring中起到什么作用&#xff1f; Spring框架的核心容器是IoC容器&#…...

编程新知 2025/10/4 21:24:40

NXP S32K146 T-Box 携手 SD NAND（贴片式TF卡）：驱动汽车智能革新的黄金组合

在汽车智能化的汹涌浪潮中&#xff0c;车辆不再仅仅是传统的交通工具&#xff0c;而是逐步演变为高度智能的移动终端。这一转变的核心支撑&#xff0c;来自于车内关键技术的深度融合与协同创新。车载远程信息处理盒&#xff08;T-Box&#xff09;方案&#xff1a;NXP S32K146 与…...

编程新知 2026/1/24 14:43:35

【Android】Android 开发 ADB 常用指令

查看当前连接的设备 adb devices 连接设备 adb connect 设备IP 断开已连接的设备 adb disconnect 设备IP 安装应用 adb install 安装包的路径 卸载应用 adb uninstall 应用包名 查看已安装的应用包名 adb shell pm list packages 查看已安装的第三方应用包名 adb shell pm list…...

编程新知 2025/11/18 18:31:30

解决：Android studio 编译后报错\app\src\main\cpp\CMakeLists.txt‘ to exist

现象&#xff1a; android studio报错&#xff1a; [CXX1409] D:\GitLab\xxxxx\app.cxx\Debug\3f3w4y1i\arm64-v8a\android_gradle_build.json : expected buildFiles file ‘D:\GitLab\xxxxx\app\src\main\cpp\CMakeLists.txt’ to exist 解决&#xff1a; 不要动CMakeLists.…...

编程新知 2025/12/15 0:46:42