草庐IT

CSS 实现音频loding动画

苏苏哇哈哈 2024-04-07 原文

前言

👏实现一个音频loading动画还蛮有趣的，速速来Get吧~
🥇文末分享源代码。记得点赞+关注+收藏！

1.实现效果

2.实现步骤

  • 定义css变量：父容器高度为–h，可以动态设置loading的高度
:root {
   --h: 80px;
 }
  • 父容器flex横向布局，竖向居中，添加15个span标签（可以自行设置更多的个数，这里展示15个）
<div class="container">
 <span></span>
 //...共15个
 <span></span>
</div>

.container {
  display: flex;
  align-items: center;
  position: relative;
  height: var(--h);
}
  • span设置圆角，初始高度为 h*20%，圆角为高度的二分之一，设置背景渐变色，span标签间隔4px，最后一个span标签设置右边距为0

.container span {
  background: linear-gradient(to top, #d299c2 0%, #fef9d7 100%);
  width: 4px;
  height: 20%;
  border-radius: calc(var(--h) * 0.2 * 0.5);
  margin-right: 4px;
}
.container span:last-child {
   margin-right: 0px;
 }
  • 修改span标签的高度，实现上下波动

  • 为每个span标签设置高度变化的动画，20%到100%的变化，背景渐变色的变化，圆角的变化

@keyframes loading {
 0% {
   background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);
   height: 20%;
   border-radius: calc(var(--h) * 0.2 * 0.5);
 }
 50% {
   background-image: linear-gradient(to top, #d299c2 0%, #fef9d7 100%);
   height: 100%;
   border-radius: calc(var(--h) * 1 * 0.5);
 }
 100% {
   background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);
   height: 20%;
   border-radius: calc(var(--h) * 0.2 * 0.5);
 }
}
  • 通过为span标签设置不同的动画延迟，实现此起彼伏的效果
  • 由中间向两侧进行波动，15个标签，中间数为第八个，为第八个span设置动画延时为0s，依次向两边增加延迟时间，即总标签数的中间数字不延迟，两侧进行动画延迟

  • 按照上述规则为span标签定义css变量–d
<div class="container">
 <span style="--d: 7"></span>
 //...,6,5,4,3,2,
 <span style="--d: 1"></span>
 <span style="--d: 0"></span>
 <span style="--d: 1"></span>
 //...,2,3,4,5,6,
 <span style="--d: 7"></span>
</div>
  • 设置动画延迟，就完成了啦~

.container span {
 + animation-delay: calc(0.2s * var(--d));
}

3.实现代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS 实现音频loding动画</title>
  </head>
  <link rel="stylesheet" href="../common.css" />
  <style>
    :root {
      --h: 80px;
    }
    .container {
      display: flex;
      align-items: center;
      position: relative;
      height: var(--h);
    }
    .container span {
      background: linear-gradient(to top, #d299c2 0%, #fef9d7 100%);
      width: 4px;
      height: 20%;
      border-radius: calc(var(--h) * 0.2 * 0.5);
      margin-right: 4px;
      animation: loading 2.5s infinite linear;
      animation-delay: calc(0.2s * var(--d));
    }
    .container span:last-child {
      margin-right: 0px;
    }
    @keyframes loading {
      0% {
        background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);
        height: 20%;
        border-radius: calc(var(--h) * 0.2 * 0.5);
      }
      50% {
        background-image: linear-gradient(to top, #d299c2 0%, #fef9d7 100%);
        height: 100%;
        border-radius: calc(var(--h) * 1 * 0.5);
      }
      100% {
        background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);
        height: 20%;
        border-radius: calc(var(--h) * 0.2 * 0.5);
      }
    }
  </style>
  <body>
    <div class="container">
      <span style="--d: 7"></span>
      <span style="--d: 6"></span>
      <span style="--d: 5"></span>
      <span style="--d: 4"></span>
      <span style="--d: 3"></span>
      <span style="--d: 2"></span>
      <span style="--d: 1"></span>
      <span style="--d: 0"></span>
      <span style="--d: 1"></span>
      <span style="--d: 2"></span>
      <span style="--d: 3"></span>
      <span style="--d: 4"></span>
      <span style="--d: 5"></span>
      <span style="--d: 6"></span>
      <span style="--d: 7"></span>
    </div>
  </body>
</html>

4.写在最后🍒

看完本文如果觉得对你有一丢丢帮助，记得点赞+关注+收藏鸭 🍕
更多相关内容，关注🍥苏苏的bug，🍡苏苏的github，🍪苏苏的码云~
lodingCSSspanclasstokencss3html

