如何使用HTML和CSS创建动画条形图?

概述

动画栏是使用 HTML 和 CSS 创建的图形动画栏。动画栏的布局是使用 HTML 创建的,栏的样式是使用 CSS 制作的。普通的条形图可以正常创建,但我们必须创建带有动画的条形图,因此我们将使用 CSS 过渡动画属性来使其具有动画效果。我们将构建一个与音乐动画条同步器相同的动画条。

算法

第 1 步 - 在文本编辑器中创建一个 HTML 文件并在其中添加 HTML 样板。

第 2 步 − 现在创建一个包含动画线条的父 div 容器。

<div class="animatedLines"></div>

 第 3 步 − 在父 div 内创建一个 div 子容器。创建至少七个“div”来制作一个好的动画栏,并将类名作为线条添加到其中。

<div class="lines"></div>
<div class="lines"></div>
<div class="lines"></div>
<div class="lines"></div>
<div class="lines"></div>
<div class="lines"></div>
<div class="lines"></div>
<div class="lines"></div>

 第 4 步 − 现在创建一个 style.css 文件并将该文件链接到 HTML 文档。

<link rel="stylesheet" href="style.css">

 第 5 步− 在 style.css 文件中设置 HTML 元素的样式。

.animatedLines {display: flex;justify-content: center;padding-top: 2rem;
}
.animatedLines .lines:nth-child(1) {animation-delay: .1s;background-color: rgb(141, 255, 88);
}.animatedLines .lines:nth-child(2) {animation-delay: .2s;background-color: rgb(127, 253, 69);
}.animatedLines .lines:nth-child(3) {animation-delay: .3s;background-color: rgb(18, 49, 6);
}.animatedLines .lines:nth-child(4) {animation-delay: .4s;background-color: rgb(18, 49, 6);
}.animatedLines .lines:nth-child(5) {animation-delay: .3s;background-color: rgb(18, 49, 6);
}.animatedLines .lines:nth-child(6) {animation-delay: .2s;background-color: rgb(127, 253, 69);
}.animatedLines .lines:nth-child(7) {animation-delay: .1s;background-color: rgb(102, 228, 43);
}

 第 6 步 − 通过定位子“div”容器的类名来制作这些线条的动画。

.animatedLines .lines {list-style: none;width: 5px;height: 10px;margin: 0 4px;animation: animatedBars .5s infinite alternate;
}@keyframes animatedBars {0% {transform: scaleY(1);}25% {transform: scaleY(1);}50% {transform: scaleY(1);}100% {transform: scaleY(6);}}

 

第 7 步− 动画条已成功创建。

示例

在此示例中,我们创建了一个动画栏。为此,我们创建了两个文件:index.html 和 style.css。索引文件包含页面的布局,style.css 文件包含页面的样式部分。

<html>
<head><title>animated bars</title><link rel="stylesheet" href="style.css"><style>.animatedLines {display: flex;justify-content: center;padding-top: 2rem;}.animatedLines .lines:nth-child(1) {animation-delay: .1s;background-color: rgb(141, 255, 88);}.animatedLines .lines:nth-child(2) {animation-delay: .2s;background-color: rgb(127, 253, 69);}.animatedLines .lines:nth-child(3) {animation-delay: .3s;background-color: rgb(18, 49, 6);}.animatedLines .lines:nth-child(4) {animation-delay: .4s;background-color: rgb(18, 49, 6);}.animatedLines .lines:nth-child(5) {animation-delay: .3s;background-color: rgb(18, 49, 6);}.animatedLines .lines:nth-child(6) {animation-delay: .2s;background-color: rgb(127, 253, 69);}.animatedLines .lines:nth-child(7) {animation-delay: .1s;background-color: rgb(102, 228, 43);}.animatedLines .lines {list-style: none;width: 5px;height: 10px;margin: 0 4px;animation: animatedBars .5s infinite alternate;}@keyframes animatedBars {0% {transform: scaleY(1);}25% {transform: scaleY(1);}50% {transform: scaleY(1);}100% {transform: scaleY(6);}}</style>
</head>
<body><h1 style="text-align: center;text-decoration: underline;color: green;">tutorialspoint.com</h1><div class="animatedLines"><div class="lines"></div><div class="lines"></div><div class="lines"></div><div class="lines"></div><div class="lines"></div><div class="lines"></div><div class="lines"></div><div class="lines"></div></div>
</body>
</html>

 

