css 글꼴, 상자 광선 구현

상자가 빛나다

box-shadow: 0 0 10px 10px rgba(0, 255, 0, 0.8);

글꼴 광선
text-shadow 이 속성은 텍스트에 음영 효과를 추가합니다
text-shadow: h-shadow v-shadow blur color; h-shadow: 수평 음영의 위치(음영 수평 편이량), 마이너스 값, 필수
v-shadow: 수직 음영의 위치(음영 수직 편이량), 마이너스 값, 필수
blur: 그림자가 희미한 거리 (기본값 0), 선택 가능
color:그림자 색상(기본값은 현재 글꼴 색상), 선택
언뜻 보기에text-shadow 속성은 텍스트의 음영을 설정하는 데만 사용되며 글꼴 발광 효과를 실현할 수 없을 것 같습니다.
사실은 그렇지 않다. 이것이 바로 text-shadow 속성의 정교한 점이다.
그림자의 수평 오프셋과 수직 오프셋이 0이면 그림자가 텍스트와 일치합니다
이때 음영이 희미한 거리를 늘리면 글씨체 외광 효과가 나타난다.
물론 외부 빛을 더욱 멋지게 하기 위해서는 text-shadow의 또 다른 기능을 사용해야 한다. 여러 개의 음영을 동시에 설정해야 한다(쉼표로 구분해서 여러 개의 음영을 설정한다)

    
xinpureZhu

body {
    background: #000;
}
.container {
    width: 600px;
    margin: 100px auto 0;
}
p {
    font-family: 'Audiowide';
    text-align: center;
    color: #00a67c;
    font-size: 7em;
    -webkit-transition: all 1.5s ease;
            transition: all 1.5s ease;
}
p:hover {
    color: #fff;
    -webkit-animation: Glow 1.5s ease infinite alternate;
            animation: Glow 1.5s ease infinite alternate;

}
@-webkit-keyframes Glow {
    from {
        text-shadow: 0 0 10px #fff,
                     0 0 20px #fff,
                     0 0 30px #fff,
                     0 0 40px #00a67c,
                     0 0 70px #00a67c,
                     0 0 80px #00a67c,
                     0 0 100px #00a67c,
                     0 0 150px #00a67c;
    }
    to {
        text-shadow: 0 0 5px #fff,
                     0 0 10px #fff,
                     0 0 15px #fff,
                     0 0 20px #00a67c,
                     0 0 35px #00a67c,
                     0 0 40px #00a67c,
                     0 0 50px #00a67c,
                     0 0 75px #00a67c;
    }
}
@keyframes Glow {
    from {
        text-shadow: 0 0 10px #fff,
                     0 0 20px #fff,
                     0 0 30px #fff,
                     0 0 40px #00a67c,
                     0 0 70px #00a67c,
                     0 0 80px #00a67c,
                     0 0 100px #00a67c,
                     0 0 150px #00a67c;
    }
    to {
        text-shadow: 0 0 5px #fff,
                     0 0 10px #fff,
                     0 0 15px #fff,
                     0 0 20px #00a67c,
                     0 0 35px #00a67c,
                     0 0 40px #00a67c,
                     0 0 50px #00a67c,
                     0 0 75px #00a67c;
    }
}