์๋ ํ์ธ์~~
์ฝ๋๊ทธ๋ฆผ์ ๋๋ค (๏ฝก๏ฝฅ∀๏ฝฅ)๏พ๏พ
์ค๋์ css๋ก ํํธ๋ฅผ ๋ง๋ค์ด์
๋ง์ฐ์ค๊ฐ ์์ง์ด๋๋๋ก ๋ฐ๋ผ์ค๊ฒ ๋ง๋ค์ด ๋ณด๊ฒ ์ต๋๋ค.
(๋ง์ฐ์ค ์ปค์๋ฅผ ํํธ๋ก ์ปค์คํ ํ๊ธฐ!!)
์ฝ๋๋ ์์ฃผ ๊ฐ๋จํฉ๋๋ค!!
์ ๋ ์๋ฐ์คํฌ๋ฆฝํธ ๋ง์ฐ์ค ์ด๋ฒคํธ๋ฅผ ์ดํดํ๊ธฐ ์ํด ๋ง๋ค์ด ๋ดค์ด์ (โ´โก`โ)
See the Pen Mouse Cursor Event (Easy, Basic)๐ณ๐น by CodeGream (@joowon0220) on CodePen.
css๋ก ํํธ๋ฅผ ๋ง๋๋ ์๋ฆฌ๋
๋ง๋ฆ๋ชจ๋ฅผ ๋จผ์ ๋ง๋ค๊ณ
์์ ๋๊ทธ๋ผ๋ฏธ ๋๊ฐ๋ฅผ ์ฌ๋ฆฌ๋ ์๋ฆฌ์ ๋๋ค ๐
ํ๋ฒ css์๊น์ ๋ฐ๊ฟ๊ฐ๋ฉด์ ํ์ธํด ๋ณด์ ์ฉ ใ ใ ใ
codepen.io/joowon0220/pen/VwPZjxR
Mouse Cursor Event (Easy, Basic)๐ณ๐น
This is the very basic mouse event!ใพ(•ω•`)o It helps you to figure out how mouse cursor event works! ๐ป Heart shaped mouse cursor will follow your movem...
codepen.io
์์ค์ฝ๋๋ฅผ ์ด๋ค ๋ฐฉ์์ผ๋ก ๋ณด๋๊ฒ ํธํ์ค์ง ๋ชฐ๋ผ์
์๋๋๋ก ๋ค ์ค๋นํด ๋ดค์ต๋๋ค~~
๋ณต๋ถํด์ ํ์ฉํด ๋ณด์ธ์~~
<!DOCTYPE html>
<html lang="en">
<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>HeartPoint</title>
<style>
* {
margin: 0;
}
.heart {
position: absolute;
margin: auto;
top: 0;
left: 0;
background-color: pink;
rgba(255,181,248, 0.7);
height: 50px;
width: 50px;
transform: rotate(-45deg);
animation-name: beat;
animation-duration: 1s;
animation-iteration-count: infinite;
}
.heart:after {
background-color: pink;
rgba(255,181,248, 0.7);
content: "";
border-radius: 50%;
position: absolute;
width: 50px;
height: 50px;
top: 0px;
left: 25px;
}
.heart:before {
background-color: pink;
rgba(255,181,248, 0.7);
content: "";
border-radius: 50%;
position: absolute;
width: 50px;
height: 50px;
top: -25px;
left: 0px;
}
</style>
</head>
<body>
<div class="heart"></div>
<script>
const circle = document.querySelector(".heart");
document.addEventListener("mousemove", (e) => {
const mouseX = e.clientX;
const mouseY = e.clientY;
circle.style.left = mouseX + 'px';
circle.style.top = mouseY + 'px';
});
</script>
</body>
</html>
๊นํ๋ธ ๋ณด๋ฌ ๋๋ฌ์ค์ธ์ ๐ (๋งํํ์)
Joowon0220 - Overview
๐ ๐๐ค๐ฅ๐ ๐ข๐ฎ ๐๐ค๐๐'๐จ ๐ฌ๐๐ง๐ข๐ฉ๐ ๐ฉ๐ค๐ช๐๐๐๐จ ๐ฎ๐ค๐ช :) . Joowon0220 has 14 repositories available. Follow their code on GitHub.
github.com
๋๊ธ