Dynamic notification bubbles created with css3 key frame animations use dynamic notification bubbles created with css3 key frame animations

Recently, when working on a web project, the customer had to emphasize the dynamic notification bubble in some way.Basically, each change in the notification value requires visual effects to gain the user's attention.So I did it and used css3 key frame animation.CodeGenerally, it is relatively simple. You are welcome to repost it in any form, but you must describe the source.

 

Online demonstration click the following two buttons to notify the bubble to change at any time

Html

In this example, we will use the tag structure commonly used in navigation.

 <  Ul  Class  = "Menu"  >      <  Li  > < A  Href  = ""  > Homepage </  A  > </  Li  >      <  Li  > <  A  Href  = ""  > About us </ A  > </  Li  >      <  Li  >          <  A  Href  = ""  >  Latest news  <  Span  Class  = "Bubble" > 9 </  Span  >          </  A  >      </  Li  >      <  Li  > <  A  Href  = ""  > Personal Center</  A  > </  Li  >  </  Ul  > 

Focus on the above<SPAN class = "bubble">This is the animation notification bubble

The CSS

 . AnimatingClassRepresents a css3 animation. We useBesell Curve.Besell Curve, You can start learning

. Animating{Animation:Animate 1 s cubic-bezr (0, 1, 0);}@ Keyframes animate{From {Transform:Scale (1);}To{Transform:Scale (1.7);}}
 

All CSS code

 . Animating { -WebKit-Animation : Animate 1 s cubic-bezr (0, 1, 0) ; -Moz-Animation :Animate 1 s cubic-bezr (0, 1, 0) ; -MS-Animation : Animate 1 s cubic-bezr (0, 1, 0) ; -O-Animation : Animate 1 s cubic-bezr (0, 1, 0) ; Animation : Animate 1 s cubic-bezr (0, 1, 0) ;} @-WebKit-keyframes animate { From {-WebKit-Transform : Scale (1) ;}To { -WebKit-Transform : Scale (1.7) ;} } @-Moz-keyframes animate { From {-moz-Transform : Scale (1) ;} To { -Moz-Transform : Scale (1.7) ;} } @-MS-keyframes animate {From {-MS-Transform : Scale (1) ;} To { -MS-Transform : Scale (1.7) ;} } @-O-keyframes animate { From {-o-Transform : Scale (1) ;} To { -O-Transform :Scale (1.7) ;} } @ Keyframes animate { From {Transform : Scale (1) ;} To { Transform : Scale (1.7) ;} }  /*  -------------------------------------------  */  Body { Text-align : Center ;} . Menu { Margin : 50px auto 20px ; Width : 800px ; Padding : 0 ; List-style : None ;} . Menu {Border : 1px solid #111 ; Background-color : #222 ; -Moz-border-radius : 6px ; -WebKit-border-radius : 6px ; Border-radius : 6px ; -Moz-box-shadow :0 1px 1px #777, 0 1px 0 #666 inset ; -WebKit-box-shadow : 0 1px 1px #777, 0 1px 0 #666 inset ; Box-shadow : 0 1px 1px #777, 0 1px 0 #666 inset ;} . Menu: before,. Menu: After { Content : "" ; Display : Table ;} . Menu: After { Clear : Both ;} . Menu { Zoom : 1 ;} . Menu Li { Float : Left ; Position : Relative ; Border-Right : 1px solid #222 ;-Moz-box-shadow : 1px 0 0 #444 ; -WebKit-box-shadow : 1px 0 0 #444 ; Box-shadow : 1px 0 0 #444 ;} . Menu { Float : Left ; Padding : 12px 30px ; Color :# Bbb ; Text-Transform : Uppercase ; Font : Bold 12px Arial, Helvetica ; Text-Decoration : None ;} . Menu A: hover { Color : # Fafafa ;} . Menu Li: First-Child {-Moz-border-radius : 5px 0 0 5px ; -WebKit-border-radius : 5px 0 0 5px ; Border-radius : 5px 0 0 5px ;} . Menu. Bubble { Background : # E02424 ; Position : Absolute ;Right : 5px ; Top : -5px ; Padding : 2px 6px ; Color : # Fff ; Font : Bold. 9em tahoma, Arial, Helvetica ; -Moz-border-radius : 3px ;-WebKit-border-radius : 3px ; Border-radius : 3px ;} /*  Demo page only  */  # About { Color : #999 ; Text-align : Center ; Font : 0.9em Arial, Helvetica ; Margin : 50px 0 ;} # About { Color : #777 ;}

 

The jquery

It is not that easy, because you may think that the value of the animation changes each time you restart. Fortunately,In this example, the method I select includesSetTimeout ()Method.Therefore, each time the notification value changes,. At the beginning of the second time, animatingClass deleted

 

 VaR Countervalue = parseint({('.bubble'{.html ()); //  Obtains the value of the current change.  Function  Removeanimation () {setTimeout (  Function  () {$ ( '. Bubble'). removeclass ('animating' )}, 1000 ) ;}$ ( '# Decrease'). On ('click ', Function  () {Countervalue --; //  Increment Detail ('.bubble'detail .html (countervalue). addclass ('animate '); //  Dynamic Animation Removeanimation (); //  Delete CSS animations  }) $ ( '# Increase'). On ('click ', Function  () {Countervalue ++; //  Decrease Detail ('.bubble'detail .html (countervalue). addclass ('animate '); //  Dynamic Animation Removeanimation (); // Delete CSS animations 

Link to this article: Dynamic notification bubbles created with css3 Key Frame Animation

You are welcome to reprint it in any form, but be sure to describe the source