CSS特效009:音频波纹加载律动

这篇具有很好参考价值的文章主要介绍了CSS特效009:音频波纹加载律动。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

CSS常用示例100+专栏目录

本专栏记录的是经常使用的CSS示例与技巧,主要包含CSS布局,CSS特效,CSS花边信息三部分内容。其中CSS布局主要是列出一些常用的CSS布局信息点,CSS特效主要是一些动画示例,CSS花边是描述了一些CSS相关的库、知识点、理论篇章等。 因为常用所以记录、展示、分享,希望能给您带来帮助。

css实战中,如何制作音频波纹加载律动效果呢? 实际上很简单,主要用到keyframes状态的不同阶段,设置不同柱状条的高度、背景色、距顶部高度等。然后再来个动画无限大循环。

效果图

CSS特效009:音频波纹加载律动,# css常用示例100+,css,前端

源代码

/*
* @Author: 大剑师兰特(xiaozhuanlan),还是大剑师兰特(CSDN)
* @此源代码版权归大剑师兰特所有,可供学习或商业项目中借鉴,未经授权,不得重复地发表到博客、论坛,问答,git等公共空间或网站中。
* @Email: 2909222303@qq.com
* @weixin: gis-dajianshi
* @First published in CSDN
* @First published time: 2023-11-14
*/
<template>
	<div class="container">
		<div class="top">
			<h3>音频波纹加载效果</h3>
			<div class="author">大剑师兰特, 还是大剑师兰特,gis-dajianshi</div>
		</div>
		<div class="dajianshi ">
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
		</div>

	</div>
</template>

<style scoped>
	.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>

CSS基础知识点

1.CSS样式表
2.基础选择器:(1)标签选择器,(2)类选择器,(3)id选择器,(4)通配符选择器
3.复合选择器:(1)后代选择器,(2)子选择器,(3)并集选择器,(4)交集选择器,(5)伪类选择器。
4.字体样式属性:(1)字体大小font-size,(2)字体类型font-family,(3)字体粗细font-weight,(4)字体风格font-style
5.文本外观样式:(1)设置文本颜色color,(2)word-spacing,(3)letter-spacing,(4)line-height,(5)text-transform,(6)text-decoration,(7)text-align,(8)text-indent,(9)white-space
6.文本外观属性:(1)text-shadow,(2)overflow
7.CSS层叠性、继承性及优先级
8.边框介绍
8.1边框属性:(1)border-style,(2)border-width,(3)border-color,(4)border-radius
8.2内边距属性
8.3外边距属性
8.4box-shadow
9.背景属性
9.1背景颜色
9.2背景图片:(1)background-repeat,(2)background-position,(3)background-attachment,(4)background-size,(5)background-origin,(6)background-clip,(7)复合写法,(8)不透明
10.元素的类型
11.span标签
12.display
13.表格标签:(1)table标签,(2)tr标签,(3)td标签,(4)th标签,(5)表格边框,(6)折叠边框,(7)表格宽度和高度,(8)表格边框间距border-spacing,(9)表格标题位置caption-side
14.表单
14.1创建表单:(1)标签
14.2表单控件:(1)input控件,(2)input/标签的type属性,(3)textarea控件,(4)select控件
15.CSS盒子模型:(1)边框(border),(2)内边距(padding),(3)外边距(margin),(4)清除内外边距,(5)盒子模型
16.浮动布局:(1)传统网页布局,(2)浮动简介,(3)浮动特性,(4)清除浮动
17.定位布局:(1)定位组成,(2)相对定位relative,(3)绝对定位absolute,(4)子绝父相,(5)固定定位fixed,(6)定位叠放次序z-index,(7)定位拓展
三.其他
1.圆角边框:(1)圆形,(2)圆角矩形
2.盒子阴影
3.文字阴影
4.用户界面样式:(1)鼠标样式 cursor,(2)轮廓线 outline,(3)防止拖拽文本域 resize,
5.过渡 transition

结尾语

CSS的应用无处不在,希望某个片段就能帮助你,欢迎学习GIS的朋友一起交流。
《 Openlayers 综合示例200+ 》,
《 leaflet示例教程100+ 》,
《 Cesium示例教程100+》,
《MapboxGL示例教程100+》。文章来源地址https://www.toymoban.com/news/detail-752727.html

