[엘리멘터 편집] 이미지/텍스트/특정위젯에 라이팅효과 적용하기

적용되는 효과는 사선으로 반짝이는 라이팅(불빛이 지나가는) 효과입니다.

텍스트나 이미지 또는 특정위젯에 대부분 사용이 가능합니다.

엘리멘터 편집에서 원하시는 위젯을 선택하신 후 수정모드에서

고급으로 들어가서 [레이아웃]영역에 보시면

이 부분이 있습니다. 여기서 CSS클래스 부분에 natural-shine 문장을 넣습니다.

이렇게 하신 후 왼쪽 편집모드 최하단에 보시면 

커스텀 CSS가 있는데 여기안에

.natural-shine {
    position: relative;
    overflow: hidden;
}

.natural-shine::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 45%;
    height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-25deg);
    pointer-events: none;
    /* 5초 주기로 무한 반복 */
    animation: autoShineReturn 5s infinite ease-in-out;
}

@keyframes autoShineReturn {

    0% { left: -150%; }
    25% { left: 150%; }  /* 1.25초 동안 오른쪽으로 */
    50% { left: -150%; } /* 1.25초 동안 다시 왼쪽으로 */
    100% { left: -150%; } /* 나머지 시간은 대기 */
}

상기소스를 넣으시고 저장 후 사용자페이지에서 테스트 하여보시면 되십니다.
참고로 소스내 수치조정을 통해 추가수정이 가능합니다.

감사합니다~