어느 곳을 클릭 할 때마다 효과를!
사람마다 인터넷을 이용할때 습관이 다 다르겠지만 글을 읽을 때 드래그 하는 스타일 이라던가 클릭하면서 본다던가 말이다. 그런 유저들 그리고 사이트 컨셉에 따라서 마우스 클릭시 효과를 주어서 생동감 있게 만들어주는 방법을 알려드리도록 하겠다.
생각보다 매우 쉬우니 가볍게 컨트롤 C 컨트롤 V로 효과를 만들어보도록 하자.
출처 사이트 : https://fdossena.com/?p=html5cool/clickfx/i.frag
CSS 코드
HTML 편집 - CSS 탭 - 아래 코드를 복붙 하면 끝.
div.clickEffect{
position:fixed;
box-sizing:border-box;
border-style:solid;
border-color:#000000;
border-radius:50%;
animation:clickEffect 0.4s ease-out;
z-index:99999;
}
@keyframes clickEffect{
0%{
opacity:1;
width:0.5em; height:0.5em;
margin:-0.25em;
border-width:0.5rem;
}
100%{
opacity:0.2;
width:15em; height:15em;
margin:-7.5em;
border-width:0.03rem;
}
}
이 코드를 보면 border-color나 radius의 수치, clickEffect 쪽 수치도 가며 자신만의 스타일로 맞출 수 있다. 물론 그냥 사용해도 무리는 없을 듯 싶다. 사실 정확히 말하면 클릭했을 때 효과가 아니고 마우스를 클릭 후 떼었을 때의 효과다. 이 차이정도만 알고 있으면 될 것 같다. 쉽고 가볍지만 효과는 좋은 마우스 이펙트 효과를 알려드리며 이번 포스팅은 여기까지 마치도록 하겠다.
뭔가 했더니..., ㅎㅎ
정말 재밌는 기능입니다. 나중에 써먹어봐야겠습니다
은근히 또 요런거 좋아하는 분들이 계시거든요.. ㅎㅎㅎ
클릭하면 동그란 파형이 커졌다가 없어지네요. ㅋㅋ
ㅋㅋㅋ 솔직히 그냥 재미로 하기엔 좋을것 같더라구요.. ㅎㅎ
뭔가 원이 조금 더 작고 효과가 조금 더 빠르면 괜찮지 않을까 싶네요 ㅎㅎ
계속 여기저기 클릭하게 하는 매력이 있네요 ㅎㅎ
마샬님의 의견을 참고하여 한번 해봐야겠습니다!ㅎㅎ
저 부분을 css에 아무곳에 붙여넣기했는데 효과가 안생기는데 무슨문제가있을까욤
음.. CSS를 제대로 붙였는데 안되신다면 캐쉬를 한번 삭제하시고 다시한번 확인해보시는걸 추천드립니다!
캐쉬 삭제해도 안되네요ㅠ근데 덕분에
블로그 많이꾸몄어요 감사합니다
그렇군요.. 이상하네요^-^; 꼭 성공하시길..
잘 지내셨습니까~ 생존인사 드립니다.. ㅋ
재미난 추석 연휴 보내셨길 바라며, 이 꿀팁은 나중에 써먹어봐야겠습니다~ ^^
땀똔님 잘 지내셨나요~?^-^
저도 덕분에 생존신고합니다! 땀똔님도 추석 잘 보내셨죠? 오늘 하루도 화이팅 입니다~!