今天小编跟大家讲解下有关css3气泡 css3关键帧动画创建的动态通知气泡 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关css3气泡 css3关键帧动画创建的动态通知气泡 的相关资料，希望小伙伴们看了有所帮助。
最近在一个Web项目上工作时 客户不得不强调以某种方式动态通知泡沫。基本上 每一次的通知值的变化 需要的视觉效果 以获得用户的注意力。所以我做了 使用CSS3关键帧动画。代码总体比较简单 欢迎任何形式的转载,但务必说明出处
在线演示点击下面的两个按钮 通知气泡会随时变化
的HTML
在这个例子中 我们将使用导航常用的标记结构复制代码代码如下:<ul class="menu"> <li><a href="https://www.aidi.net.cn//css/">首页</a></li> <li><a href="https://www.aidi.net.cn//css/">关于我们</a></li> <li> <a href="https://www.aidi.net.cn//css/"> 最新动态 <span class="bubble">9</span> </a> </li> <li><a href="https://www.aidi.net.cn//css/">个人中心</a></li></ul>重点是上面的<span class="bubble"> 这是将动画的通知气泡
The CSS
.animating 类 代表了一个CSS3的动画 我们使用贝塞尔曲线.来创建的 如果你是第一个接触贝塞尔曲线 可以打开学习一下复制代码代码如下:.animating{ animation: animate 1s cubic-bezier(0,1,1,0); [email protected] animate{ from { transform: scale(1); } to { transform: scale(1.7); }}全部的 css代码复制代码代码如下:.animating{ -webkit-animation: animate 1s cubic-bezier(0,1,1,0); -moz-animation: animate 1s cubic-bezier(0,1,1,0); -ms-animation: animate 1s cubic-bezier(0,1,1,0); -o-animation: animate 1s cubic-bezier(0,1,1,0); animation: animate 1s cubic-bezier(0,1,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 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; } #about{ color: #999; text-align: center; font: 0.9em Arial, Helvetica; margin: 50px 0; } #about a{ color: #777; }
The jQuery
它不是那么容易 因为你可能会认为每次重新启动的动画时值的变化 幸好 在这个例子中 我选择的方法包括使用Javascript的setTimeout（）的方法。所以 每次通知值变化 .第二次开始的时候animating类被删除复制代码代码如下:var counterValue = parseInt($('.bubble').html()); // 获取当前变化的值function removeAnimation(){ setTimeout(function() { $('.bubble').removeClass('animating') }, 1000); }$('#decrease').on('click',function(){ counterValue--; // 递增 $('.bubble').html(counterValue).addClass('animating'); // 动态变化的动画 removeAnimation(); // 删除css类的动画})$('#increase').on('click',function(){ counterValue++; // 递减 $('.bubble').html(counterValue).addClass('animating'); // 动态变化的动画 removeAnimation(); // 删除css类动画
来源：爱蒂网
