css制作一个音频声波效果

1.template代码

<view class="voice-image">
                    <view class="lines">
                        <text class="hr hr1" style="{{lineAnimation?‘animation:liner .5s -1s ease-in-out alternate infinite;‘:‘‘}}"></text>
                        <text class="hr hr2" style="{{lineAnimation?‘animation:liner .5s -1.9s ease-in-out alternate infinite;‘:‘‘}}"></text>
                        <text class="hr hr3" style="{{lineAnimation?‘animation:liner .5s -1.2s ease-in-out alternate infinite;‘:‘‘}}"></text>
                        <text class="hr hr4" style="{{lineAnimation?‘animation:liner .5s -1.7s ease-in-out alternate infinite;‘:‘‘}}"></text>
                        <text class="hr hr5" style="{{lineAnimation?‘animation:liner .5s -1.2s ease-in-out alternate infinite;‘:‘‘}}"></text>
                        <text class="hr hr6" style="{{lineAnimation?‘animation:liner .5s -1.5s ease-in-out alternate infinite;‘:‘‘}}"></text>
                        <text class="hr hr7" style="{{lineAnimation?‘animation:liner .5s -1s ease-in-out alternate infinite;‘:‘‘}}"></text>
                    </view>
                </view>

2.css代码

.voice-image{
            display: inline-flex;
            width: 102rpx;
            height: 70rpx;
            margin-bottom: 36rpx;
            .lines{
                width: 100%;
                height: 100%;
                display: inline-flex;
                justify-content: space-between;
                align-items: center;
            }
        }
.hr{
        background-color: #fff;
        width: 4rpx;
        height: 100%;
        float: right;
    }

    .hr1{
        transform: scaleY(.6);
    }
    .hr2{

    }
    .hr3{
        transform: scaleY(.5);
    }
    .hr4{

    }
    .hr5{
        transform: scaleY(.6);
    }
    .hr6{

    }
    .hr7{
        transform: scaleY(.7);
    }
    @keyframes liner {
        0% {
            transform: scaleY(.5);
        }
        100% {
            transform: scaleY(1);
        }
    }

  

原文地址:https://www.cnblogs.com/fairy62/p/12612200.html

时间: 2024-10-22 16:46:35

css制作一个音频声波效果的相关文章

前端每日实战:152# 视频演示如何用纯 CSS 创作一个圆点错觉效果

效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/gBwzKR 可交互视频 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码. 请用 chrome, safari, edge 打开观看. https://scrimba.com/p/pEgDAM/ca82VAM 源代码下载 每日前端实战系列的全部源代码请从 github 下载: https://github.com/comehope/f

用HTML+css制作一个漂亮的烟花动画

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body{ background-color: black; } .pao{ position: absolute; left: 50%; height: 150px; bottom: 0px; ani

利用CSS制作图形效果

前言 关于如何使用CSS来制作图形,比如说圆形,半圆形,三角形等的相关教程还是挺多的,今天我主要想解释一下里面一些demo的实现原理,话不多说,开始吧   以下所有内容只使用一个HTML元素.任何类型的CSS,只要它至少在一个浏览器中支持. 一. 实现一个心形 #heart { position: relative; width: 100px; height: 90px; } #heart:before{ position: absolute; content: ""; left: 5

用css打造一个三角形箭头

用css制作一个三角形箭头 三角形我们经常用在列表.下拉提示.面包屑导航的位置,给用户以导向的引导作用,比如,在有下拉列表的地方,我们可以用向下的箭头,在列表的时候,我们能告诉用户每个列表项和下一个列表项的关系,当在面包屑导航中,能让用户了解他现在所处的栏目或者频道.我们有哪些方法来实现它呢,下面我根据我们的实际工作中的经验作了简单的总结. 第一种方案,我们可以通过使用背景图片的方式来处理,这也是我们最经常用的方法.1)单个切出三角形,我们可以根据UI设计的需求,切出与之相适应的图片,比如 ,我

利用div和css制作三角形效果

利用div和css制作三角形效果:本章节介绍一下如何利用div和css实现三角形效果,虽然看起来表神奇,但是原理是非常的简单.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁

分享一个纯css制作的动画化,在网页(手机)加载等的时候可以引用!

CSS代码如下: /* Custom Stylesheet */ body, html { margin: 0; -webkit-font-smoothing: antialiased; background: #68ABAD; text-align: center; } /* DEMO 1 */ .loader1 { margin: 0 auto; height: 20px; width: 20px; position:relative; -webkit-animation:spin 1.5s

如何制作一个有网络营销效果的企业网站呢

如何制作一个有网络营销效果的企业网站呢? 这是一个普遍企业建站所要达到的最终目的,以前企业网站建设所仅仅要传递和表达的是企业形象,于是片面注重网页的美观而忽视了网站它本来的价值,比如首页设置为一个大大的FLASH动画,镶入多多优美的图片等等.当然,这并不是说首页用动画或图片来展示有什么错或者它就没了营销效果,只不过可以肯定的一点就是它没有比同样一个无动画少图片的网页所带来的效果那么大,注意,我指的仅仅是我们这些普通企业网站,大企业例外啊,呵呵,为何?慢慢想想…… 经过我们多年的研究,一个结构合理

html+css+js(+JQuery)制作扑克牌图片切换效果

要实现的效果图: 先把静态页面写出来: index.html <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>jquery制作扑克牌图片切换效果<

用CSS写一个简单的幻灯片效果页面

这里是修真院前端小课堂,每篇分享文从 [背景介绍][知识剖析][常见问题][解决方案][编码实战][扩展思考][更多讨论][参考文献] 八个方面深度解析前端知识/技能,本篇分享的是: [用CSS写一个简单的幻灯片效果页面] 1.背景介绍CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation. transform属性向元素应用2D或3D转换.该属性允许我们对元素进行旋转.缩放.移动或倾斜. transition是令一个或多个可以用数值表示的css属性值