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

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

news 2025/9/15 9:56:16

目录

前言

开始

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

装饰模式（Decorator Pattern）重构java邮件发奖系统实战

前言 现在我们有个如下的需求&#xff0c;设计一个邮件发奖的小系统&#xff0c; 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式&#xff08;Decorator Pattern&#xff09;允许向一个现有的对象添加新的功能&#xff0c;同时又不改变其…...

编程新知 2025/9/14 11:23:04

黑马Mybatis

Mybatis 表现层&#xff1a;页面展示 业务层&#xff1a;逻辑处理 持久层&#xff1a;持久数据化保存 在这里插入图片描述 Mybatis快速入门 ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/6501c2109c4442118ceb6014725e48e4.png //logback.xml <?xml ver…...

编程新知 2025/9/9 10:12:01

day52 ResNet18 CBAM

在深度学习的旅程中&#xff0c;我们不断探索如何提升模型的性能。今天&#xff0c;我将分享我在 ResNet18 模型中插入 CBAM&#xff08;Convolutional Block Attention Module&#xff09;模块&#xff0c;并采用分阶段微调策略的实践过程。通过这个过程&#xff0c;我不仅提升…...

编程新知 2025/9/14 16:40:54

STM32+rt-thread判断是否联网

一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...

编程新知 2025/7/30 23:37:23

高等数学（下）题型笔记（八）空间解析几何与向量代数

目录 0 前言 1 向量的点乘 1.1 基本公式 1.2 例题 2 向量的叉乘 2.1 基础知识 2.2 例题 3 空间平面方程 3.1 基础知识 3.2 例题 4 空间直线方程 4.1 基础知识 4.2 例题 5 旋转曲面及其方程 5.1 基础知识 5.2 例题 6 空间曲面的法线与切平面 6.1 基础知识 6.2…...

编程新知 2025/8/30 19:47:38

Mac软件卸载指南，简单易懂！

刚和Adobe分手&#xff0c;它却总在Library里给你写"回忆录"&#xff1f;卸载的Final Cut Pro像电子幽灵般阴魂不散&#xff1f;总是会有残留文件&#xff0c;别慌&#xff01;这份Mac软件卸载指南&#xff0c;将用最硬核的方式教你"数字分手术"&#xff0…...

编程新知 2025/8/13 4:43:34

零基础设计模式——行为型模式 - 责任链模式

第四部分&#xff1a;行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习&#xff01;行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想&#xff1a;使多个对象都有机会处…...

编程新知 2025/8/27 2:56:26

自然语言处理——循环神经网络

自然语言处理——循环神经网络 循环神经网络应用到基于机器学习的自然语言处理任务序列到类别同步的序列到序列模式异步的序列到序列模式 参数学习和长程依赖问题基于门控的循环神经网络门控循环单元&#xff08;GRU&#xff09;长短期记忆神经网络&#xff08;LSTM&#xff09…...

编程新知 2025/9/4 7:05:35

C# 求圆面积的程序（Program to find area of a circle）

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

编程新知 2025/9/9 10:10:10

laravel8+vue3.0+element-plus搭建方法

创建 laravel8 项目 composer create-project --prefer-dist laravel/laravel laravel8 8.* 安装 laravel/ui composer require laravel/ui 修改 package.json 文件 "devDependencies": {"vue/compiler-sfc": "^3.0.7","axios": …...

编程新知 2025/8/1 7:53:11