JavaScript mouse Effect01

<main>
    <section id="mouseType01">
        <div class="cursor"></div>

        <div class="mouse__wrap">
            <p><span class="style1">Nothing</span> can be done without <span class="style2">hope</span> and <span class="style3">confidence.</span></p>
            <p><span class="style4">희망</span>과 <span class="style5">자신감</span>이 없으면 <span class="style6">아무것</span>도 이루어질 수 없다.</p>
        </div>
    </section>
</main>

body::before {                      
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    background: rgba(46, 85, 107, 0.7);
    z-index: -1;
    }
    .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-color: rgba(255,255,255,0.1);
        user-select: none;
        pointer-events: none;
        transition:
            background-color 0.2s,
            border-color 0.2s
            transform 0.6s
    }
    .cursor.style1 {        /* 마우스 오버했을때 효과 */
        background-color: rgba(255,165,0,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: rgba(0, 47, 255, 0.4);
        border-color: rgb(0, 47, 255);
        transform: scale(1.5) rotate(45deg);
        border-radius: 10px;
    }
    .cursor.style4 {
        background-color: rgba(121, 235, 197, 0.4);
        border-color: rgb(121, 235, 197);
        transform: scale(3) rotateY(360deg);
    }
    .cursor.style5 {
        background-color: rgba(255, 0, 85, 0.4);
        border-color: rgb(255, 0, 85);
        transform: rotateY(720deg) scale(2.5);
    }
    .cursor.style6 {
        background-color: rgba(0, 255, 255, 0.4);
        border-color: rgb(0,255,255);
        transform: rotateY(720deg) scale(0.5);
    }

<script>
    //출력용 => 마우스좌표
    window.addEventListener("mousemove", (event) => {
        document.querySelector(".clientX").innerText = event.clientX;
        document.querySelector(".clientY").innerText = event.clientY;
        document.querySelector(".offsetX").innerText = event.offsetX;
        document.querySelector(".offsetY").innerText = event.offsetY;
        document.querySelector(".pageX").innerText = event.pageX;
        document.querySelector(".pageY").innerText = event.pageY;
        document.querySelector(".screenX").innerText = event.screenX;
        document.querySelector(".screenY").innerText = event.screenY;
    })

    //마우스 움직이기
    window.addEventListener("mousemove", (e) => {
        document.querySelector(".cursor").style.left = e.clientX - 25 + "px";
        document.querySelector(".cursor").style.top = e.clientY - 25 + "px";
    });

    const style = document.querySelectorAll(".mouse__wrap span")    //마우스 오버효과 위치
    
    //for문으로 출력
    for(let i=0; i<style.length; i++){
        style[i].addEventListener("mouseover", () => {
            document.querySelector(".cursor").classList.add("style" + (i+1));
        });
        style[i].addEventListener("mouseout", () => {
            document.querySelector(".cursor").classList.remove("style" + (i+1));
        });
    }

    //forEach문으로 출력
    style.forEach((el, i) => {
        el.addEventListener("mouseover", () => {
            document.querySelector(".cursor").classList.add(`style${i+1}`);
        });
        el.addEventListener("mouseout", () => {
            document.querySelector(".cursor").classList.remove(`style${i+1}`);
        });
    });
</script>