波纹加载---

 代码:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.container {width: 1000px;height: 580px;margin: 50px auto;border: 1px solid green;position: relative;}.top {margin: 0 auto 0px;padding: 10px 0;background: thistle;color: #fff;}.dajianshi {margin: 100px auto 0;width: 200px;height: 120px;display: flex;}.dajianshi span {width: 10px;border-radius: 18px;margin-right: 20px;}.dajianshi span:nth-child(1) {animation: bar1 2s 0.2s infinite linear;}.dajianshi span:nth-child(2) {animation: bar2 2s 0.4s infinite linear;}.dajianshi span:nth-child(3) {animation: bar3 2s 0.6s infinite linear;}.dajianshi span:nth-child(4) {animation: bar4 2s 0.8s infinite linear;}.dajianshi span:nth-child(5) {animation: bar5 2s 1.0s infinite linear;}.dajianshi span:nth-child(6) {animation: bar6 2s 1.2s infinite linear;}.dajianshi span:nth-child(7) {animation: bar7 2s 1.4s infinite linear;}.dajianshi span:nth-child(8) {animation: bar8 2s 1.6s infinite linear;}.dajianshi span:nth-child(9) {animation: bar9 2s 1.8s infinite linear;}@keyframes bar1 {0% {background: #f677b0;margin-top: 25%;height: 10%;}50% {background: #f677b0;height: 100%;margin-top: 0%;}100% {background: #f677b0;height: 10%;margin-top: 25%;}}@keyframes bar2 {0% {background: #df7ff2;margin-top: 25%;height: 10%;}50% {background: #df7ff2;height: 100%;margin-top: 0%;}100% {background: #df7ff2;height: 10%;margin-top: 25%;}}@keyframes bar3 {0% {background: #8c7ff2;margin-top: 25%;height: 10%;}50% {background: #8c7ff2;height: 100%;margin-top: 0%;}100% {background: #8c7ff2;height: 10%;margin-top: 25%;}}@keyframes bar4 {0% {background: #7fd0f2;margin-top: 25%;height: 10%;}50% {background: #7fd0f2;height: 100%;margin-top: 0%;}100% {background: #7fd0f2;height: 10%;margin-top: 25%;}}@keyframes bar5 {0% {background: #7ff2d3;margin-top: 25%;height: 10%;}50% {background: #7ff2d3;height: 100%;margin-top: 0%;}100% {background: #7ff2d3;height: 10%;margin-top: 25%;}}</style>
</head><body><div class="container"><div class="top"><h3>音频波纹加载效果</h3></div><div class="dajianshi "><span></span><span></span><span></span><span></span><span></span></div></div>
</body></html>

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

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

相关文章

【C语言】指针篇-初识指针(1/5)

&#x1f308;个人主页&#xff1a;是店小二呀 &#x1f308;C语言笔记专栏&#xff1a;C语言笔记 &#x1f308;C笔记专栏&#xff1a; C笔记 &#x1f308;喜欢的诗句:无人扶我青云志 我自踏雪至山巅 文章目录 **内存和地址(知识铺垫(了解即可))**如何理解编址**指针变量*…

【unity】【C#】游戏音乐播放和发布

今天我们来认识一下有关 unity 音乐的一些知识 我们先创建 AudioClips 文件夹&#xff0c;这个文件夹通常就是 unity 中存放音乐的文件夹&#xff0c;然后拖进音乐文件进去 这里为大家提供了两个音乐&#xff0c;有需要可以自取 百度网盘&#xff1a;https://pan.baidu.com/s…

泛域名/通配符SSL证书有免费的吗?怎么申请?

我们需要明确的是&#xff0c;市场上确实存在免费的泛域名SSL证书&#xff0c;但这些免费证书通常由自动化的证书颁发机构&#xff08;CA&#xff09;提供&#xff0c;如JoySSL、Lets Encrypt。这些免费证书虽然能够满足基本的加密需求&#xff0c;但在服务支持、保险额度、信任…

Python7种运算符及运算符优先级

🥇作者简介:CSDN内容合伙人、新星计划第三季Python赛道Top1 🔥本文已收录于Python系列专栏: 零基础学Python 💬订阅专栏后可私信博主进入Python学习交流群,进群可领取Python视频教程以及Python相关电子书合集 私信未回可以加V:hacker0327 备注零基础学Python 订阅专…

Rust - 所有权

所有的程序都必须和计算机内存打交道&#xff0c;如何从内存中申请空间来存放程序的运行内容&#xff0c;如何在不需要的时候释放这些空间&#xff0c;成了重中之重&#xff0c;也是所有编程语言设计的难点之一。在计算机语言不断演变过程中&#xff0c;出现了三种流派&#xf…

医疗大模型,巨头们的新赛场

配图来自Canva可画 说起近两年最热门的话题&#xff0c;那一定非大模型莫属了。众所周知&#xff0c;伴随着ChatGPT的强势出圈&#xff0c;全球范围内掀起了一波人工智能热潮&#xff0c;国内外的诸多企业都开足马力&#xff0c;推出了自己的大模型产品。而AI大模型产品的不断…

基于Vue的低代码可拔插自定义组件

背景说明 在低代码初期&#xff0c;各个厂商的前端低代码搭建框架基本集中在JQuery、Vue、React 等。但在低代码的实施阶段&#xff0c;对于前端的展示&#xff0c;都遇到了同一个挑战&#xff1a;部分场景下需要根据自身业务来定制表单组件&#xff08;如表单组件UI和业务逻辑…

虚拟机下CentOS7开启SSH连接

虚拟机下CentOS7开启SSH连接 自己在VMware中装了CentOS 6.3&#xff0c;然后主机&#xff08;或者说xshell&#xff09;与里面的虚拟机连不通&#xff0c;刚学习&#xff0c;一头雾水&#xff0c;查了半天&#xff0c;也不知道怎么弄。 在虚拟机&#xff08;Vmware Workstatio…

前端小技巧之轮播图

文章目录 功能htmlcssjavaScript图片 设置了一点小难度&#xff0c;不理解的话&#xff0c;是不能套用的哦&#xff01;&#xff01;&#xff01; &#xff08;下方的圆圈与图片数量不统一&#xff0c;而且宽度是固定的&#xff09; 下次写一些直接套用的&#xff0c;不整这些麻…

第二证券|A股突发!外资大动作!

A股走出独立行情&#xff01; 今天&#xff0c;日本、韩国股市大幅下挫&#xff0c;但A股早盘并未遭到太多影响&#xff0c;走出了强势拉升的独立行情。创业板指涨超2%&#xff0c;沪指、深成指涨超1%&#xff0c;富时我国A50指数期货直线拉升&#xff0c;涨幅超越2%。 尽管盘…

Qt for Android 配置 gradle

配置 gradle 版本 在 Qt Android 编译时需要配置对应的 gradle 版本才能正确编译。 创建模板 创建 android 模板 修改配置文件 进入 Android 目录 android 模板目录 2. 修改 gradle.properties 文件 org.gradle.jvmargs-Xmx2048m 改为 org.gradle.jvmargs-Xmx1024m3. 修…

YesPMP众包平台 | 活动有礼,现金奖励点击领取!

YesPMP众包平台在线发福利啦&#xff0c;4月16日活动火热开启&#xff0c;现金奖励等你来领&#xff0c;最高可领千元&#xff0c;赶快参与将奖励收入囊中&#xff0c;一起来了解活动细节吧&#xff01; 一、活动内容&#xff1a; 活动一&#xff1a;【项目征集令】活动&…