css音频动效

最新推荐文章于 2024-03-19 11:58:01 发布
最新推荐文章于 2024-03-19 11:58:01 发布
阅读量903 收藏 2
点赞数 1
分类专栏： 前端 css css3 文章标签： css css3 html flex
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_17108919/article/details/107406520
版权
前端 同时被 3 个专栏收录
35 篇文章 0 订阅
订阅专栏
css
5 篇文章 0 订阅
订阅专栏
css3
4 篇文章 0 订阅
订阅专栏

html代码

<div class="components-animaite-play">
	<div class="line"></div>
	<div class="line"></div>
	<div class="line"></div>
</div>

css代码

/* 音频动效 */
.components-animaite-play {
  background: rgba(255, 255, 255, 0.1);
  height: 18rpx;
  display: flex;
  align-items: flex-end;
}
.components-animaite-play .line {
  background: #F35619;
  display: flex;
  width: 2px;
  height: 100%;
  margin-right: 2px;
  border-radius: 2px;
  -webkit-animation: up-and-down 1.3s ease infinite alternate;
  animation: up-and-down 1.3s ease infinite alternate;
}
.components-animaite-play .line:nth-child(1) {
  height: 20%;
  -webkit-animation-delay: -2.4s;
  animation-delay: -2.4s;
}
.components-animaite-play .line:nth-child(3) {
  height: 60%;
  -webkit-animation-delay: -2.4s;
  animation-delay: -2.4s;
}
.components-animaite-play .line:nth-child(4) {
  height: 30%;
  -webkit-animation-delay: -3.7s;
  animation-delay: -3.7s;
}
.components-animaite-play.white .line {
  background-color: #fff;
}
@-webkit-keyframes up-and-down {
  10% {
    height: 30%;
  }
  30% {
    height: 100%;
  }
  60% {
    height: 50%;
  }
  80% {
    height: 75%;
  }
  100% {
    height: 20%;
  }
}
@keyframes up-and-down {
  10% {
    height: 30%;
  }
  30% {
    height: 100%;
  }
  60% {
    height: 50%;
  }
  80% {
    height: 75%;
  }
  100% {
    height: 20%;
  }
}


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=components-animaite-play, initial-scale=1.0">
  <title>Document</title>
  <style>
/* 音频动效 */
.components-animaite-play {
  background: rgba(255, 255, 255, 0.1);
  height: 10px;
  display: flex;
  align-items: flex-end;
}
.components-animaite-play .line {
  background: #F35619;
  display: flex;
  width: 2px;
  height: 100%;
  margin-right: 2px;
  border-radius: 2px;
  -webkit-animation: up-and-down 1.3s ease infinite alternate;
  animation: up-and-down 1.3s ease infinite alternate;
}
.components-animaite-play .line:nth-child(1) {
  height: 20%;
  -webkit-animation-delay: -2.4s;
  animation-delay: -2.4s;
}
.components-animaite-play .line:nth-child(3) {
  height: 60%;
  -webkit-animation-delay: -2.4s;
  animation-delay: -2.4s;
}
.components-animaite-play .line:nth-child(4) {
  height: 30%;
  -webkit-animation-delay: -3.7s;
  animation-delay: -3.7s;
}
.components-animaite-play.white .line {
  background-color: #eee;
}
@-webkit-keyframes up-and-down {
  10% {
    height: 30%;
  }
  30% {
    height: 100%;
  }
  60% {
    height: 50%;
  }
  80% {
    height: 75%;
  }
  100% {
    height: 20%;
  }
}
@keyframes up-and-down {
  10% {
    height: 30%;
  }
  30% {
    height: 100%;
  }
  60% {
    height: 50%;
  }
  80% {
    height: 75%;
  }
  100% {
    height: 20%;
  }
}

  </style>
</head>
<body>
  <div class="components-animaite-play">
	<div class="line"></div>
	<div class="line"></div>
	<div class="line"></div>
