css 录音声波动效

想要的效果：

类似微信的按住说话功能：

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" /><hr class="hr6" /><hr class="hr7" /><hr class="hr8" /><hr class="hr9" /><hr class="hr10" /></span></div>

CSS

  .time-box .start-taste-line hr {background-color: red;  //声波颜色width: 3px;height: 6px;margin: 0 0.03rem;display: inline-block;border: none;}hr {animation: note 0.2s ease-in-out;animation-iteration-count: infinite;animation-direction: alternate;}.hr1 {animation-delay: -1s;}.hr2 {animation-delay: -0.9s;}.hr3 {animation-delay: -0.8s;}.hr4 {animation-delay: -0.7s;}.hr5 {animation-delay: -0.6s;}.hr6 {animation-delay: -0.5s;}.hr7 {animation-delay: -0.4s;}.hr8 {animation-delay: -0.3s;}.hr9 {animation-delay: -0.2s;}.hr10 {animation-delay: -0.1s;}@keyframes note {from {transform: scaleY(1);}to {transform: scaleY(4);}}

css 录音声波动效相关推荐

HTML+CSS制作彩色波动
HTML+CSS制作彩色波动效果图如下: HTML部分源码如下: <!DOCTYPE html> <html lang="en"><head> ...
01超精美渐变色动态背景完整示例【CSS动效实战（纯CSS与JS动效）】
若是大一学子或者是真心想学习刚入门的小伙伴可以私聊我,若你是真心学习可以送你书籍,指导你学习,给予你目标方向的学习路线,无套路,博客为证. 本节案例如下(其他动效篇幅原因逐步讲解,欢迎三连): 一.线 ...
CSS实现催眠动画效
主要使用 CSS 实现的动画效果,其中 CSS 需要使用 Less 编译完成.效果如下图: Html 代码: <!DOCTYPE html> <html><head> ...
css动画Demo---水波动画和边框动画
先上效果图: 水波动画: 边框动画: 1.水波动画实现代码 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head ...
css实现海浪动效，这是最简单的实现方式了！
花里胡哨的canvas实现太过于繁琐,这就是本文存在的意义. 效果图拆解首先画一个简单的盒子: 利用::before与::after画两个圆角值(radius)不同的不规则圆形: 父元素设置ove ...
【Android】自定义录音、播放动画View，让你的录音浪起来
前言先看效果图嗯,然后大致就是这样,按住录音,然后有一个倒计时,最外层一个进度条,还有一个类似模拟声波的动画效果(其实中间的波浪会根据声音的大小浪起来的~) 实现思路然后,我们适当的来分析一下这 ...
css 识别变量中的换行符_跟我一起全面了解一下CSS变量
什么是css变量? CSS变量,即CSS variable.官方的名称是级联变量的CSS自定义属性,即CSS custom properties for cascading variables.类似于 ...
再谈 CSS 预处理器
CSS 预处理器是什么?一般来说,它们基于 CSS 扩展了一套属于自己的 DSL,来解决我们书写 CSS 时难以解决的问题: 语法不够强大,比如无法嵌套书写导致模块化开发中需要书写很多重复的选择器: ...
首届CSS开发者大会｜七牛助力前端开发
上周六,由w3ctech联合W3C举办的中国首届开发者大会在北航新主楼会议中心圆满落幕.W3C CSS联合创始人Bert Bos出席了本次大会,并发表了题为<CSS未来>的主题演讲. 除了 ...

css 录音声波动效

想要的效果：

类似微信的按住说话功能：

HTML

CSS

css 录音声波动效相关推荐

最新文章

热门文章