使用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,1,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 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

它不是那麼容易，因為你可能會認為每次重新啟動的動畫時值的變化，幸好，在這個例子中，我選擇的方法包括使用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類動畫 

 本文連結：使用CSS3主要畫面格動畫建立的動態通知氣泡

歡迎任何形式的轉載，但務必請說明出處