Vue 浮动的小球

1.组件flyBall.vue

<!--
 * 浮动小球
 * @author: Donglei
 * @since: 2023-09-20
 * flyBall.vue
-->
<template>
    <div class="fly-class" :style="`width: ${this.width}px;
                    height: ${this.height}px;
                    border: 1px solid ${this.color}1A;
                    border-radius: 50%;
                    box-shadow: inset 0px -23px 25px 0 ${this.color}2b,inset 0 -36px 30px 0px  ${this.color}26,inset 0 -79px 40px 0px ${this.color}1A,${this.color}0f 0px 2px 1px,${this.color}17 0px 4px 2px,${this.color}17 0px 8px 4px, ${this.color}17 0px 16px 8px,${this.color}17 0px 32px 16px;`">
        <slot></slot>
    </div>
</template>

<script>
export default {
    name: 'flyBall',
    props: {
        color: {
            type: String,
            default: function () {
                return '#FF0000'
            },
        },
        width: {
            type: Number,
            default: 100,
        },
        height: {
            type: Number,
            default: 100,
        },
    },
    data() {
        return {
            defaultClass: ''

        }
    },
    mounted() {
        this.defaultClass = `width: ${this.width}px;
                height: ${this.height}px;
                border: 1px solid ${this.color};
                border-radius: 50%;
                box-shadow: inset 0px -23px 25px 0 ${this.color}2b,
                inset 0 -36px 30px 0px  ${this.color}26,
                inset 0 -79px 40px 0px ${this.color}1A,
                ${this.color}0f 0px 2px 1px,${this.color}17 0px 4px 2px,
                ${this.color}17 0px 8px 4px, ${this.color}17 0px 16px 8px,
                ${this.color}17 0px 32px 16px;`
    },
    methods: {
    },
}

</script>

<style lang="scss" scoped>
.fly-class {
    animation: bounce-down 1.8s linear infinite;
}


@-webkit-keyframes bounce-down {
    25% {
        -webkit-transform: translateY(-10px);
    }

    50%,
    100% {
        -webkit-transform: translateY(0);
    }

    75% {
        -webkit-transform: translateY(10px);
    }
}
</style>

2.调用(需要传入颜色、宽、高)

 <div style="position: fixed; left: 10%; top: 10%;">
      <fly-ball color="#ff00ff" :width="100" :height="100">
        <div style="display: flex; flex-direction: column;justify-content: center;
      align-items: center;color: black;height: 100%;">
          <div>33摄氏度</div>
          <div>温度</div>
        </div>
      </fly-ball>
    </div>