这款CSS3动画按钮非常的有创意,鼠标在滑过按钮时并不像其他按钮那样仅仅改变按钮的背景颜色,而是出现很酷的冒泡动画。这么惊艳的CSS3动画按钮,这篇文章主要将按钮实现的过程和代码分享给大家,希望能给在学习CSS3的同学带来实质性的帮助。可以下来看看在线演示效果:

在线演示        源码下载

接下来我们来讲解一下这款CSS3气泡动画的按钮实现过程,主要由HTML代码和CSS代码组成。

HTML代码:

<div id="buttonContainer">

    <a href="#">Big Button</a>
<a href="#">Big Button</a>
<a href="#">Big Button</a>
<a href="#">Big Button</a> <a href="#">Medium Button</a>
<a href="#">Medium Button</a>
<a href="#">Medium Button</a>
<a href="#">Medium Button</a> <a href="#">Small Button</a>
<a href="#">Small Button</a>
<a href="#">Rounded</a> <a href="#">Small Button</a>
<a href="#">Small Button</a> <a href="#">Rounded</a> </div>

HTML代码相对比较简单,即用一个个a链接构造按钮,当然演示中的效果还需要CSS的大力渲染才行。

接下来的重点是CSS代码,首先我们来为每一个button渲染基础的样式,这些样式都是每一个按钮所共有的:

.button{
font:15px Calibri, Arial, sans-serif; /* A semi-transparent text shadow */
text-shadow:1px 1px 0 rgba(255,255,255,0.4); /* Overriding the default underline styling of the links */
text-decoration:none !important;
white-space:nowrap; display:inline-block;
vertical-align:baseline;
position:relative;
cursor:pointer;
padding:10px 20px; background-repeat:no-repeat; /* The following two rules are fallbacks, in case
the browser does not support multiple backgrounds. */ background-position:bottom left;
background-image:url('button_bg.png'); /* Multiple backgrounds version. The background images
are defined individually in color classes */ background-position:bottom left, top right, 0 0, 0 0;
background-clip:border-box; /* Applying a default border raidus of 8px */ -moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px; /* A 1px highlight inside of the button */ -moz-box-shadow:0 0 1px #fff inset;
-webkit-box-shadow:0 0 1px #fff inset;
box-shadow:0 0 1px #fff inset; /* Animating the background positions with CSS3 */
/* Currently works only in Safari/Chrome */ -webkit-transition:background-position 1s;
-moz-transition:background-position 1s;
transition:background-position 1s;
} .button:hover{ /* The first rule is a fallback, in case the browser
does not support multiple backgrounds
*/ background-position:top left;
background-position:top left, bottom right, 0 0, 0 0;
} .button:active{
/* Moving the button 1px to the bottom when clicked */
bottom:-1px;
}

同样也定义了按钮在鼠标滑过和被激活时的样式。

最后是气泡动画特效,我们拿其中一个按钮为例,代码如下:

.blue.button{
color:#0f4b6d !important; border:1px solid #84acc3 !important; /* A fallback background color */
background-color: #48b5f2; /* Specifying a version with gradients according to */ background-image: url('button_bg.png'), url('button_bg.png'),
-moz-radial-gradient( center bottom, circle,
rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),
-moz-linear-gradient(#4fbbf7, #3faeeb); background-image: url('button_bg.png'), url('button_bg.png'),
-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(89,208,244,1)), to(rgba(89,208,244,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb));
} .blue.button:hover{
background-color:#63c7fe; background-image: url('button_bg.png'), url('button_bg.png'),
-moz-radial-gradient( center bottom, circle,
rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),
-moz-linear-gradient(#63c7fe, #58bef7); background-image: url('button_bg.png'), url('button_bg.png'),
-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(109,217,250,1)), to(rgba(109,217,250,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7));
}

从代码中我们可以看出,当鼠标滑过按钮时,按钮中的气泡背景图片将实现渐变的动画效果,并加以一定的透明效果,这样便出现了气泡上升的动画特效。所有的代码就是这样,你可以下载源代码来研究。

在线演示        源码下载

