Mouse Effect 마우스 오버, 텍스트 효과

설명

글씨에 마우스를 올려놓으면 마치 글씨에 불빛이 들어오는 듯한 효과를 내었습니다.

.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;
            }
        }