纯CSS3冒泡动画按钮实现教程
这款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冒泡动画按钮实现教程的更多相关文章
- 冒泡动画按钮的简单实现(使用CSS3)
冒泡动画按钮的简单实现(使用CSS3) 原始的参考文章是 http://tutorialzine.com/2010/10/css3-animated-bubble-buttons/ ,基本原理是利用了 ...
- 一款基于css3的动画按钮
之前为大家分享了 推荐10款纯css3实现的实用按钮.今天给大家带来一款基于css3的动画按钮.实现的效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class=& ...
- 超酷!纯CSS3烧烤动画实现教程
今天在老外的网站上看到一款很有创意的纯CSS3动画,是模拟烧烤活动的.款动画模拟了一个烧烤架,烧烤架上的食物也都是用纯CSS3绘制而成,没有用一张图片,效果相当逼真.另外一个有意思的是,这个CSS3烧 ...
- 纯CSS3带动画效果导航菜单
随着互联网的发展,网页能表现的东西越来越多.由最开始单纯的文字和链接构成的网页,到后来的表格布局,再到div+css模式,现在发展到了html+css3.网页能表达的东西越来越多,css3兴起已经很多 ...
- 纯css3云彩动画效果
效果描述: 纯CSS3实现的云彩动画飘动效果 非常逼真实用 使用方法: 1.将body中的代码部分拷贝到你的页面中 2.引入对应的CSS文件即可
- 纯css3天气动画场景特效
CSS3超强大,以下是纯用CSS3+HTML实现的场景效果图: 查看效果:http://hovertree.com/h/bjaf/cssrotate.htm css3 3d展示中rotate()介绍与 ...
- 纯CSS3垂直动画菜单
在线演示 本地下载
- 8个超炫酷的纯CSS3动画及源码分享
在现代网页中,我们已经越来越习惯使用大量的CSS3元素,而现在的浏览器也基本都支持CSS3,所以很多时候我们不妨思考一下是否可以用纯CSS3制作一些有趣或者实用的网页.本文要分享8个超炫酷的纯CSS3 ...
- 纯CSS3超酷3D旋转立方体动画特效
简要教程 这是一款神奇的纯 CSS3 立方体动画特效插件.使用CSS3来制作动画效果已经成为WEB前端开发的一种时尚,从简单的颜色和尺寸动画,到复杂的旋转.翻转动画, CSS3 展现了它无穷的魅力.使 ...
随机推荐
- 潭州课堂25班:Ph201805201 爬虫基础 第十二课 点触验证码二 (课堂笔记)
为上次代码添加 模拟人操作 的鼠标的移动轨迹 # -*- coding:utf-8 -*- # 斌彬电脑 # @Time : 2018/9/14 0014 上午 8:08 from selenium ...
- only_full_group_by的注意事项
only_full_group_by的注意事项 使用这个就是使用和oracle一样的group 规则, select的列都要在group中,或者本身是聚合列(SUM,AVG,MAX,MIN) 才行
- db2执行计划具体操作
explain 1.如果第一次执行,请先(在dbinst用户下) connect to dbname,执行db2 -tvf $HOME/sqllib/misc/EXPLAIN.DDL建立执行计划表 2 ...
- Linux学习笔记12—磁盘管理
一.查看磁盘或目录的容量 1. df命令 作用:查看已挂载磁盘的总容量.使用容量.剩余容量等,可以不加任何参数,默认是按k为单位显示的 参数: -I : 查看inodes使用状况 -h: 使用合适的 ...
- 用c#监控网络状态
1.查询当前网络状态: using Microsoft.VisualBasic.Devices; //判断当前网络连接状态 Network nw=new Network(); if(nw.IsAvai ...
- AngularJS中的transclusion案例
AngularJS中的transclusion类似于包含关系. 通常,这样定义一个directive: <mydirective someprop=""></my ...
- 自动化运维之-PXE实现系统批量自动安装
转自:https://www.linuxidc.com/Linux/2017-10/147379.htm 本节索引 需求分析 PXE简介 整体方案 服务选择 功能实现 安装调试 错误分析 总结 1 需 ...
- Win7下MongoDB的安装和使用
Win7下MongoDB的安装和使用 1.下载: http://www.mongodb.org/downloads 2.安装: 安装目录为 D:\mongodb\MongoDB 2.6 Standar ...
- .Net AppDomain详解(二)
AppDomain 类 表示应用程序域,它是一个应用程序在其中执行的独立环境. 此类不能被继承. 命名空间: System程序集: mscorlib(位于 mscorlib.dll) 继承层次结 ...
- VC++网络安全编程范例(11)-SSL高级加密网络通信(转)
SSL(Secure Sockets Layer 安全套接层),及其继任者传输层安全(Transport Layer Security,TLS)是为网络通信提供安全及数据完整性的一种安全协议.TLS与 ...