到了这里,关于CSS特效009:音频波纹加载律动的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • css实现动态水波纹效果

    效果如下: 外层容器 ( shop_wrap ): 设置外边距 ( padding ) 提供一些间距和边距 圆形容器 ( TheCircle ): 使用相对定位 ( position: relative ),宽度和高度均为 180px ,形成一个圆形按钮 圆角半径 ( border-radius ) 设置为 50% ,使其呈现圆形 边框 ( border ) 和阴影 ( box-shadow ) 提供边框和轻微

    2024年01月18日
    浏览(40)
  • 【CSS Grid网格布局】常用属性,示例代码解读

    grid-template-columns/grid-template-rows:用于定义网格的列和行的大小和数量。可以指定具体的尺寸值(如px、em等),也可以使用fr单位表示剩余空间的比例分配。 grid-column-gap/grid-row-gap:用于定义网格的列间距和行间距。可以使用具体的尺寸值或百分比。 grid-template-areas:用于定义

    2024年02月12日
    浏览(45)
  • 【CSS3】CSS3 3D 转换 ① ( CSS3 3D 转换简介 | 3D 物体与 2D 物体区别 | 3D 空间坐标系 | 常用的 3D 转换属性 | 3D 位移转换语法 | 代码示例 )

    3D 显示的物体 与 平面 2D 显示的物体有明显的不同 , 3D 显示效果有 近大远小 的 特点 ; 元素的 2D 的 转换效果 有 平移 , 旋转 , 缩放 效果 , 同样有对应的 3D 转换效果 ; 2D 平面坐标系 中 , 只有 x 轴 和 y 轴 ; 3D 空间坐标系 比 2D 平面坐标系 多了一个 Z 轴 ; x 轴 : 水平向右 ; 左侧是

    2024年02月12日
    浏览(49)
  • 超好看的前端特效HTML特效、CSS特效、JS特效(第一期)

    1. 粒子组成文字动画特效 文件组成: base.css demo.css bcg.jpg demo.js demo.scss index.html 2. 爱心表白特效 文件组成: heart.svg index.html 3. 爱心跟随鼠标 index.html 4. 满屏漂浮爱心 index.html 5. 黑客帝国矩阵雨 index.html 6. 2024新年快乐动画特效 文件目录: style.css script.js index.html 7. 表白特效

    2024年02月19日
    浏览(51)
  • 3-css高级特效-2

    空间转换简介 空间:是从坐标轴角度定义的 X 、Y 和 Z 三条坐标轴构成了一个立体空间,Z 轴位置与视线方向相同。 空间转换也叫 3D转换 属性:transform 平移 取值与平面转换相同 默认情况下,Z 轴平移没有效果,原因:电脑屏幕默认是平面,无法显示 Z 轴平移效果 视距 作用

    2024年02月11日
    浏览(32)
  • 3-css高级特效-1

    简介 作用:为元素添加动态效果,一般与过渡配合使用 概念:改变盒子在平面内的形态(位移、旋转、缩放、倾斜) 平面转换也叫 2D 转换,属性是 transform 平移 取值 像素单位数值 百分比(参照 盒子自身尺寸 计算结果) 正负 均可 技巧 translate() 只写一个值 ,表示沿着 X

    2024年02月11日
    浏览(34)
  • 27.CSS粒子特效

    2024年02月10日
    浏览(39)
  • 19.CSS雨云动画特效

    2024年02月10日
    浏览(39)
  • css中文本阴影特效

    文字颜色渐变 文字模糊 空心文字 文字外发光 文字阴影 纯CSS3实现悬停时出现对角线耀光效果的按钮 2023-08-09 谈谈怎么持续努力 2023-08-08 纯CSS实现的一个对角线填充颜色的按钮悬停动效 2023-08-07 使用CSS3 box-shadow实现的7个按钮悬停动画特效 2023-08-06 CSS3标题文本后的横线 2023-0

    2024年02月10日
    浏览(39)
  • 16.CSS菜单悬停特效

    2024年02月10日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包