下面给定的图像显示了上面示例的输出,它显示了一些您可以在浏览器上实时看到的动画线。当用户将此功能加载到浏览器中时,它会显示一条看起来更有吸引力的动画线条。

结论

动画栏的这一功能可以作为图形界面在语音合成器中使用。您还可以在许多应用程序中看到此组件,例如录音机和 dj 节拍同步器。上面例子中的主要部分是计时,我们设置了随着条形尺寸的增加而动画的计时。

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

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

相关文章

03-zookeeper节点动态上下线案例

服务器动态上下线监听案例 需求 在分布式系统中&#xff0c;主节点可以有多台&#xff0c;可以动态上下线&#xff0c;任意一台客户端都能实时感知到主节点服务器的上下线。 需求分析 客户端能实时洞察到服务器上下线的变化 基本流程&#xff1a; ​ 1.服务端启动时去注册…

300. 最长递增子序列

题目描述 给你一个整数数组 nums &#xff0c;找到其中最长严格递增子序列的长度。 子序列 是由数组派生而来的序列&#xff0c;删除&#xff08;或不删除&#xff09;数组中的元素而不改变其余元素的顺序。例如&#xff0c;[3,6,2,7] 是数组 [0,3,1,6,2,2,7] 的子序列。 示…

一米facebook功能点

用户信息批量修改 可批量修改已登录用户的头像、密码、个人说明等信息。 小号批量刷赞、评论 可以批量用facebook小号给帖子、主页等刷赞或评论。 直播帖刷人气/评论/分享 可以直接刷直播帖子的人气、评论&#xff0c;并可一键分享到小组或个人时间线、公共主页等。 小组成员…

【Java】Java核心API概述

Java核心API是Java编程语言的基础&#xff0c;包含了Java应用程序中常用的类和接口。本文将介绍Java核心API中的一些重要部分&#xff0c;包括输入输出流、异常处理、集合框架、多线程和网络编程等。 1、输入输出流 Java的输入输出流API是Java IO&#xff0c;它提供了处理输入…

使用Apache Doris自动同步整个 MySQL/Oracle 数据库进行数据分析

Flink-Doris-Connector 1.4.0 允许用户一步将包含数千个表的整个数据库&#xff08;MySQL或Oracle &#xff09;摄取到Apache Doris&#xff08;一种实时分析数据库&#xff09;中。 通过内置的Flink CDC&#xff0c;连接器可以直接将上游源的表模式和数据同步到Apache Doris&…

ChatGPT AIGC 完成超炫酷的大屏可视化

大屏可视化一直各大企业进行数据决策的重要可视化方式,接下来我们先来看一下ChatGPT,AIGC人工智能帮我们实现的综合案例大屏可视化效果: 公众号:BI智能数据分析 像这样的大屏可视化使用HTML,JS,Echarts就可以来完成,给ChatGPT,AIGC发送指令的同时可以将数据一起发送给…

如何实现小程序与h5页面间的跳转

接到新需求&#xff0c;要在小程序页面内点击按钮实现跳转h5&#xff0c;一开始没接触过&#xff0c;还挺头疼的&#xff0c;但真正做起来&#xff0c;也就那么一回事啦&#xff0c;废话少说&#xff0c;直接上 1. 配置域名 先登录小程序开发平台&#xff0c;将页面需要跳转的…

英语语法笔记

1.英语五大句型 主谓&#xff08;主语动词&#xff09; 主谓宾&#xff08;主语动词宾语&#xff09; 主谓宾宾&#xff08;主语动词简接宾语直接宾语&#xff09; 主谓宾补&#xff08;主语动词宾语宾语补语&#xff09; 主系表&#xff08;主语系动词主语补语&#xff09; 1…

掌握Python编程:从入门到精通的完整指南

