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


Posted in HTML / CSS onFebruary 26, 2013

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

css3气泡 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类动画
HTML / CSS 相关文章推荐
css3实现背景图片拉伸效果像桌面壁纸一样
Aug 19 HTML / CSS
css3一个简易的 LED 数字时钟实现方法
Jan 15 HTML / CSS
css3 实现元素弧线运动的示例代码
Apr 24 HTML / CSS
HTML5文档结构标签
Apr 21 HTML / CSS
20佳惊艳的HTML5应用程序示例分享
May 03 HTML / CSS
HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析
Jan 30 HTML / CSS
html5教程实现Photoshop渐变色效果
Dec 04 HTML / CSS
html5 canvas移动浏览器上实现图片压缩上传
Mar 11 HTML / CSS
HTML5、Select下拉框右边加图标的实现代码(增进用户体验)
Oct 16 HTML / CSS
解决HTML5中滚动到底部的事件问题
Aug 22 HTML / CSS
使用canvas压缩图片上传的方法示例
Feb 07 HTML / CSS
CSS3实现的3D隧道效果
Apr 27 HTML / CSS
css 省略号 css3让多余的字符串消失并附加省略号的实现代码
Feb 07 #HTML / CSS
7款设计巧妙的css3飘带状3D立体效果的导航菜单和表单窗口
Feb 04 #HTML / CSS
8款精美的CSS3表单设计(登录表单/下拉选择/按钮附演示及源码)
Feb 04 #HTML / CSS
css3实现针线缝合效果(图解步骤)
Feb 04 #HTML / CSS
用css3制作纸张效果(外翻卷角)
Feb 01 #HTML / CSS
css3动画事件—webkitAnimationEnd与计时器time事件
Jan 31 #HTML / CSS
CSS3 制作绽放的莲花采用效果叠加实现
Jan 31 #HTML / CSS
You might like
PHP安全技术之 实现php基本安全
2010/09/04 PHP
php中ltrim()、rtrim()与trim()删除字符空格实例
2014/11/25 PHP
php使用PDO方法详解
2014/12/27 PHP
常见的四种POST 提交数据方式(小总结)
2015/10/08 PHP
详解WordPress开发中get_header()获取头部函数的用法
2016/01/08 PHP
Zend Framework框架教程之Zend_Db_Table_Rowset用法实例分析
2016/03/21 PHP
PHP让网站移动访问更加友好方法
2019/02/14 PHP
一些易混淆且不常用的属性,希望有用
2007/01/29 Javascript
Javascript中的回调函数和匿名函数的回调示例介绍
2014/05/12 Javascript
JavaScript中string对象
2015/06/12 Javascript
js判断手机端(Android手机还是iPhone手机)
2015/07/22 Javascript
javascript实现动态统计图开发实例
2015/11/21 Javascript
JS 实现倒计时数字时钟效果【附实例代码】
2016/03/30 Javascript
仿百度换肤功能的简单实例代码
2016/07/11 Javascript
AngularJs bootstrap搭载前台框架——基础页面
2016/09/01 Javascript
基于rem的移动端响应式适配方案(详解)
2017/07/07 Javascript
JS中验证整数和小数的正则表达式
2018/10/08 Javascript
如何为vuex实现带参数的 getter和state.commit
2019/01/04 Javascript
js实现图片上传即时显示效果
2019/09/30 Javascript
如何利用JavaScript编写更好的条件语句详解
2020/08/10 Javascript
vue treeselect获取当前选中项的label实例
2020/08/31 Javascript
[03:56]显微镜下的DOTA2第十一期——鬼畜的死亡先知播音员
2014/06/23 DOTA
windows 10下安装搭建django1.10.3和Apache2.4的方法
2017/04/05 Python
Pycharm学习教程(3) 代码运行调试
2017/05/03 Python
关于Python正则表达式 findall函数问题详解
2018/03/22 Python
pygame游戏之旅 创建游戏窗口界面
2018/11/20 Python
Python调用C语言程序方法解析
2020/07/07 Python
利用css3径向渐变做一张优惠券的示例
2018/03/22 HTML / CSS
html5 sessionStorage会话存储_动力节点Java学院整理
2017/07/06 HTML / CSS
New Balance加拿大官方网站:运动鞋和健身服装
2018/11/19 全球购物
进程的查看和调度分别使用什么命令
2015/03/25 面试题
建筑工程造价专业自荐信
2014/07/08 职场文书
工作检讨书范文
2015/01/23 职场文书
幼儿园六一主持词
2015/06/30 职场文书
食堂卫生管理制度
2015/08/04 职场文书
《自己去吧》教学反思
2016/02/16 职场文书