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 绘制BMW logo实的现代码
Apr 25 HTML / CSS
利用CSS3的特性改变文本选中时的颜色
Sep 11 HTML / CSS
css3 中的新特性加强记忆详解
Apr 16 HTML / CSS
基于HTML5 Canvas 实现弹出框效果
Jun 05 HTML / CSS
HTML5 的新的表单元素(datalist/keygen/output)使用介绍
Jul 19 HTML / CSS
深入解析HTML5中的Blob对象的使用
Sep 08 HTML / CSS
canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动
Jan 10 HTML / CSS
Canvas引入跨域的图片导致toDataURL()报错的问题的解决
Sep 19 HTML / CSS
html5手机键盘弹出收起的处理
Jan 20 HTML / CSS
Html5移动端div固定到底部实现底部导航条的几种方式
Mar 09 HTML / CSS
Web前端:CSS最强总结 附详细代码
Mar 31 HTML / CSS
纯CSS打字动画的实现示例
Aug 05 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
利用discuz自带通行证整合dedecms的方法以及文件下载
2007/03/06 PHP
支持数组的ADDSLASHES的php函数
2010/02/16 PHP
php中使用$_REQUEST需要注意的一个问题
2013/05/02 PHP
PHP截断标题且兼容utf8和gb2312编码
2013/09/22 PHP
一张表搞清楚php is_null、empty、isset的区别
2015/07/07 PHP
PHP的PDO大对象(LOBs)
2019/01/27 PHP
php xhprof使用实例详解
2019/04/15 PHP
JavaScript执行效率与性能提升方案
2012/12/21 Javascript
jquery队列queue与原生模仿其实现方法分享
2014/03/25 Javascript
js验证真实姓名与身份证号是否匹配
2015/10/13 Javascript
js性能优化技巧
2015/11/29 Javascript
浅谈JS中逗号运算符的用法
2016/06/12 Javascript
Bootstrap 3浏览器兼容性问题及解决方案
2017/04/11 Javascript
jQuery接受后台传递的List的实例详解
2017/08/02 jQuery
微信小程序request请求后台接口php的实例详解
2017/09/20 Javascript
通过fastclick源码分析彻底解决tap“点透”
2017/12/24 Javascript
js和jQuery以及easyui实现对下拉框的指定赋值方法
2018/01/23 jQuery
js实现左右两侧浮动广告
2018/07/09 Javascript
详解wepy开发小程序踩过的坑(小结)
2019/05/22 Javascript
微信小程序学习总结(四)事件与冒泡实例分析
2020/06/04 Javascript
[08:38]DOTA2-DPC中国联赛 正赛 VG vs Elephant 选手采访
2021/03/11 DOTA
python数据结构树和二叉树简介
2014/04/29 Python
python生成指定尺寸缩略图的示例
2014/05/07 Python
python导入csv文件出现SyntaxError问题分析
2017/12/15 Python
为什么入门大数据选择Python而不是Java?
2018/03/07 Python
使用python读取txt文件的内容,并删除重复的行数方法
2018/04/18 Python
pygame游戏之旅 添加游戏介绍
2018/11/20 Python
Pytorch加载部分预训练模型的参数实例
2019/08/18 Python
快速解决jupyter notebook启动需要密码的问题
2020/04/21 Python
TensorFlow2.0使用keras训练模型的实现
2021/02/20 Python
使用HTML5做的导航条详细步骤
2020/10/19 HTML / CSS
比利时香水网上商店:NOTINO
2018/03/28 全球购物
简述数据库的设计过程
2015/06/22 面试题
小学家长会邀请函
2014/01/23 职场文书
离退休人员聘用协议书
2014/11/24 职场文书
Win11局域网共享权限在哪里设置? Win11高级共享的设置技巧
2022/04/05 数码科技