有关CSS 实现音频loding动画的更多相关文章

  1. ruby - capybara field.has_css?匹配器 - 2

    我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？ 最佳答案 通过JonasNicklas得到了答案:No

  2. ruby - 如何根据特征实现 FactoryGirl 的条件行为 - 2

    我有一个用户工厂。我希望默认情况下确认用户。但是鉴于unconfirmed特征，我不希望它们被确认。虽然我有一个基于实现细节而不是抽象的工作实现，但我想知道如何正确地做到这一点。factory:userdoafter(:create)do|user,evaluator|#unwantedimplementationdetailshereunlessFactoryGirl.factories[:user].defined_traits.map(&:name).include?(:unconfirmed)user.confirm!endendtrait:unconfirmeddoenden

  3. css - 用 watir 检查标签类？ - 2

    我有一个div，它根据表单是否正确提交而改变。我想知道是否可以检查类的特定元素？开始元素看起来像这样。如果输入不正确，添加错误类。 最佳答案 试试这个:browser.div(:id=>"myerrortest").class_name更多信息:http://watir.github.com/watir-webdriver/doc/Watir/HTMLElement.html#class_name-instance_method另一种选择是只查看具有您期望的类的div是否存在browser.div((:id=>"myerrortes

  4. 华为OD机试用Python实现 -【明明的随机数】 2023Q1A - 2

    华为OD机试题本篇题目：明明的随机数题目输入描述输出描述：示例1输入输出说明代码编写思路最近更新的博客华为od2023|什么是华为od，od薪资待遇，od机试题清单华为OD机试真题大全，用Python解华为机试题|机试宝典【华为OD机试】全流程解析+经验分享,题型分享,防作弊指南华为o

  5. Unity 3D 制作开关门动画,旋转门制作,推拉门制作,门把手动画制作 - 2

    Unity自动旋转动画1.开门需要门把手先动,门再动2.关门需要门先动,门把手再动3.中途播放过程中不可以再次进行操作觉得太复杂?查看我的文章开关门简易进阶版效果:如果这个门可以直接打开的话,就不需要放置"门把手"如果门把手还有钥匙需要旋转,那就可以把钥匙放在门把手的"门把手",理论上是可以无限套娃的可调整参数有:角度,反向,轴向,速度运行时点击Test进行测试自己写的代码比较垃圾,命名与结构比较拉,高手轻点喷,新手有类似的需求可以拿去做参考上代码usingSystem.Collections;usingSystem.Collections.Generic;usingUnityEngine;u

  6. 基于C#实现简易绘图工具【100010177】 - 2

    C#实现简易绘图工具一.引言实验目的:通过制作窗体应用程序(C#画图软件),熟悉基本的窗体设计过程以及控件设计,事件处理等,熟悉使用C#的winform窗体进行绘图的基本步骤,对于面向对象编程有更加深刻的体会.Tutorial任务设计一个具有基本功能的画图软件**·包括简单的新建文件,保存,重新绘图等功能**·实现一些基本图形的绘制,包括铅笔和基本形状等,学习橡皮工具的创建**·设计一个合理舒适的UI界面**注明:你可能需要先了解一些关于winform窗体应用程序绘图的基本知识,以及关于GDI+类和结构的知识二.实验环境Windows系统下的visualstudio2017C#窗体应用程序三.

  7. MIMO-OFDM无线通信技术及MATLAB实现（1）无线信道：传播和衰落 - 2

     MIMO技术的优缺点优点通过下面三个增益来总体概括：阵列增益。阵列增益是指由于接收机通过对接收信号的相干合并而活得的平均SNR的提高。在发射机不知道信道信息的情况下，MIMO系统可以获得的阵列增益与接收天线数成正比复用增益。在采用空间复用方案的MIMO系统中，可以获得复用增益，即信道容量成倍增加。信道容量的增加与min(Nt,Nr)成正比分集增益。在采用空间分集方案的MIMO系统中，可以获得分集增益，即可靠性性能的改善。分集增益用独立衰落支路数来描述，即分集指数。在使用了空时编码的MIMO系统中，由于接收天线或发射天线之间的间距较远，可认为它们各自的大尺度衰落是相互独立的，因此分布式MIMO

  8. 【Java入门】使用Java实现文件夹的遍历 - 2

    遍历文件夹我们通常是使用递归进行操作，这种方式比较简单，也比较容易理解。本文为大家介绍另一种不使用递归的方式，由于没有使用递归，只用到了循环和集合，所以效率更高一些！一、使用递归遍历文件夹整体思路1、使用File封装初始目录，2、打印这个目录3、获取这个目录下所有的子文件和子目录的数组。4、遍历这个数组，取出每个File对象4-1、如果File是否是一个文件，打印4-2、否则就是一个目录，递归调用代码实现publicclassSearchFile{publicstaticvoidmain(String[]args){//初始目录Filedir=newFile("d:/Dev");Datebeg

  9. ruby - Arrays Sets 和 SortedSets 在 Ruby 中是如何实现的 - 2

    通常，数组被实现为内存块，集合被实现为HashMap，有序集合被实现为跳跃列表。在Ruby中也是如此吗？我正在尝试从性能和内存占用方面评估Ruby中不同容器的使用情况 最佳答案 数组是Ruby核心库的一部分。每个Ruby实现都有自己的数组实现。Ruby语言规范只规定了Ruby数组的行为，并没有规定任何特定的实现策略。它甚至没有指定任何会强制或至少建议特定实现策略的性能约束。然而，大多数Rubyist对数组的性能特征有一些期望，这会迫使不符合它们的实现变得默默无闻，因为实际上没有人会使用它:插入、前置或追加以及删除元素的最坏情况步骤复

  10. ruby - "public/protected/private"方法是如何实现的，我该如何模拟它？ - 2

    在ruby中，你可以这样做:classThingpublicdeff1puts"f1"endprivatedeff2puts"f2"endpublicdeff3puts"f3"endprivatedeff4puts"f4"endend现在f1和f3是公共(public)的，f2和f4是私有(private)的。内部发生了什么，允许您调用一个类方法，然后更改方法定义？我怎样才能实现相同的功能(表面上是创建我自己的java之类的注释)例如...classThingfundeff1puts"hey"endnotfundeff2puts"hey"endendfun和notfun将更改以下函数定

随机推荐