前端实战案例⑧随音乐跳动的频谱（炫酷）

最新推荐文章于 2024-04-11 17:42:38 发布

耀南.

最新推荐文章于 2024-04-11 17:42:38 发布

阅读量766

点赞数

分类专栏：前端好玩炫酷的动画小案例文章标签：前端 css html

本文链接：https://blog.csdn.net/YN2000609/article/details/133621582

版权

前端好玩炫酷的动画小案例专栏收录该内容

68 篇文章 9 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>随音乐跳动的频谱</title>
		<style>
			html,body{
				margin: 0;
				padding: 0;
			}
			/* 设置背景图片，并选择cover */
			body{
				background: url(imgs/bcg.jpeg);
				background-size: cover;
			}
			/* 设置绝对定位并居中 */
			.container{
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
			}
			/* 设置spectrum为inline-block使之排练在一行并设置动画 */
			.spectrum{
				width: 20px;
				height: 120px;
				background: #000000;
				display: inline-block;
				border-radius: 6px;
				transform-origin: bottom;
				animation: dancing 1s ease-in-out infinite;
			}
			/* 设置每一个的颜色和延迟，造成一种此起彼伏的感觉 */
			.spectrum1{
				background-color: #002FC9;
				animation-delay: 0.1s;
			}
			.spectrum2{
				background-color: #390F8A;
				animation-delay: 0.2s;
			}
			.spectrum3{
				background-color: #89083F;
				animation-delay: 0.3s;
			}
			.spectrum4{
				background-color: #CC0004;
				animation-delay: 0.4s;
			}
			.spectrum5{
				background-color: #DE2C00;
				animation-delay: 0.5s;
			}
			.spectrum6{
				background-color: #FF8900;
				animation-delay: 0.6s;
			}
			.spectrum7{
				background-color: #53D600;
				animation-delay: 0.7s;
			}
			.spectrum8{
				background-color: #ABF101;
				animation-delay: 0.8s;
			}
			.spectrum9{
				background-color: #FFEB20;
				animation-delay: 0.9s;
			}
			.spectrum10{
				background-color: #9933CD;
				animation-delay: 1s;
			}
			@keyframes dancing{
				0%{
					transform: scaleY(0.1);
				}
				50%{
					transform: scaleY(1);
				}
				100%{
					transform: scaleY(0.1);
				}
			}
			/* 设置倒影，选择180度，并移位，设置透明度 */
			.container.down{
				transform: rotateX(180deg) translate(-50%,-50%);
				opacity: 0.3;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="spectrum spectrum1"></div>
			<div class="spectrum spectrum2"></div>
			<div class="spectrum spectrum3"></div>
			<div class="spectrum spectrum4"></div>
			<div class="spectrum spectrum5"></div>
			<div class="spectrum spectrum6"></div>
			<div class="spectrum spectrum7"></div>
			<div class="spectrum spectrum8"></div>
			<div class="spectrum spectrum9"></div>
			<div class="spectrum spectrum10"></div>
		</div>
		<div class="container down">
			<div class="spectrum spectrum1"></div>
			<div class="spectrum spectrum2"></div>
			<div class="spectrum spectrum3"></div>
			<div class="spectrum spectrum4"></div>
			<div class="spectrum spectrum5"></div>
			<div class="spectrum spectrum6"></div>
			<div class="spectrum spectrum7"></div>
			<div class="spectrum spectrum8"></div>
			<div class="spectrum spectrum9"></div>
			<div class="spectrum spectrum10"></div>
		</div>
	</body>
</html>

更多前端简单小组件尽在主页！喜欢可以收藏哦！