</div>
</body>
</html>
autm许
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
纯CSS实现语音动画.docx
05-11
微信小程序录音时需要动画，参照网上的安全写了一个，采用纯css的方式动画实现
纯CSS3多功能录音机特效
07-24
纯CSS3多功能录音机特效是一款黑色经典的磁带录音机，跳频录音机，音箱录音机，多功能录音机图形特效。
css3 三角形_Html的css3法和python的matplotlib法实现波浪音节动画特效解析
weixin_39578513的博客
11-27 112
1.说明：1.1 推荐指数：★★★★1.2 熟悉html的css3相关知识，展现python的强大和matplotlib高级作图法，熟悉相关编程知识和思维。1.3 本解析通俗易懂，适合任何人士，代码本人亲测过，建议python3.8、微软vscode编辑器和谷歌浏览器使用。1.4 有点长，适合收藏，慢慢玩。比较真实的音乐音效动画2 先说python的matplotlib法2.1 代码：#---导出...
有趣的css - 音频小动效
最新发布
设计师工作日常
03-19 1170
用 css3 实现一个好玩的音频小动效。
HTML5 Web Audio API给网页JS交互增加声音效果
JackieDYH的博客
10-24 3200
一、HTML5 Web Audio API介绍 首先务必要弄清这一点，本文这里所说的HTML5 Web Audio API和HTML5<audio>元素完全不是一个东西，其体量也完全不是一个等级的，HTML5 Web Audio API接口的丰富程度和体量可以和HTML canvas API相提并论，其能实现的功能也非常令人瞠目。 HTML5 Web Audio API可以让我们无中生有创造声音，而且是各种音调的声音，换句话说，我们通过JavaScript就会创建一个完整的音乐出来，类似.
通过 CSS 的样式实现语音发送动效类似声音震动的效果
weixin_64103049的博客
07-21 1986
发送语音动效
【HTML+CSS】h5视频、音频、新增表单
LuWeien的博客
12-02 183
type="color” 取色type="range”滑块 必须设置name属性。type="email” 邮箱type="number”数字输入框。type="datetime-local” 选择本地时间。type="time”时间type="date”日期。type="tel”电话 pc端没有效果。autofocus 自动获取焦点。type="search”搜索。required 必须填写。type="month"月。type="url”路径。type="week”周。
CSS动画效果——语音播放小喇叭 （实用，赞）
chelen_jak的专栏
12-17 5426
原文出处：https://www.jianshu.com/p/5a3cfcc764f5 写业务代码经常会碰到要自己实现一些设计交给的小动画，今天我们就来看下小喇叭那种类似倒过来的wifi图标一样的效果： 语音播放效果 对于这个有几种实现方案： 一种是直接把图标.png文件放在下面，然后再在上面覆盖一层跟它弧度相似的圆形div，通过css的animation去控制那个覆盖的div从左向...
css按钮音效设置,带悬停音效（超低声波）的磁吸按钮
weixin_39536806的博客
08-04 584
JavaScript语言：JaveScriptBabelCoffeeScript确定$(document).on('mousemove touch', function(e) {magnetize('.cerchio', e);});function magnetize(el, e) {var mX = e.pageX,mY = e.pageY;const item = $(el);const c...
CSS 实现音频loding动画
苏苏就是小苏苏的博客
12-06 2824
CSS 实现音频loding动画
css 录音声波动效
最初都是小白
03-17 4135
想要的效果： 类似微信的按住说话功能： HTML <div class="time-box"> <span class="start-taste-line"> <hr class="hr1" /> <hr class="hr2" /> <hr class="hr3" /> <hr class="hr4" /> <hr class="hr5" />
css3实现音阶音频动画
社会人
01-02 3051
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS音阶动画</title> <style> .box{ width: 100px; background: red; } .box .main{ ...
录音机磁带转动CSS3特效
07-24
录音机磁带转动CSS3特效是一款纯css3绘制的复古录音机磁带播放动画特效。
html5为网页按钮增加触发式音效.rar
07-10
html5为网页按钮增加触发式音效，为网页上的操作按钮增加操作提示单，当鼠标单击按钮的时候，发出声音，声音是调用事先准备好的音频文件进行播放。
120个按钮音效
06-26
120个按钮音效，非常好用，美丽动听，是按钮开发和制作的必备一笑
前端css按钮动效支持阴影边线
10-08
按钮动效
CSS水滴动效.html
08-13
CSS水滴效果
漂亮的CSS阴影动效设计
05-11
提供了一种漂亮美观的按钮、输入框CSS片段，具有扁平化的动画效果。
css3动效登录表单
10-07
css3动效登录表单，简洁漂亮的登陆表单，纯css3实现
qt五子棋css按钮动效
05-05
你可以使用Qt中的QPropertyAnimation类来实现CSS按钮动效。这个类可以用来创建动画效果，通过改变属性来实现动画效果。下面是一个使用QPropertyAnimation类的例子，来实现CSS按钮的动效： ```cpp // 在按钮的 clicked() 信号的槽函数中添加下面的代码 QPropertyAnimation *animation = new QPropertyAnimation(ui->pushButton, "geometry"); animation->setDuration(1000); animation->setStartValue(ui->pushButton->geometry()); animation->setEndValue(QRect(50, 50, 100, 50)); animation->setEasingCurve(QEasingCurve::InOutQuad); animation->start(); ``` 这个例子中，我们创建了一个QPropertyAnimation对象，将按钮的geometry属性设置为动画的目标属性。我们设置了动画的持续时间为1000毫秒，起始值为按钮的当前位置，结束值为一个新的位置。我们还设置了一个缓和曲线，这将控制动画的速度。最后，我们开始动画。 这个例子中，我们只使用了按钮的geometry属性，但你可以使用QPropertyAnimation类来改变其他属性，比如按钮的颜色或者透明度。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值