Javascript Mouse Effect01

        <main>
            <section id="mouseType01">
                <div class="cursor"></div>
    
                <div class="mouse__wrap">
                    <p>Think like a man of <span class="style1">action</span> and <span class="style2">act</span> like man of <span class="style3">thought.</span></p>
                    <p><span class="style4">행동하는</span> 사람처럼 <span class="style5">생각하고,</span> 생각하는 사람처럼 <span class="style6">행동하라.</span></p>
                </div>
            </section>
        </main>
    

        body::before {
            background: rgba(5,36,70,0.78);
        }
        #mouseType01 {}
    
        .mouse__wrap {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            color: #fff;
            width: 100%;
            height: 100vh;
            overflow: hidden;
            cursor: none;
        }
        .mouse__wrap p {
            font-size: 2.5vw;
            line-height: 2;
            font-weight: 300;
        }
        .mouse__wrap p:last-child {
            font-size: 3vw;
            font-weight: 400;
        }
        .mouse__wrap p span {
            border-bottom: 0.15vw dashed #fff;
        }
        .cursor {
            position: absolute;
            left: 0;
            top: 0;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            border: 3px solid #fff;
            background: rgba(255,255,255,0.1);
            user-select: none;
            pointer-events: none;
            transition:
                background-color 0.2s,
                border-color 0.2s,
                border-radius 0.2s,
                transform 0.6s;
            
        }
        .cursor.style1 {
            background-color: rgba(255,255,165,0.4);
            border-color: orange;
        }
        .cursor.style2 {
            background-color: rgba(140, 0, 255, 0.4);
            border-color: rgb(140,0,255);
            transform: rotate(720deg) scale(2);
        }
        .cursor.style3 {
            background-color: rgb(0, 47, 255, 0.4);
            border-color: rgb(0, 47, 255);
            transform: scale(1.5) rotate(45deg);
            border-radius: 10px;
        }
        .cursor.style4 {
            background-color: rgb(121, 235, 197, 0.4);
            border-color: rgb(121, 235, 197);
            transform: scale(10) rotateY(360deg);
        }
        .cursor.style5 {
            background-color: rgb(255, 0, 85, 0.4);
            border-color: rgb(255, 0, 85);
            transform: rotateY(720deg) scale(0.1);
        }
        .cursor.style6 {
            background-color: rgba(255, 0, 0, 0.4);
            border-color: rgb(255, 0, 0);
            border-radius: 5px;
            transform: rotateX(360deg) rotateY(45deg) scale(2);
        }
    

        window.addEventListener("mousemove",(event)=>{
            document.querySelector(".clientX").innerText = event.clientX;   //브라우저 기준 x좌표
            document.querySelector(".clientY").innerText = event.clientY;   //브라우저 기준 y좌표
            document.querySelector(".offsetX").innerText = event.offsetX;   //요소 기준 x 좌표
            document.querySelector(".offsetY").innerText = event.offsetY;   //요소 기준 y 좌표
            document.querySelector(".pageX").innerText = event.pageX;       //페이지 기준 x 좌표
            document.querySelector(".pageY").innerText = event.pageY;       //페이지 기준 y 좌표
            document.querySelector(".screenX").innerText = event.screenX;   //디바이스 기준 x 좌표
            document.querySelector(".screenY").innerText = event.screenY;   //디바이스 기준 y 좌표
        })
        //마우스 움직이기
        window.addEventListener("mousemove",(e)=>{
            document.querySelector(".cursor").style.left = e.clientX - 25 + "px";   //원 안으로 중심이 들어가야해서 -25px 을 줌.
            document.querySelector(".cursor").style.top = e.clientY - 25 + "px";
        })
        //마우스 오버 효과    
        const mouseStyle = document.querySelectorAll(".mouse__wrap span");     //모든 span 태그를 변수로 지정       
        //for               
        // for(let i =0; i<mouseStyle.length; i++){
        //     mouseStyle[i].addEventListener("mouseover",()=>{
        //     document.querySelector(".cursor").classList.add("style"+(i+1));
        //     });
        //     mouseStyle[i].addEventListener("mouseout",()=>{
        //     document.querySelector(".cursor").classList.remove("style"+(i+1));
        //     });
        // };
        
        //forEach
        mouseStyle.forEach((e,i)=>{
            e.addEventListener("mouseover",()=>{                                //마우스 오버 효과를 index 순서에 따라 각각 적용. 
                document.querySelector(".cursor").classList.add("style"+(i+1)); // 스타일 클래스를 추가
            });
            e.addEventListener("mouseout",()=>{                                 //마우스 아웃을 하면
            document.querySelector(".cursor").classList.remove("style"+(i+1));  //스타일 클래스 삭제
            });
        });