vue - 文字3d展示

<template>

  <div>

    <p>

    <span>C</span>

    <span>S</span>

    <span>S</span>

    <span>3</span>

    <span>D</span>

    <span>E</span>

    <span>F</span>

    <span>F</span>

    <span>E</span>

    <span>C</span>

    <span>T</span>

</p>

  </div>

</template>

<script>

export default {

}

</script>

<style lang="scss">

@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');

$count: 12;

body, html {

    width: 100%;

    height: 100%;

    display: flex;

    font-family: 'Lobster', cursive;

    perspective: 160vmin;

    overflow: hidden;

}

p {

    margin: auto;

    font-size: 24vmin;

    white-space: nowrap;

    transform-style: preserve-3d;

    animation: rotate 10s infinite ease-in-out;

   

    span {

        text-shadow:

            1px 1px 0 rgba(0, 0, 0, .9),

            2px 2px 0 rgba(0, 0, 0, .7),

            3px 3px 0 rgba(0, 0, 0, .5),

            4px 4px 0 rgba(0, 0, 0, .3),

            5px 5px 0 rgba(0, 0, 0, .1);

       

        &:nth-child(-n+5) {

            animation-delay: -5s;

        }

    }

}

@for $i from 1 to 7 {

    span:nth-child(#{$i}),

    span:nth-last-child(#{$i}) {

        animation: filterBlur-#{$i} 10s infinite ease-in-out;

    }

    @keyframes filterBlur-#{$i} {

        0% {

            filter: blur(0px) contrast(5);

        }

        50% {

            filter: blur(#{7 - $i}px) contrast(1);

        }

        100% {

            filter: blur(0px) contrast(5);

        }

    }

}

@keyframes rotate {

    0% {

        transform: rotateY(-45deg);

    }

    50% {

        transform: rotateY(45deg);

    }

    100% {

        transform: rotateY(-45deg);

    }

}

</style>