css3气泡 css3关键帧动画创建的动态通知气泡

最近在一个web项目上工作时，客户不得不强调以某种方式动态通知泡沫。基本上，每一次的通知值的变化，需要的视觉效果，以获得用户的注意力。所以我做了，使用css3关键帧动画。代码总体比较简单，欢迎任何形式的转载,但务必说明出处

在线演示点击下面的两个按钮 通知气泡会随时变化

的html

在这个例子中，我们将使用导航常用的标记结构

复制代码 代码如下:

<ul class=”menu”>

<li><a href=””>首页</a></li>

<li><a href=””>关于我们</a></li>

<li>

<a href=””>

最新动态

<span class=”bubble”>9</span>

</a>

</li>

<li><a href=””>个人中心</a></li>

</ul>

重点是上面的
<span class="bubble">，这是将动画的通知气泡

the css

.animating 类 代表了一个css3的动画，我们使用贝塞尔曲线.来创建的，如果你是第一个接触贝塞尔曲线，可以打开学习一下

复制代码 代码如下:

.animating{

animation: animate 1s cubic-bezier(0,1,1wanna,0);

}

@keyframes 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 1p外教一对一x #777, 0 1px 0 #666 int;

-webkit-box-shadow: 0 1px 1px #777, 0 1px 0 #666 int;

box-shadow: 0 1px 1px #777, 0 1px 0 #666 int;

}

.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: upperca;

font: bold 12px arial, helvetica;

tex人不在其位t-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;

}

/* demo page only */

#about{

color: #999;

text-align: center;

font: 0.9em arial, helvetica;

margin: 50px 0;

}

#about a{

color: #777;

}

the jquery

它不是那么容易，因为你可能会认为每次重新启动的动画时值的变化，幸好，在这个例子中，我选择的方法包括使用javascript的ttimeout（）的方法。所以，每次通知值变化，.第二次开始的时候animating类被删除

复制代码 代码如下:

var countervalue = parint($(‘.bubble’).html()); // 获取当前变化的值

function removeanimation(){

ttimeout(function() {

$(‘.bubble’).removeclass(‘animating’)

}, 1000);

}

$(‘#decrea’).on(‘click’,function(){

countervalue–; // 递增

$(‘.bubble’).html(countervalue).addclass(‘animating’); // 动态变化的动画

removeanimation(); // 删除css类的动画

})

$(‘#increa’).on(‘click’,function(){

countervalue++; // 递减

$(‘.bubble’).html(countervalue).addclass(‘animating’); // 动态变化的动画

removeanimation(); // 删除css类动画