消息提醒右上角带数字的晃动小铃铛效果 

 1 .icon-animated-bell {
 2   -moz-animation: ringing 3.0s infinite ease 1.0s;
 3   -webkit-animation: ringing 3.0s infinite ease 1.0s;
 4   -o-animation: ringing 3.0s infinite ease 1.0s;
 5   -ms-animation: ringing 3.0s infinite ease 1.0s;
 6   animation: ringing 3.0s infinite ease 1.0s;
 7   -moz-transform-origin: 50% 0%;
 8   -webkit-transform-origin: 50% 0%;
 9   -o-transform-origin: 50% 0%;
10   -ms-transform-origin: 50% 0%;
11   transform-origin: 50% 0%;
12 }
13  
14 @keyframes ringing {
15   0% {
16     transform: rotate(-15deg);
17   }
18   2% {
19     transform: rotate(15deg);
20   }
21   4% {
22     transform: rotate(-18deg);
23   }
24   6% {
25     transform: rotate(18deg);
26   }
27   8% {
28     transform: rotate(-22deg);
29   }
30   10% {
31     transform: rotate(22deg);
32   }
33   12% {
34     transform: rotate(-18deg);
35   }
36   14% {
37     transform: rotate(18deg);
38   }
39   16% {
40     transform: rotate(-12deg);
41   }
42   18% {
43     transform: rotate(12deg);
44   }
45   20% {
46     transform: rotate(0deg);
47   }
48 }
49  

https://blog.csdn.net/song_litao/article/details/84915779

posted on 2021-01-04 16:45  石头1  阅读(900)  评论(0)    收藏  举报

导航