JavaScript mouse Effect08

마우스 이펙트 - hover효과

<section id="mouseType08">
    <div class="cursor"></div>

    <div class="mouse__wrap">
        <div class="area">
            <p><span>Enjoy </span> <span> your </span> <span> life</span></p>
            <p><span>인생을 </span> <span> 즐겨라!</span></p>
        </div>
    </div>
</section>


    .area {
        text-align: center;
    }
    .area span {
        font-size: 6.5em;
        color: #fff;
        letter-spacing: -7px;
        font-weight: 700;
        text-transform: uppercase;
        text-shadow: 0px 0px 5px #fff, 0px 0px 7px #fff;
    }

    .area span:hover {
        animation: blur 0.5s ease-out infinite;
    }
        @keyframes blur {
        from {
            text-shadow:0px 0px 10px #fff,
            0px 0px 10px #fff, 
            0px 0px 25px #fff,
            0px 0px 25px #fff,
            0px 0px 25px #fff,
            0px 0px 25px #fff,
            0px 0px 25px #fff,
            0px 0px 25px #fff,
            0px 0px 50px #fff,
            0px 0px 50px #fff,
            0px 0px 50px #7B96B8,
            0px 0px 150px #7B96B8,
            0px 10px 100px #7B96B8,
            0px 10px 100px #7B96B8,
            0px 10px 100px #7B96B8,
            0px 10px 100px #7B96B8,
            0px -10px 100px #7B96B8,
            0px -10px 100px #7B96B8;
        }
    }

<script>

</script>