Python是一门流行的编程语言,适用于多种应用领域,包括Web开发、数据分析、人工智能、机器学习等。以下是一个Python入门的大纲,适用于初学者: 第一部分:基础概念 1. Python简介 Python的历史和发展Python的优点和应用领域2. 安装Python 下载和安装Python配置Python开发环…

Java反序列化之CommonsCollections CC1链分析

前言 cc链的研究可以说是非常适合java代码审计的入门篇了&#xff0c;十分考验java代码功力&#xff0c;其实也是基础功&#xff0c;跨过了这个门槛&#xff0c;在看看其他业务代码就会比较轻松了。不要说代码难&#xff0c;看不懂&#xff0c;作者也是刚入门java没几个月的小…

【C++】STL-常用算法-常用查找算法

0.前言 1.find #include <iostream> using namespace std;// 常用查找算法 find #include<vector> #include<algorithm>//查找 内置数据类型 void test01() {vector<int>v;for (int i 0; i < 10; i){v.push_back(i);}//查找 容器中 是否有 5 这个元…

MySQL 存储引擎,你了解几个?

引言 MySQL是一种流行的关系型数据库管理系统&#xff08;RDBMS&#xff09;&#xff0c;它支持多种不同的数据库引擎。数据库引擎是用于存储、管理和检索数据的核心组件&#xff0c;它们直接影响着数据库的性能、可靠性和功能&#xff0c;接下来本文介绍下一些常见的MySQL数据…

MySQL的故事——Schema与数据类型优化

Schema与数据类型优化 一、选择优化的数据类型 更小的通常更好 应该尽量使用可以正确存储数据的最小类型&#xff0c;更小的数据类型通常更快&#xff0c;因为他们占用更少的磁盘&#xff0c;内存和CPU缓存&#xff0c;并且处理时需要的CPU周期更少 简单就好 更简单的数据类型…

干涉阵相关知识

文章目录 Dirty ImageDirty BeamClean ImagePoint Spread Function(PSF)Station Beam关系Dirty Image 脏图像(Dirty Image): 脏图像是在射电干涉测量中观测到的图像,它是真实图像和仪器效应(包括PSF和站波束)的组合结果。 在射电干涉测量中,观测到的结果被称为“脏图像…

KamaCoder(四)

题目来源于&#xff1a;卡码网KamaCoder 题解来源于&#xff1a;GitHub - youngyangyang04/kamacoder-solutions: 卡码网题解全集 目录 路径简化 题目描述 输入 输出 样例输入 样例输出 汽水瓶子换饮料 题目描述 输入 输出 样例输入 样例输出 开发商购买土地 …

3、DVWA——CSRF

文章目录 一、CSRF概述二、low2.1 通关思路2.2 源码分析 三、medium3.1 通关思路3.2 源码分析 四、high4.1 通关思路4.2 源码分析 五、impossible 一、CSRF概述 CSRF全称为跨站请求伪造&#xff08;Cross-site request forgery&#xff09;&#xff0c;是一种网络攻击方式&…

Excel_VBA程序文件的加密及解密说明

VBA应用技巧及疑难解答 Excel_VBA程序文件的加密及解密 在您看到这个文档的时候&#xff0c;请和我一起念&#xff1a;“唵嘛呢叭咪吽”“唵嘛呢叭咪吽”“唵嘛呢叭咪吽”&#xff0c;为自己所得而感恩&#xff0c;为付出者赞叹功德。 本不想分享之一技术&#xff0c;但众多学…

Kafka核心原理第二弹——更新中

架构原理 一、高吞吐机制&#xff1a;Batch打包、缓冲区、acks 1. Kafka Producer怎么把消息发送给Broker集群的&#xff1f; 需要指定把消息发送到哪个topic去 首先需要选择一个topic的分区&#xff0c;默认是轮询来负载均衡&#xff0c;但是如果指定了一个分区key&#x…

基于SSM的校园驿站管理系统

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;采用JSP技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#x…

Git管理

Git管理 ①对于项目目录中有.git的&#xff0c;可以在idea里面更改远程提交地址 Git->>Manage Remotes 中修改远程提交地址 ②对于没有.git目录的项目 在项目的根目录下进入cmd&#xff0c;使用下面的语句初始化.git目录 ##初始化 git init