模拟音频播放的css样式

play_bar.png
如果做出如上图中左边的那个小喇叭呢，其实只需要简单布局和css样式即可。
html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <style>
            html {
                font-size:100px;
            }
            /*语音条*/
            /*语音三条杠*/
            /* 父级元素必须为speech_bar */
            .speech_bar{
                position:relative;
            }
            .speaker_wrapper {
                position: absolute;
                top: 50%;
                left: .06rem;
                width: .2rem;
                height: .2rem;
                margin-top: -.1rem;
            }
            .speaker1 {
                width: .2rem;
                height: .2rem;
                border: 1px solid;   
                border-radius: 50%;
                opacity: 1;
            }
            .speaker2 {
                position: absolute;
                top: 50%;
                left: 50%;
                width: .14rem;
                height: .14rem;
                margin: -.07rem 0 0 -.07rem;
                border: 1px solid;
                border-radius: 50%;
                opacity: 1;
            }
            .speaker3 {
                position: absolute;
                top: 50%;
                left: 50%;
                width: 6px;
                height: 6px;
                margin: -3px 0 0 -3px;
                border: 1px solid;    
                border-radius: 50%;
            }
            .speech_bar .speaker1,.speech_bar .speaker2,.speech_bar .speaker3{
                border-color: transparent #fff transparent transparent;
            }
            .pressed .speaker1{
                -webkit-animation: speaker1 1.2s ease-in-out infinite;
                 /*-webkit-animation-play-state: paused;*/ 
                }
            .pressed .speaker2 {
                -webkit-animation: speaker2 1.2s ease-in-out infinite;
                /* -webkit-animation-play-state: paused; */
               }
               @-webkit-keyframes speaker1{
                0%{
                    opacity: 0; 
                }
                70%,100%{
                    opacity: 1;
                }
            }
            @-webkit-keyframes speaker2{
                0%{
                    opacity: 0; 
                }
                20%,100%{
                    opacity: 1;
                }
            }
            .play_bar{
                width:1.85rem;height:0.4rem;background:#2eb3e8;border-radius:8px;line-height: 0.4rem;text-align: center;color:#fff;font-size: 0.16rem;
            }
        </style>
    </head>
    <body>
        <div class="play_bar">
            <div class="speech_bar pressed"><!--点击添加pressed喇叭即可波动  不想波动删除即可-->
                <p>免费试听<audio></audio></p>
                <div class="speaker_wrapper">
                    <div class="speaker1"></div>
                    <div class="speaker2"></div>
                    <div class="speaker3"></div>
                </div>
            </div>
        </div>
    </body>
</html>
模拟音频播放的css样式

推荐阅读更多精彩内容
