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仿造window7的开始菜单
Jun 17 HTML / CSS
css3实现的多级渐变下拉菜单导航效果代码
Aug 31 HTML / CSS
使用CSS3实现SVG路径描边动画效果入门教程
Oct 21 HTML / CSS
canvas实现圆绘制的示例代码
Sep 11 HTML / CSS
HTML5 Canvas中绘制椭圆的4种方法
Apr 24 HTML / CSS
推荐10个HTML5响应式框架
Feb 25 HTML / CSS
完美解决IE8下不兼容rgba()的问题
Mar 31 HTML / CSS
HTML5 Canvas 实现K线图的示例代码
Dec 23 HTML / CSS
html5简介及新增功能介绍
May 18 HTML / CSS
Html5 canvas画图白板踩坑
Jun 01 HTML / CSS
CSS 伪元素::marker详解
Jun 26 HTML / CSS
分享CSS盒子模型隐藏的几种方式
Feb 28 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 连接mssql数据库 初学php笔记
2010/03/01 PHP
mysql数据库差异比较的PHP代码
2012/02/05 PHP
Zend Framework分页类用法详解
2016/03/22 PHP
PHP使用gearman进行异步的邮件或短信发送操作详解
2020/02/27 PHP
javascript中利用数组实现的循环队列代码
2010/01/24 Javascript
jQuery each()小议
2010/03/18 Javascript
javascript与CSS复习(三)
2010/06/29 Javascript
js实现单一html页面两套css切换代码
2013/04/11 Javascript
javascript实现浏览器窗口传递参数的方法
2014/09/03 Javascript
jQuery实现自定义下拉列表
2015/01/05 Javascript
js操作css属性实现div层展开关闭效果的方法
2015/05/11 Javascript
js的flv视频播放器插件使用方法
2015/06/23 Javascript
基于jquery实现省市区三级联动效果
2015/12/25 Javascript
jQuery实现鼠标经过购物车出现下拉框代码(推荐)
2016/07/21 Javascript
深入理解jQuery.data() 的实现方式
2016/11/30 Javascript
ES6中Math对象的部分扩展
2017/02/20 Javascript
Vue.js 60分钟快速入门教程
2017/03/28 Javascript
微信小程序 登录的简单实现
2017/04/19 Javascript
Vue2.0中集成UEditor富文本编辑器的方法
2018/03/03 Javascript
vue组件(全局,局部,动态加载组件)
2018/09/02 Javascript
微信小程序如何再次获取用户授权的方法
2019/05/10 Javascript
JavaScript实现4位随机验证码的生成
2021/01/28 Javascript
零基础写python爬虫之抓取百度贴吧并存储到本地txt文件改进版
2014/11/06 Python
Python操作列表之List.insert()方法的使用
2015/05/20 Python
简单了解django索引的相关知识
2019/07/17 Python
python自动脚本的pyautogui入门学习
2020/04/01 Python
Python sqlalchemy时间戳及密码管理实现代码详解
2020/08/01 Python
解决pycharm不能自动保存在远程linux中的问题
2021/02/06 Python
css3实现波纹特效、H5实现动态波浪效果
2018/01/31 HTML / CSS
HTML5的表单(绝对特别强大的功能)使用示例
2013/06/20 HTML / CSS
UNIONBAY官网:美国青少年服装品牌
2019/03/26 全球购物
会计工作心得体会
2014/01/13 职场文书
公益活动邀请函
2014/02/05 职场文书
项目经理任命书内容
2014/06/06 职场文书
学校党委干部个人对照检查材料思想汇报
2014/10/09 职场文书
Python实现生成bmp图像的方法
2021/06/13 Python