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动画和opacity透明度实现呼吸灯效果
Aug 09 HTML / CSS
CSS3提交意见输入框样式代码
Oct 30 HTML / CSS
html5音频_动力节点Java学院整理
Aug 22 HTML / CSS
整理的15个非常有用的 HTML5 开发教程和速查手册
Oct 18 HTML / CSS
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
Dec 13 HTML / CSS
html5使用canvas实现跟随光标跳动的火焰效果
Jan 07 HTML / CSS
HTML5地理定位实例
Oct 15 HTML / CSS
HTML5 canvas 瀑布流文字效果的示例代码
Jan 31 HTML / CSS
详解Canvas 跨域脱坑实践
Nov 07 HTML / CSS
AmazeUI 单选框和多选框的实现示例
Aug 18 HTML / CSS
详解使用 CSS prefers-* 规范提升网站的可访问性与健壮性
May 25 HTML / CSS
教你做个可爱的css滑动导航条
Jun 15 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基础入门教程
2013/09/21 PHP
PHP操作文件的一些基本函数使用示例
2014/11/18 PHP
php smtp实现发送邮件功能
2017/06/22 PHP
PHP强制转化的形式整理
2020/05/22 PHP
Jquery ui css framework
2010/06/28 Javascript
javascript 进阶篇2 CSS XML学习
2012/03/14 Javascript
Jquery加载时从后台读取数据绑定到dropdownList实例
2013/06/09 Javascript
js switch case default 的用法示例介绍
2013/10/23 Javascript
JavaScript中创建对象和继承示例解读
2014/02/12 Javascript
jquery单击事件和双击事件冲突解决方案
2016/03/02 Javascript
JS验证逗号隔开可以是中文字母数字
2016/04/22 Javascript
jQuery ajax应用总结
2016/06/02 Javascript
详解AngularJS 路由 resolve用法
2017/04/24 Javascript
js学习总结之dom2级事件基础知识详解
2017/07/27 Javascript
angular4自定义组件详解
2017/09/28 Javascript
Vue的移动端多图上传插件vue-easy-uploader的示例代码
2017/11/27 Javascript
vue elementUI table 自定义表头和行合并的实例代码
2019/05/22 Javascript
vue.js iview打包上线后字体图标不显示解决办法
2020/01/20 Javascript
数据挖掘之Apriori算法详解和Python实现代码分享
2014/11/07 Python
Python HTTP客户端自定义Cookie实现实例
2017/04/28 Python
Python基于正则表达式实现文件内容替换的方法
2017/08/30 Python
Django中redis的使用方法(包括安装、配置、启动)
2018/02/21 Python
python 使用 requests 模块发送http请求 的方法
2018/12/09 Python
python 画出使用分类器得到的决策边界
2019/08/21 Python
Python中import导入不同目录的模块方法详解
2020/02/18 Python
python实现超级马里奥
2020/03/18 Python
Python selenium 加载并保存QQ群成员,去除其群主、管理员信息的示例代码
2020/05/28 Python
HTML5样式控制示例代码
2013/11/27 HTML / CSS
简单的JAVA编程面试题
2013/03/19 面试题
上班迟到检讨书
2014/09/15 职场文书
2014年司法局工作总结
2014/12/11 职场文书
元宵节寄语大全
2015/02/27 职场文书
redis连接被拒绝的解决方案
2021/04/12 Redis
MySQL CHAR和VARCHAR该如何选择
2021/05/31 MySQL
手写实现JS中的new
2021/11/07 Javascript
Python实现灰色关联分析与结果可视化的详细代码
2022/03/25 Python