js 시 크 광 효과 구현

본 논문 의 사례 는 js 가 시 크 한 광 감 효 과 를 실현 하 는 구체 적 인 코드 를 공유 하여 여러분 께 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.

일단 큰 박스 를 하나 쓰 겠 습 니 다.

<div class="main"></div>

그리고 이 큰 상자 에 스타일 을 추가 해 주세요.

* {
 margin: 0;
 padding: 0;
}

html,
body {
 height: 100%;
 overflow: hidden;
}

body {
 background: darkblue;
}

.main {
 width: 8px;
 height: 8px;
 position: absolute;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);
 perspective: 800px; /*    */
}

이 큰 상자 주위 에 작은 상 자 를 한 바퀴 쓰 고 우 리 는 js 로 동적 으로 생 성 한다.

var main = document.getElementsByClassName("main")[0];

for (var x = 0; x < 30; x++) {
 var i = document.createElement("i");
 main.appendChild(i);
}

이 작은 상자 들 에 스타일 을 추가 합 니 다.

.main i {
 width: 8px;
 height: 8px;
 border-radius: 50%;
 background: rgba(255, 255, 255, 0.5);
 box-shadow: 0 0 10px 0 white;
 position: absolute;
}

var is = document.getElementsByTagName("i");
for (var i = 0; i < is.length; i++) {
 is[i].style.transform = `rotate(${i * 12}deg) translateX(80px)`;
}

효 과 는 다음 과 같다.

그리고 이 작은 공 들 에 css 애니메이션 을 추가 합 니 다.

.main i {
 width: 8px;
 height: 8px;
 border-radius: 50%;
 background: rgba(255, 255, 255, 0.5);
 box-shadow: 0 0 10px 0 white;
 position: absolute;
 animation: run 3s ease-in-out infinite;
}

@keyframes run {
 0% {
 opacity: 0;
 }
 10% {
 opacity: 1;
 }
 100% {
 opacity: 1;
 transform: translate3d(0, 0, 560px);
 }
}

효 과 는 다음 과 같다.

우 리 는 이 작은 공 들 이 모두 애니메이션 을 동시에 하 는 것 을 발견 했다.그러면 나 는 지금 그들 에 게 애니메이션 을 동시에 하 게 하고 싶 지 않다.어 떡 하지?맞다,설정 이 지연 되 었 다.

for (var i = 0; i < is.length; i++) {
 is[i].style.transform = `rotate(${i * 12}deg) translateX(80px)`;
 is[i].style.animationDelay = `${i * 0.05}s`;
}

현 광 효 과 는 다음 과 같다.

아직 안 끝났어.
지금 30 개 i 인 데 우리 가 60 개 로 만 들 면 어 떨 까?

var main = document.getElementsByClassName("main")[0];

for (var x = 0; x < 60; x++) {
 var i = document.createElement("i");
 main.appendChild(i);
}

var is = document.getElementsByTagName("i");
for (var i = 0; i < is.length; i++) {
 is[i].style.transform = `rotate(${i * 12}deg) translateX(80px)`;
 is[i].style.animationDelay = `${i * 0.05}s`;
}

효 과 는 다음 과 같다.

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.