vue 手動實現小喇叭，待動畫效果

<template>
    <div class="trumpet-div">
        <div class="box">
            <div class="trumpet-back"></div>
            <div class="trumpet-forward"></div>
            <div class="wifi-symbol">
                <div class="line first"></div>
                <div class="line second"></div>
                <div class="line third"></div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Trumpet"
    }
</script>

<style lang="scss" scoped>
    .trumpet-div {
        height: 100%;

        .box {
            height: 100%;
            display: flex;
            align-items: center;

            .trumpet-back {
                height: 12px;
                width: 8px;
                background-color: #00a3af;
                z-index: 1;
            }

            .trumpet-forward {
                width: 0; /*設置寬高爲0，所以div的內容爲空，從才能形成三角形尖角*/
                height: 0;
                border-bottom: 15px solid #00a3af;
                border-left: 15px solid transparent; /*transparent 表示透明*/
                border-right: 15px solid transparent;
                transform: rotateZ(-90deg);
                margin-left: -16px;

            }

            .wifi-symbol {
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                height: 26px;
                margin-left: -4px;

                .line {
                    width: 10px;
                    height: 2px;
                    background-color: #00a3af;
                    border-radius: 1px;
                }

                .first {
                    transform: rotateZ(-30deg);
                    animation: fadeInOut 1s infinite 0.2s;
                }
                .third {
                    transform: rotateZ(30deg);
                    animation: fadeInOut 1s infinite 0.4s;
                }

            }

        }
    }

    /*動畫*/
    @keyframes fadeInOut {
        0% {
            opacity: 0; /*初始狀態 透明度爲0*/
        }
        100% {
            opacity: 1; /*結尾狀態 透明度爲1*/
        }
    }
</style>