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

目录

前言

开始

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布局、渐变背景和关键帧动画,这段代码展示了如何创建一个动态的、响应式的加载效果,增强了用户的交互体验。这种技术可以广泛应用于网页设计中,作为一个视觉反馈,告知用户数据正在加载,同时也为页面增添了现代感和吸引力。

 

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/793509.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Python的第三方库】flask

1. Flask是什么&#xff1f; 基于python的web后端开发轻量级框架&#xff1b; 基于MVT设计模式即Models,Views,Templates(html模板语言) 2.中文文档&#xff1a; https://dormousehole.readthedocs.io/en/2.1.2/index.html 3.依赖3个库&#xff1a; Jinja2 模版&#xff1…

集成swagger2的时候swagger-ui.html页面的v2/api-docs接口报404

集成swagger2的时候swagger-ui.html页面的v2/api-docs接口报404 尝试网上说的权限、包版本不一致、资源路径映射问题&#xff0c;发现都没有问题。 单独访问v2/api-docs接口的时候报 Swagger2Controller Unable to find specification for group 查看相关代码&#xff1a; …

【Unity灶台】食品加工系统模型搭建

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 秩沅 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a;uni…

pwn学习笔记(7)--堆相关源码

相关源码&#xff1a; 1. chunk 相关源码&#xff1a; ​ 对于用户来说&#xff0c;只需要确保malloc()函数返回的内存不会发生溢出&#xff0c;并且在不用的时候使用free() 函数将其释放&#xff0c;以后也不再做任何操作即可。而对于glibc来说’它要在用户第一次调用malloc…

【接口】HTTP(3) |GET和POST两种基本请求方法有什么区别

在我面试时&#xff0c;在我招人面试别人时&#xff0c;10次能遇到7次这个问题&#xff0c;我听过我也说回答过&#xff1a; Get&#xff1a; 一般对于从服务器取数据的请求可以设置为get方式 Get方式在传递参数的时候&#xff0c;一般都会把参数直接拼接在url上 Get请求方法…

4.4总结

这两天学习了线段树和树状数组&#xff0c;今晚上学长还在进行JDBC和MYSQL的教学&#xff0c;也收获到了一些东西 树状数组与完全二叉数结构上大致相同&#xff0c;但是完全二叉树每个节点只能存储单个数&#xff0c;而树状数组存储的是数组的范围。 从头结点开始为一整个数组…

Linux之实现Apache服务器监控、数据库定时备份及通过使用Shell脚本发送邮件

目录 一、Apache服务器监控 为什么要用到服务监控&#xff1f; 实现Apache服务器监控 二、数据库备份 为什么要用到数据库备份&#xff1f; 实现数据库备份 三、Shell脚本发送邮件 为什么要用使用Shell脚本发送邮件&#xff1f; 实现Shell脚本发送邮件 一、Apache服务器…

file 文件

1. File表示什么? File对象表示路径&#xff0c;可以是文件、也可以是文件夹。这个路径可以是存在的&#xff0c;也可以是不存在的 2&#xff0e;绝对路径和相对路径是什么意思? 绝对路径是带盘符的。 相对路径是不带盘符的&#xff0c;默认到当前项目下去找。 3.File三种构…

计算机中英文术语对照表

计算机中英文术语对照表 分类 编程技术 win: Windows 操作系统&#xff1b;mac: macOS&#xff08;操作系统&#xff09;。 英文&#xff08;English&#xff09;中文一&#xff08;港台地区&#xff09;中文二Abstract摘要&#xff1b;抽象的摘要&#xff1b;抽象的Abstract…

大数据分析_PySpark中类Pandas的df.loc操作(行列定位)

大数据分析_PySpark中类Pandas的df.loc操作(行列定位) 在 PySpark 3.0.3 中, 虽然没有直接类似于 Pandas 中 df.loc 的函数, 但可以通过使用 PySpark 的 select 和 filter 操作来达到类似的功能。 select 用于选择列, 而 filter 用于按条件筛选行。 下面是一个简单的例子, 演…

Spring声明式事务以及事务传播行为

