벨아이콘 이벤트시에 좌우로 흔들거리게 만들기 ^^

Member Guide

아미나빌드 멤버 가이드

홈 > 회원포럼 > 회원가이드
회원가이드

벨아이콘 이벤트시에 좌우로 흔들거리게 만들기 ^^

11 메모톡 14 1061 0

.icon-animated-bell{display:inline-block;-moz-animation:ringing 2s 9999 ease 1s;-webkit-animation:ringing 2s 9999 ease 1s;-o-animation:ringing 2s 9999 ease 1s;-ms-animation:ringing 2s 9999 ease 1s;animation:ringing 2s 9999 ease 1s;-moz-transform-origin:50% 0;-webkit-transform-origin:50% 0;-o-transform-origin:50% 0;-ms-transform-origin:50% 0;transform-origin:50% 0}@-moz-keyframes ringing{0%{-moz-transform:rotate(-15deg)}2%{-moz-transform:rotate(15deg)}4%{-moz-transform:rotate(-18deg)}6%{-moz-transform:rotate(18deg)}8%{-moz-transform:rotate(-22deg)}10%{-moz-transform:rotate(22deg)}12%{-moz-transform:rotate(-18deg)}14%{-moz-transform:rotate(18deg)}16%{-moz-transform:rotate(-12deg)}18%{-moz-transform:rotate(12deg)}20%{-moz-transform:rotate(0deg)}}@-webkit-keyframes ringing{0%{-webkit-transform:rotate(-15deg)}2%{-webkit-transform:rotate(15deg)}4%{-webkit-transform:rotate(-18deg)}6%{-webkit-transform:rotate(18deg)}8%{-webkit-transform:rotate(-22deg)}10%{-webkit-transform:rotate(22deg)}12%{-webkit-transform:rotate(-18deg)}14%{-webkit-transform:rotate(18deg)}16%{-webkit-transform:rotate(-12deg)}18%{-webkit-transform:rotate(12deg)}20%{-webkit-transform:rotate(0deg)}}@-ms-keyframes ringing{0%{-ms-transform:rotate(-15deg)}2%{-ms-transform:rotate(15deg)}4%{-ms-transform:rotate(-18deg)}6%{-ms-transform:rotate(18deg)}8%{-ms-transform:rotate(-22deg)}10%{-ms-transform:rotate(22deg)}12%{-ms-transform:rotate(-18deg)}14%{-ms-transform:rotate(18deg)}16%{-ms-transform:rotate(-12deg)}18%{-ms-transform:rotate(12deg)}20%{-ms-transform:rotate(0deg)}}@keyframes ringing{0%{transform:rotate(-15deg)}2%{transform:rotate(15deg)}4%{transform:rotate(-18deg)}6%{transform:rotate(18deg)}8%{transform:rotate(-22deg)}10%{transform:rotate(22deg)}12%{transform:rotate(-18deg)}14%{transform:rotate(18deg)}16%{transform:rotate(-12deg)}18%{transform:rotate(12deg)}20%{transform:rotate(0deg)}}



사용방법은 저대로 css 에 넣으시고 .뒤에있는 icon-animated-bell 를 호출하시면 됩니다.

저는 알림이 울릴때 벨이 흔들리게 했더니 넘 좋네요.. ^^

14 Comments
20 사노라면 2019.07.12 21:13  
icon-animated-bell 호출를 어떻게 하면 될까요?
11 메모톡 2019.07.12 21:16  
음.. 예를 들어.. .전 ..
<span class="ace-icon fa fa-bell    icon-animated-bell "></span>

이렇게 사용하고 있어용
11 메모톡 2019.07.12 21:17  
아. 물런 앞쪽엔 이벤트에 대한 것이 있구요...
1 도토리묵 2019.08.30 12:54  
적용하니 너무 이쁩니다!
4 자우리 2019.11.24 00:47  
오 이건 대박입니다 ^^!
11 선우샵 2019.11.24 00:56  
감사합니다. ^^
1 서서빠빠 01.09 13:38  
좋은정보 감사합니다
11 선우샵 08.21 15:31  
감사합니다.
1 넝넝 02.18 09:51  
감사합니다!
11 선우샵 08.21 15:32  
저도 감사드려요~ ^^
4 gotiger 08.19 22:05  
적용하고 싶은 초보자는 웁니다 ㅠㅠ
11 선우샵 08.21 15:31  
댓글내용 확인
1 로리콘 11.21 15:01  
감사합니다.
11 선우샵 11.21 18:26  
저도 감사드려요~^^
제목
최근 글
최근 댓글
Facebook Twitter GooglePlus KakaoStory KakaoTalk NaverBand