마우스를 보는 눈

3682 단어 cssjavascriptfunwebdev
이봐! 어떻게 지내? 잘하고 계시길 바랍니다! 최선을 다하길 바랍니다.

여기에 "Eyes Watching Mouse"라는 작고 멋진 것이 있습니다.

우리는 index.html, style.css 및 script.js로 초보자를 위한 상용구를 가지고 있으며 최종 결과는 다음과 같습니다.



구축을 시작합시다

정말 쉬운 html로 시작하고 div 태그만 있으면 됩니다.

HTML

<body>
    <div class="face">
        <div class="eyes">
            <div class="eye"></div>
            <div class="eye"></div>
        </div>
    </div>
</body>


꽤 간단합니다. 멋지죠? "face"클래스가 있는 기본 div는 두 눈이 있는 얼굴을 보유하고 있으며 이전 이미지에서 본 것입니다.

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #333;
    cursor: pointer;
}

.face {
    position: relative;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background-color: #ffcd00;
    display: flex;
    justify-content: center;
    align-items: center;
}

.face::before {
    content: '';
    position: absolute;
    top: 180px;
    width: 150px;
    height: 70px;
    background-color: #b57700;
    border-bottom-left-radius: 70px;
    border-bottom-right-radius: 70px;
    transition: 0.5s;
}

.face:hover::before {
    top: 210px;
    width: 150px;
    height: 20px;
    background-color: #b57700;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

.eyes {
    position: relative;
    top: -40px;
    display: flex;
}

.eyes .eye {
    position: relative;
    width: 80px;
    height: 80px;
    display: block;
    background-color: #fff;
    margin: 0 15px;
    border-radius: 50%;
}

.eyes .eye::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 25px;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    background-color: #333;
    border-radius: 50%;
}


이 코드에 대한 간략한 설명을 드리겠습니다. 그래서 우리는 얼굴을 강조할 배경이 있었고 플렉스를 사용하여 표시했습니다. 이전에 html 코드를 본 경우 다른 div를 보유합니다. "eyes"클래스가 있는 div가 있습니다. 그것이 주요 부분이 될 것입니다.

따라서 얼굴 위로 마우스를 가져가면 미소 효과가 무감각해집니다. 그것은 당신이 얼굴 안쪽을 가리킬 때입니다. 커서 영역이 얼굴 위로 올라가면 웃는 얼굴이 보입니다.

스크립트

document.querySelector('body').addEventListener('mousemove', eyeball);

function eyeball() {
    var eye = document.querySelectorAll('.eye');
    eye.forEach(function(eye){
        let x = (eye.getBoundingClientRect().left) + (eye.clientWidth / 2);
        let y = (eye.getBoundingClientRect().top) + (eye.clientHeight / 2);
        let radian = Math.atan2(event.pageX - x, event.pageY - y);
        let rot = (radian * (180 / Math.PI) * -1) + 270;
        eye.style.transform = "rotate("+ rot + "deg)";
    })
}


이를 이해하려면 querySelectorAll, getBoundingClientRect, atan2, pageX, pageY에 대한 지식 예감이 있어야 합니다.

querySelectorAll은 모든 p 태그 또는 모든 h1 태그와 같이 공통점이 있는 모든 쿼리를 선택합니다. Element.getBoundingClientRect() 메서드는 요소의 크기와 뷰포트에 상대적인 위치에 대한 정보를 제공하는 DOMRect 객체를 반환합니다.

더 이상 설명하고 싶지 않습니다. 그렇게 멋지지 않을 것입니다. 다음주에 보자! 여기에서 내 Github 저장소에 대한 링크와 이름을 붙이고 부를 수 있는 모든 것의 라이브 배포로 마무리하고 싶습니다.

Repo ⚡
Live ⚡
인 메모리 및 캐시 DB(Amazon ElastiCache)
CDK8S를 사용하는 코드로서의 Keda ScaledObject

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage