css3实现音阶音频动画

1登峰造极

已于 2023-04-07 10:23:44 修改

阅读量3k

点赞数 1

分类专栏： css3 文章标签： css3 css 前端

于 2020-01-02 16:39:52 首次发布

本文链接：https://blog.csdn.net/qq_33323469/article/details/103806832

版权

css3 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS音阶动画</title>
	<style>
 .box{
	width: 100px;
	background: red;
}
 .box .main{
     margin-left: 10px;
}
@-webkit-keyframes list
 {
  0% {
    -webkit-transform: scaley(1);
            transform: scaley(1); }

  50% {
    -webkit-transform: scaley(0.4);
            transform: scaley(0.4);
      }
  100% {
    -webkit-transform: scaley(1);
            transform: scaley(1); 
            } 
      }
@keyframes list
 {
  0% {
    -webkit-transform: scaley(1);
            transform: scaley(1); }

  50% {
    -webkit-transform: scaley(0.4);
            transform: scaley(0.4); }

  100% {
    -webkit-transform: scaley(1);
            transform: scaley(1); }
    }

.list> div {
		    background-color: #fff;
		    width: 3px;
		    height: 18px;
		    border-radius: 2px;
		    -webkit-animation-fill-mode: both;
		    animation-fill-mode: both;
		    display: inline-block;
		    -webkit-animation: list 0.9s 0s infinite cubic-bezier(.85, .25, .37, .85);
		    animation: list 0.9s 0s infinite cubic-bezier(.85, .25, .37, .85);
      }
  .list> div:nth-child(1), .list> div:nth-child(2) {
            -webkit-animation-delay: 0.2s !important;
            animation-delay: 0.2s !important; 
        }
 .list> div:nth-child(3), .list> div:nth-child(4) {
           -webkit-animation-delay: 0.4s !important;
            animation-delay: 0.4s !important; 
        }

	</style>
</head>
<body>
<div class="box">
	    <div class="main">
        <div class="list">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
	</div>		      
</body>
</html>

1登峰造极

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
css3实现音阶音频动画

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS音阶动画</title> <style> .box{ width: 100px; background: red;} .box .main{ ...
复制链接

扫一扫