需求:语音播放动态效果

方案:使用如下图片,利用 css animation @keyframes  做动画

html

<span class="horn" :class="{'active': scope.row.isPlay}"></span>
<audio :id="'audio_'+scope.row.commentId" ref="audio" :src="scope.row.voiceUrl"></audio>
 css
.horn{
width: 25px;
height: 20px;
background-image: url('../../../assets/images/voice/icon.png');
background-size: 100% 100%;
position: absolute;
left: 10px;
top: 50%;
// margin-top: 50%;
transform: translateY(-49%);
}
.horn.active{
animation: fadeInOut 1s infinite;
}
@keyframes fadeInOut {
0% {
background-image: url('./assets/images/voice/1.png');
}
70% {
background-image: url('./assets/images/voice/2.png');
}
90% {
background-image: url('./../assets/images/voice/icon.png');
}
}

css animation @keyframes 动画的更多相关文章

  1. js如何衔接css3的多个@keyframes动画?

    css3特效动画,我们在编写页面中经常遇到,而且是在同一个div模块上有多个衔接的不同动画,css中,我们经常使用animation-delay (规定在动画开始之前的延迟)进行处理. 那么,下面分享 ...

  2. css中animation和@keyframes 动画

    Animation 使用简写属性,将动画与 div 元素绑定: div { animation:mymove 5s infinite; -webkit-animation:mymove 5s infi ...

  3. 原生js判断css3动画过度(transition)结束 transitionend事件 以及关键帧keyframes动画结束(animation)回调函数 animationEnd 以及 css 过渡 transition无效

      上图的 demo 主要讲的 是 css transition的过渡回调函数transitionend事件: css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画 ...

  4. transition和animation做动画(css动画二)

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! translate:平移:是transform的一个属性: transform:变形:是一个静态属性,可以 ...

  5. 【WEB前端系列之CSS】CSS3动画之Animation

    前言 动画使用示例https://github.com/AndyFlower/web-front/tree/master/css3/loading 学习CSS3中Animation之前先来看一个动画特 ...

  6. css animation动画

    css 动画: 动画是CSS3中具有颠覆性的特征之一,可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果. 必要元素: a.通过@keyframes指定动画序列:自动补间动画,确定两 ...

  7. 利用 CSS animation 和 CSS sprite 制作动画

    CSS3 大大强化了制作动画的能力,但是如果要做出图案比较复杂的动画,选择 GIF 依然是一个不错的选择.今天给大家介绍一个使用 CSS animation 配合雪碧图(CSS sprite)来制作动 ...

  8. CSS篇之动画(2)

    animation-name(自定义动画) name为动画名称.不要用中文,尽量用与动画相关的名称.元素所应用的动画名称,必须与规则@keyframes配合使用,因为动画名称由@keyframes定义 ...

  9. CSS Animation

    div { /* Chrome, Safari, Opera 等使用webkit引擎的浏览器*/ -webkit-animation-name: myfirst; /*规定 @keyframes 动画 ...

随机推荐

  1. matplotlib的学习16-animation动画

    from matplotlib import pyplot as plt from matplotlib import animation import numpy as np fig, ax = p ...

  2. linux -bash: unzip: 未找到命令(实测有效!)

    今天使用linux解压的时候遇到了不能解压的问题,然后就看了一些文档,写一个解决方案 Linux version 3.10.0-957.10.1.el7.x86_64 (mockbuild@kbuil ...

  3. Python字符串常用的一些东西

    字符串的常用方法dir(str).查看某一方法的用法help(str.xxx). 1,索引和切片: 2,len():查看字符串的总长度. 3,+,拼接一个或多个字符串. 4,in,判定字符是否在字符串 ...

  4. Winform程序及dll打包成一个可执行的exe

    使用场景 通常开发的Winform程序,引用了其他类库后,在输出目录下都会产生很多DLL文件,exe执行时必须依赖这些DLL.想要Winform程序只有一个可执行exe文件,又不想打包成安装包,就可以 ...

  5. MES系统介绍

    为什么要引入MES系统? 随着ERP在企业应用的深入,ERP系统逐渐显示出其局限性.当ERP下达的工单到生产现场后,产品制造是以产线 "工单"或"批次"(Bat ...

  6. CentOS7 实战源码部署nginx网站服务器

    简介:实战演练nginx网站服务器的搭建 nginx 简介: Nginx是一款高性能的 HTTP 和反向代理服务器   Nginx的优点: 1.高并发量:根据官方给出的数据,能够支持高达 50,000 ...

  7. .net core 和 WPF 开发升讯威在线客服与营销系统:(插曲)一次端口攻击行为的分析与应对

    本系列文章详细介绍使用 .net core 和 WPF 开发 升讯威在线客服与营销系统 的过程.本产品已经成熟稳定并投入商用. 在线演示环境:https://kf.shengxunwei.com 注意 ...

  8. 阿里技术专家详解 Dubbo 实践,演进及未来规划

    Dubbo 整体介绍 Dubbo 是一款高性能,轻量级的 Java RPC 框架.虽然它是以 Java 语言来出名的,但是现在我们生态里面已经有 Go.Python.PHP.Node.JS 等等语言. ...

  9. OneBlog开源博客-详细介绍如何实现freemarker自定义标签

    前言 OneBlog中使用到了springboot + freemarker的技术,同时项目里多个controller中都需要查询一个公有的数据集合,一般做法是直接在每个controller的方法中通 ...

  10. 死磕以太坊源码分析之MPT树-上

    死磕以太坊源码分析之MPT树-上 前缀树Trie 前缀树(又称字典树),通常来说,一个前缀树是用来存储字符串的.前缀树的每一个节点代表一个字符串(前缀).每一个节点会有多个子节点,通往不同子节点的路径 ...