CSS3菜单气泡提示

      一个Web项目上工作时，不得不以某种方式强调一个动态的通知气泡。基本上每次通知值的变化，需要的视觉效果，以获得用户的注意。
     下面为大家提供CSS3菜单气泡提示的代码，希望对大家能有所帮助。

HTML
<ul class="menu">    <li><a href="">Dashboard</a></li>    <li><a href="">Stats</a></li>    <li>        <a href="">            Todo list            <span class="bubble">9</span>        </a>    </li>    <li><a href="">Settings</a></li></ul>
焦点代码是
<span class="bubble">9</span>
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();})

【CSS3菜单气泡提示】相关文章

1. CSS3菜单气泡提示

2. 分享一个纯CSS开发的气泡式提示框

3. 不用图片和JS，照样创建绚丽的动态CSS3菜单

4. 不用图片和JS也可创建绚丽的动态CSS3菜单

5. CSS3实现Tooltip提示框飞入飞出动画

6. jQuery二级下拉菜单 菜单简易实用

7. jQuery/CSS3实现超酷的动画Tab菜单

8. Cufon, jQuery和CSS3实现的超强飞出菜单

9. 使用CSS3特效让你的页面菜单变得更加有趣

10. CSS3制作下拉菜单

本文来源：https://www.51html5.com/a953.html