纯CSS3冒泡动画按钮实现教程的更多相关文章

  1. 冒泡动画按钮的简单实现(使用CSS3)

    冒泡动画按钮的简单实现(使用CSS3) 原始的参考文章是 http://tutorialzine.com/2010/10/css3-animated-bubble-buttons/ ,基本原理是利用了 ...

  2. 一款基于css3的动画按钮

    之前为大家分享了 推荐10款纯css3实现的实用按钮.今天给大家带来一款基于css3的动画按钮.实现的效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=& ...

  3. 超酷!纯CSS3烧烤动画实现教程

    今天在老外的网站上看到一款很有创意的纯CSS3动画,是模拟烧烤活动的.款动画模拟了一个烧烤架,烧烤架上的食物也都是用纯CSS3绘制而成,没有用一张图片,效果相当逼真.另外一个有意思的是,这个CSS3烧 ...

  4. 纯CSS3带动画效果导航菜单

    随着互联网的发展,网页能表现的东西越来越多.由最开始单纯的文字和链接构成的网页,到后来的表格布局,再到div+css模式,现在发展到了html+css3.网页能表达的东西越来越多,css3兴起已经很多 ...

  5. 纯css3云彩动画效果

      效果描述: 纯CSS3实现的云彩动画飘动效果 非常逼真实用 使用方法: 1.将body中的代码部分拷贝到你的页面中 2.引入对应的CSS文件即可

  6. 纯css3天气动画场景特效

    CSS3超强大,以下是纯用CSS3+HTML实现的场景效果图: 查看效果:http://hovertree.com/h/bjaf/cssrotate.htm css3 3d展示中rotate()介绍与 ...

  7. 纯CSS3垂直动画菜单

    在线演示 本地下载

  8. 8个超炫酷的纯CSS3动画及源码分享

    在现代网页中,我们已经越来越习惯使用大量的CSS3元素,而现在的浏览器也基本都支持CSS3,所以很多时候我们不妨思考一下是否可以用纯CSS3制作一些有趣或者实用的网页.本文要分享8个超炫酷的纯CSS3 ...

  9. 纯CSS3超酷3D旋转立方体动画特效

    简要教程 这是一款神奇的纯 CSS3 立方体动画特效插件.使用CSS3来制作动画效果已经成为WEB前端开发的一种时尚,从简单的颜色和尺寸动画,到复杂的旋转.翻转动画, CSS3 展现了它无穷的魅力.使 ...

随机推荐

  1. 潭州课堂25班:Ph201805201 爬虫基础 第十二课 点触验证码二 (课堂笔记)

    为上次代码添加 模拟人操作 的鼠标的移动轨迹 # -*- coding:utf-8 -*- # 斌彬电脑 # @Time : 2018/9/14 0014 上午 8:08 from selenium ...

  2. only_full_group_by的注意事项

    only_full_group_by的注意事项 使用这个就是使用和oracle一样的group 规则, select的列都要在group中,或者本身是聚合列(SUM,AVG,MAX,MIN) 才行

  3. db2执行计划具体操作

    explain 1.如果第一次执行,请先(在dbinst用户下) connect to dbname,执行db2 -tvf $HOME/sqllib/misc/EXPLAIN.DDL建立执行计划表 2 ...

  4. Linux学习笔记12—磁盘管理

    一.查看磁盘或目录的容量 1.  df命令 作用:查看已挂载磁盘的总容量.使用容量.剩余容量等,可以不加任何参数,默认是按k为单位显示的 参数: -I : 查看inodes使用状况 -h: 使用合适的 ...

  5. 用c#监控网络状态

    1.查询当前网络状态: using Microsoft.VisualBasic.Devices; //判断当前网络连接状态 Network nw=new Network(); if(nw.IsAvai ...

  6. AngularJS中的transclusion案例

    AngularJS中的transclusion类似于包含关系. 通常,这样定义一个directive: <mydirective someprop=""></my ...

  7. 自动化运维之-PXE实现系统批量自动安装

    转自:https://www.linuxidc.com/Linux/2017-10/147379.htm 本节索引 需求分析 PXE简介 整体方案 服务选择 功能实现 安装调试 错误分析 总结 1 需 ...

  8. Win7下MongoDB的安装和使用

    Win7下MongoDB的安装和使用 1.下载: http://www.mongodb.org/downloads 2.安装: 安装目录为 D:\mongodb\MongoDB 2.6 Standar ...

  9. .Net AppDomain详解(二)

    AppDomain 类 表示应用程序域,它是一个应用程序在其中执行的独立环境. 此类不能被继承. 命名空间:   System程序集:  mscorlib(位于 mscorlib.dll) 继承层次结 ...

  10. VC++网络安全编程范例(11)-SSL高级加密网络通信(转)

    SSL(Secure Sockets Layer 安全套接层),及其继任者传输层安全(Transport Layer Security,TLS)是为网络通信提供安全及数据完整性的一种安全协议.TLS与 ...