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

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

news 文章来源：https://blog.csdn.net/qq_70814008/article/details/137299954 2024/10/30 1:34:58

前言

开始

HTML部分

CSS部分

效果图

总结

前言

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

开始

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

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度 */
}

效果图

总结

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

前言

开始

HTML部分

CSS部分

效果图

总结

相关文章：