Spring声明式事务以及事务传播行为 Spring声明式事务1.编程式事务2.使用AOP改造编程式事务3.Spring声明式事务 事务传播行为 如果对数据库事务不太熟悉&#xff0c;可以阅读上一篇博客简单回顾一下&#xff1a;MySQL事务以及并发访问隔离级别 Spring声明式事务 事务一般添加到…

VSCODE使用VSIX安装扩展

VSCode安装扩展特别慢&#xff0c;使用命令行安装告别龟速&#xff1a; code --install-extension当然&#xff0c;我这个是在WSL 的linux上安装的&#xff0c;Windows一样的。 VSCode扩展商店网页链接&#xff1a;https://marketplace.visualstudio.com/vscode

号卡极团分销管理系统 index.php SQL注入漏洞复现

0x01 产品简介 号卡极团分销管理系统,同步对接多平台,同步订单信息,支持敢探号一键上架,首页多套UI+商品下单页多套模板,订单查询支持实时物流信息、支持代理商自定义域名、泛域名绑定,内置敢探号、172平台、号氪云平台第三方接口以及号卡网同系统对接! 0x02 漏洞概述…

二十、Rust AOP 切面增强

用过 java spring 的同学&#xff0c;应该会对 AspectJ 的 前置、后置、环绕 增强 念念不忘&#xff0c;巧了 rust 也有类似能力&#xff0c;稍显不同的是&#xff0c;为了向 “零成本抽象” 靠齐&#xff0c;Rust 的 “增强” 是在编译期 完成的。 编译期生成&#xff0c;则离…

数字信号处理实验---FFT分析

一、题目&#xff1a; 二、实验要求&#xff1a; 1、绘制图形时&#xff0c;尽量选用已经提供的函数。 2、所有的图形&#xff0c;需要加上横坐标、纵坐标以及标题的说明。 3、将设计的程序保存为脚本文件&#xff0c;在实验报告中&#xff0c;需写出程序语句。 4、Matlab程…

ECC升级S/4HANA“沙箱模拟方案包“:更适用于升级环境复杂、体量大的客户

“作为一家业务体量大的公司&#xff0c;分支机构众多、数据复杂&#xff0c;想从ECC升级会有什么风险&#xff1f;”面对技术更新换代、公司业务不断扩展、网络安全问题的日益突出&#xff0c;将ECC升级到S/4HANA是企业的当务之急。为解决客户的顾虑&#xff0c;无论是对于历史…

51单片机入门_江协科技_19~20_OB记录的笔记

19. 串口通讯 19.1. 串口介绍&#xff1a; •串口是一种应用十分广泛的通讯接口&#xff0c;串口成本低、容易使用、通信线路简单&#xff0c;可实现两个设备的互相通信。 •单片机的串口可以使单片机与单片机、单片机与电脑、单片机与各式各样的模块互相通信&#xff0c;极大的…

设计模式总结-建造者模式

建造者模式 模式动机模式定义模式结构模式分析建造者模式实例与解析实例&#xff1a;KFC套餐 模式动机 无论是在现实世界中还是在软件系统中&#xff0c;都存在一些复杂的对象&#xff0c;它们拥有多个组成部分&#xff0c;如汽车&#xff0c;它包括车轮、方向盘、发送机等各种…

使用labelImg标注yolov5数据集并在kaggle中使用yolov5

使用labelImg标注yolov5数据集并在kaggle中使用yolov5 文章目录 前言一、labelImg标注1.1. 下载exe文件1.2. labelImg 下载&#xff08;源码&#xff09;1.3. 环境配置1.4. 使用1.4.1. 设置1.4.2. 导入图片并标注 二、在kaggle中使用2.1. 下载源码2.2. 编辑配置文件2.3. 将压缩…

[蓝桥杯 2017 国 C] 合根植物

[蓝桥杯 2017 国 C] 合根植物 题目描述 w 星球的一个种植园&#xff0c;被分成 m n m \times n mn 个小格子&#xff08;东西方向 m m m 行&#xff0c;南北方向 n n n 列&#xff09;。每个格子里种了一株合根植物。 这种植物有个特点&#xff0c;它的根可能会沿着南北…