[CSS3技术]CSS3菜单气泡提示

[tr][td] 一个Web项目上工作时，不得不以某种方式强调一个动态的通知气泡。基本上每次通知值的变化，需要的视觉效果，以获得用户的注意。


下面为大家提供CSS3菜单气泡提示的代码，希望对大家能有所帮助。




HTML

 
[*]Dashboard
 
[*]Stats
 
[*]
 
 Todo list
 9
 

 
[*]Settings

焦点代码是


9


CSS


.animating{
animation: animate 1s cubic-bezier(0,1,1,0);
}
 
@keyframes animate{
from {
transform: scale(1);
}
to {
transform: scale(1.7);
}
}
 
.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 a {
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 a
{
-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;
}


jquery


var counterValue = parseInt($('.bubble').html());
function removeAnimation(){
 setTimeout(function() {
 $('.bubble').removeClass('animating')
 }, 1000);
}
 
$('#decrement').on('click',function(){
 counterValue--;
 $('.bubble').html(counterValue).addClass('animating');
 removeAnimation();
})
 
$('#increment').on('click',function(){
 counterValue++;
 $('.bubble').html(counterValue).addClass('animating');
 removeAnimation();
})


[/td][/tr]