비전공자 개발일기

Eye Follow Mouse Cursor 본문

HTML _CSS

Eye Follow Mouse Cursor

HiroDaegu 2022. 10. 12. 00:53
728x90
SMALL

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>EYE FOLLOW MOUSE CURSOR</title>
  <link rel="stylesheet" href="style.css">
  <script defer src="main.js"></script>
</head>
<body>
  <div class="container">  
    <div class="eyeBall">  
     <div class="iris"></div>  
    </div>  
    <div class="eyeLid"></div>  
    <div class="lid"></div>  
   </div>  
</body>
</html>
body {  
  display: flex;  
  justify-content: center;  
  align-items: center;  
  height: 100vh;  
  background-color: #dab785;  
 }  
 .container {  
  position: relative;  
  cursor: pointer;  
 }  
 .iris {  
  position: absolute;  
  width: 70px;  
  height: 70px;  
  border: 5px solid #333;  
  background-color: #0077b6;  
  border-radius:50%;  
  left:40px;   
  top:30px;  
 }  
 .iris:before {  
  content:"";  
  position: absolute;  
  background-color: #333;  
  border-radius:50%;  
  width:40px;  
  height: 40px;  
  top:22%;  
  left:22%;  
 }  
 .iris:after {  
  content:"";  
  position: absolute;  
  background-color: rgba(255,255,255,0.4);  
  border-radius: 50%;  
  width:15px;  
  height:15px;  
  top:35%;  
  left:65%;  
  box-shadow: -35px 20px rgba(255,255,255,0.4);  
 }  
 .eyeBall {  
  position: relative;  
  width: 150px;  
  height: 150px;  
  background-color: white;  
  border: 5px solid #333;  
  border-radius:100% 0;  
  box-shadow: inset 5px 5px 5px rgba(0,0,0,0.3);  
  transform: rotate(45deg);  
  top:-10px;  
  z-index:1;  
  overflow: hidden;  
 }  
 .eyeLid {  
  position: absolute;  
  border-top: 5px solid #333;  
  border-left: 5px solid #333;  
  border-radius:100% 0;  
  width: 150px;  
  height: 150px;  
  top:-30px;  
  left:3px;  
  transform: rotate(45deg);  
  transition: .2s;  
  z-index:10;  
 }  
 .container:hover .eyeLid {  
  transform: rotate(-45deg) rotateX(160deg);  
 }  
 .container:hover .lid {  
  transform: translateY(90px);  
 }  
 .lid {  
  position: absolute;  
  z-index:9;  
  background-color: #dab785;  
  width: 295px;  
  height: 270px;  
  border-radius:50%;  
  top:-248px;  
  left:-68px;  
  transition: .2s;  
 }
const eye = document.querySelector('.iris');  
window.addEventListener('mousemove', (event) => {  
const x = -(window.innerWidth / 2 - event.pageX) / 35;  
const y = -(window.innerHeight / 2 - event.pageY) / 35;  
eye.style.transform = `rotate(-45deg) translateY(${y}px) translateX(${x}px)`;       
   });
728x90
LIST

'HTML _CSS' 카테고리의 다른 글

Multi-step Growing BTN  (0) 2022.10.14
Password Strength Checker  (0) 2022.10.13
Hover Menu Text  (0) 2022.10.08
Page Flip  (0) 2022.10.04
Animated Radial Menu  (0) 2022.10.02
'HTML _CSS' Related Articles more