css3氣泡 css3關(guān)鍵幀動畫創(chuàng)建的動態(tài)通知?dú)馀?/h1>

  發(fā)布時間：2013-02-26 14:10:22   作者：佚名   我要評論

客戶不得不強(qiáng)調(diào)以某種方式動態(tài)通知泡沫,因此我使用CSS3關(guān)鍵幀動畫做了一個代碼比較簡單，感興趣的你可以參考下，希望本文內(nèi)容可以幫助到你

最近在一個Web項目上工作時，客戶不得不強(qiáng)調(diào)以某種方式動態(tài)通知泡沫?；旧?，每一次的通知值的變化，需要的視覺效果，以獲得用戶的注意力。所以我做了，使用CSS3關(guān)鍵幀動畫。代碼總體比較簡單，歡迎任何形式的轉(zhuǎn)載,但務(wù)必說明出處

在線演示點(diǎn)擊下面的兩個按鈕 通知?dú)馀輹S時變化

的HTML

在這個例子中，我們將使用導(dǎo)航常用的標(biāo)記結(jié)構(gòu)

復(fù)制代碼

代碼如下:

<ul class="menu">
<li><a href="">首頁</a></li>
<li><a href="">關(guān)于我們</a></li>
<li>
<a href="">
最新動態(tài)
<span class="bubble">9</span>
</a>
</li>
<li><a href="">個人中心</a></li>
</ul>

重點(diǎn)是上面的<span class="bubble">，這是將動畫的通知?dú)馀?/p>

The CSS

 .animating 類 代表了一個CSS3的動畫，我們使用貝塞爾曲線.來創(chuàng)建的，如果你是第一個接觸貝塞爾曲線，可以打開學(xué)習(xí)一下

復(fù)制代碼

代碼如下:

.animating{
animation: animate 1s cubic-bezier(0,1,1,0);
}
@keyframes animate{
from {
transform: scale(1);
}
to {
transform: scale(1.7);
}
}

全部的 css代碼

復(fù)制代碼

代碼如下:

.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;
}
/* Demo page only */
#about{
color: #999;
text-align: center;
font: 0.9em Arial, Helvetica;
margin: 50px 0;
}
#about a{
color: #777;
}

 

The jQuery

它不是那么容易，因?yàn)槟憧赡軙J(rèn)為每次重新啟動的動畫時值的變化，幸好，在這個例子中，我選擇的方法包括使用JavaScript的setTimeout（）的方法。所以，每次通知值變化，.第二次開始的時候animating類被刪除

復(fù)制代碼

代碼如下:

var counterValue = parseInt($('.bubble').html()); // 獲取當(dāng)前變化的值
function removeAnimation(){
setTimeout(function() {
$('.bubble').removeClass('animating')
}, 1000);
}
$('#decrease').on('click',function(){
counterValue--; // 遞增
$('.bubble').html(counterValue).addClass('animating'); // 動態(tài)變化的動畫
removeAnimation(); // 刪除css類的動畫
})
$('#increase').on('click',function(){
counterValue++; // 遞減
$('.bubble').html(counterValue).addClass('animating'); // 動態(tài)變化的動畫
removeAnimation(); // 刪除css類動畫

• Tag：關(guān)鍵幀   動畫   氣泡  

相關(guān)文章

• CSS3中的@keyframes關(guān)鍵幀動畫的選擇器綁定

  @keyframes可以幫助我們進(jìn)行類似Flash中的關(guān)鍵幀動畫制作,這里我們來簡單討論一下CSS3中的@keyframes關(guān)鍵幀動畫的選擇器綁定,需要的朋友可以參考下

  2016-06-13
• 

  詳解CSS動畫屬性關(guān)鍵幀keyframes全解析

  這篇文章主要介紹了詳解CSS動畫屬性關(guān)鍵幀keyframes全解析的相關(guān)資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

  2019-01-09

最新評論