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

Member Guide

아미나빌드 멤버 가이드

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

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

6 메모톡 3 183 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 를 호출하시면 됩니다.

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

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

이렇게 사용하고 있어용
6 메모톡 07.12 21:17  
아. 물런 앞쪽엔 이벤트에 대한 것이 있구요...
제목
최근 글
최근 댓글
Facebook Twitter GooglePlus KakaoStory KakaoTalk NaverBand