当前位置:首页 > 日记 > 正文

CSS3按钮动画在一个神奇的冒泡的背景

CSS3按钮动画在一个神奇的冒泡的背景
这是一个非常有特色的CSS3按钮。该按钮的背景是北京的照片,也不仅仅是一种颜色,而是一组魔法泡泡背景动画。当我们滑过按钮的鼠标按钮的泡泡背景动画可以显示出来。可以说,CSS3按钮的设计风格是相当原始的,令人惊奇的是,这些动画是通过CSS3,但不使用Javascript,这是非常强大的。

HTML代码:

xml代码将内容复制到剪贴板。

大按钮
大按钮
大按钮
大按钮

中的按钮
中的按钮
中的按钮
中的按钮

小按钮
小按钮
圆形的

小按钮
小按钮

圆形的

CSS代码:

CSS代码将内容复制到剪贴板。
按钮{。
15px字体:宋体、Arial、无衬线字体;

一个半透明的文本阴影
文字阴影:1px 1px 0 RGBA(255255255,0.4);

重写默认的下划线链接
文字装饰:无!重要;
朵朵的空间:不换行;

显示:内联块;
垂直对齐:baselinebaseline;
职位:相对;
光标:指针;
填料:10px 20px;

后台重复:不重复;

以下两个规则/回退的情况下
浏览器不支持多个背景。

背景位置:bottombottom左;
背景图像:URL('button_bg。png);

背景版。背景图像多重
在颜色类中单独定义。

背景位置:bottombottom左,前放,00, 00;
背景剪辑:边框框;

应用默认边框raidus / * * / 8px

-moz边界半径:8px;
WebKit的边界半径:8px;
边界半径:8px;

一个像素内突出的 / * * /按钮

-moz盒阴影:插图0 0 1px # FFF;
Webkit框阴影:插图0 0 1px # FFF;
箱的影子:插图0 0 1px # FFF;

动画背景的位置与CSS3 / * * /
目前仅在Safari / Chrome中工作

WebKit的转型:背景位置1s;
-moz转型:背景位置1s;
转换:背景位置1;
}

按钮:悬停{

第一条规则是浏览器的后退。
不支持多个背景
* /

背景位置:左上方;
背景位置:左上,bottombottom错误,00, 00;
}

按钮:活动{
移动按钮1px的底部单击时* / *
Bottombottom:- 1px;
}

三个按钮大小

字体大小:30px。button.big {;}
字体大小:18px。button.medium {;}
字体大小:13px。button.small {;}

一个更圆的按钮

按钮。舍入{
-moz边界半径:4em;
WebKit的边界半径:4em;
边界半径:4em;
}

定义四个按钮颜色

再选择 / * * /

蓝色按钮{
颜色:# 0f4b6d!重要;

边境:1px solid # 84acc3!重要;

后退背景颜色
背景颜色:# 48b5f2;

指定一个具有渐变的版本

背景图像:URL('button_bg。png),URL('button_bg。png),
-moz径向渐变(中心bottombottom,圆,
RGBA(89208244,1)0,RGBA(89208244,0)100像素),
-moz线性梯度(# 4fbbf7,# 3faeeb);

背景图像:URL('button_bg。png),URL('button_bg。png),
-webkit-gradient(径向,50%,100%,0, 50,100%,100,
从(RGBA(89208244,1)),以(RGBA(89208244,0))),
-webkit-gradient(线性的,0%,0%,0%,100%,从(# 4fbbf7),以(# 3faeeb));
}

蓝色:按钮:悬停{
背景颜色:# 63c7fe;

背景图像:URL('button_bg。png),URL('button_bg。png),
-moz径向渐变(中心bottombottom,圆,
RGBA(109217250,1)0,RGBA(109217250,0)100像素),
-moz线性梯度(# 63c7fe,# 58bef7);

背景图像:URL('button_bg。png),URL('button_bg。png),
-webkit-gradient(径向,50%,100%,0, 50,100%,100,
从(RGBA(109217250,1)),以(RGBA(109217250,0))),
-webkit-gradient(线性的,0%,0%,0%,100%,从(# 63c7fe),以(# 58bef7));
}

绿色按钮

绿色按钮{
颜色:# 345903!重要;
边境:1px solid # 96a37b!重要;
背景颜色:# 79be1e;

背景图像:URL('button_bg。png),URL('button_bg。png),-个径向渐变(中心bottombottom,圈,RGBA(162211,30,1)0,RGBA(162211,30,1)),和(
背景图像:URL('button_bg。png),URL('button_bg。png),-webkit-gradient(径向,50%,100%,0, 50,100%,100,从(RGBA(162211,30,1)),以(RGBA(对))),和((0%,0%,0%,100%),(())
}

绿色:按钮:悬停{
背景颜色:# 89d228;

背景图像:URL('button_bg。png),URL('button_bg。png),-个径向渐变(中心bottombottom,圈,RGBA(183229,45,1)0,RGBA(183229,45,1)),和(
背景图像:URL('button_bg。png),URL('button_bg。png),-webkit-gradient(径向,50%,100%,0, 50,100%,100,从(RGBA(183229,45,1)),以(RGBA(对))),和((0%,0%,0%,100%),(())
}

橙色按钮

橙色按钮{
颜色:# 693e0a!重要;
边境:1px solid # bea280!重要;
背景颜色:# e38d27;

背景图像:URL('button_bg。png),URL('button_bg。png),-个径向渐变(中心bottombottom,圈,RGBA(232189,45,1)0,RGBA(232189,45,1)),和(
背景图像:URL('button_bg。png),URL('button_bg。png),-webkit-gradient(径向,50%,100%,0, 50,100%,100,从(RGBA(232189,45,1)),以(RGBA(对))),和((0%,0%,0%,100%),(())
}

橙色按钮:悬停{
背景颜色:# ec9732;

背景图像:URL('button_bg。png),URL('button_bg。png),-个径向渐变(中心bottombottom,圈,RGBA(241192,52,1)0,RGBA(241192,52,1)),和(
背景图像:URL('button_bg。png),URL('button_bg。png),-webkit-gradient(径向,50%,100%,0, 50,100%,100,从(RGBA(241192,52,1)),以(RGBA(对))),和((0%,0%,0%,100%),(())
}

灰色按钮{
颜色:# 525252!重要;
边境:1px solid # a5a5a5!重要;
背景颜色:# a9adb1;

背景图像:URL('button_bg。png),URL('button_bg。png),-个径向渐变(中心bottombottom,圈,RGBA(197199202,1)0,RGBA(197199202,1)),和(
背景图像:URL('button_bg。png),URL('button_bg。png),-webkit-gradient(径向,50%,100%,0, 50,100%,100,从(RGBA(197199202,1)),以(RGBA(对))),和((0%,0%,0%,100%),(())
}

灰色按钮:悬停{
背景颜色:# b6bbc0;

背景图像:URL('button_bg。png),URL('button_bg。png),-个径向渐变(中心bottombottom,圈,RGBA(202205208,1)0,RGBA(202205208,1)),和(
背景图像:URL('button_bg。png),URL('button_bg。png),-webkit-gradient(径向,50%,100%,0, 50,100%,100,从(RGBA(202205208,1)),以(RGBA(对))),和((0%,0%,0%,100%),(())
}

以上是本文的全部内容,希望能对大家有所帮助。

相关文章

使用HTML5画布API绘制弧线的教程

使用HTML5画布API绘制弧线的教程

教程,绘制,弧线,电脑软件,API,标准弧 在开始之前,我们优化了映射环境,灵感来自于最后一个类的纹理。如果我不喜欢这个背景,我也提供其他背景图的图像目录下供大家选择。此外,所有的样式都写下来。 Javascript代码将内容复制到剪贴板。 A new canva…

AI只是绘制一个蓝色暂停键应用程序

AI只是绘制一个蓝色暂停键应用程序

应用程序,绘制,暂停,图标,蓝色,萧边今天与大家分享Ai,简单地画一个蓝色的暂停键应用程序图标的方法。本教程比较基础,适合初学者学习,推荐过来,喜欢的朋友可以参考这篇文章,让我们看看。 步 在Ai软件中,新建了一个新的800×800文档,选择一个矩形…

excel中图形三级联动的实现

excel中图形三级联动的实现

三级联动,图形,电脑软件,excel,当一个学生去购物中心总部参加社会实践在暑假期间,商店领导给了他一个看似简单的任务:mdash;mdash;统计图表和空调的联动销售。它使同学们熟悉Excel的承诺。事实上,Excel和晶体易结合,这个问题是很容易的。 具体任…

制作生动生动的课件

制作生动生动的课件

课件,生动,电脑软件,当老师备课的时候会准备很多信息,如果所有的PPT都写下来,那每一个幻灯片都会背上大块的文字,学生就会直接打晕!经验丰富的教师会加入大量的文本来区分,但当(a)、1、a、a这些数字的层次结构时,学生很容易记住内容,其他老师用色彩…

向WPS单元添加说明

向WPS单元添加说明

单元,电脑软件,WPS,当在WPS表中制作表时,为了让其他人准确地理解表中的数据和输入需求,通常需要为单元格设置注释来解释或提示输入。有2种方法为单元格设置单元格。 1。注释 注释是在WPS表格最常用的注释。选中单元格右击选择插入批注;;在弹…

PS图象处理软件做的复古效果墙上的

PS图象处理软件做的复古效果墙上的

文字,图象,处理软件,墙上,效果,本教程介绍了如何使用PS图象处理软件做复古效果墙上的文字。先看看效果吧。 1。构建一个新文档,设置填充颜色,如下所示 2。填写文档,如下所示: 三.过滤器杂色/添加颜色,设置如下: 4。过滤/纹理/纹理,设置如下: 纹理效…

用excel2013的应用程序功能完成快

用excel2013的应用程序功能完成快

应用程序,摘要,快速,功能,电脑软件,很多时候,我们需要总结一下数据,平均数,计数等等。一般的操作方式是借用函数,这是很麻烦的操作,事实上,除了手工总结外,我们还可以用excel 2013完成功能的快速总结。 首先选择需要应用的单元格内容,切换到开始选…

谈论window.onbeforeunload()事件中

谈论window.onbeforeunload()事件中

调用,事件中,电脑软件,window,onbeforeunload,经常会有这样的要求,你离开一个网页的时候,用户没有注销,这将导致会话要及时销毁。为了实现自动注销功能,当用户离开页面,要发送的网页onbeforeunload事件处理功能注销命令。这个地方是大部分采用Aj…

PS图象处理软件逼真耀眼燃烧的艺术

PS图象处理软件逼真耀眼燃烧的艺术

逼真,图象,处理软件,耀眼,艺术字,首先看看完井效果: 1。第一步,你必须在第一步找到正确的图片,我更喜欢使用这个,你可以看到图片。 2。行,然后我们要添加文本。使用水平类型工具,在这里您可以使用适当的颜色,我们在后面做更改。 3以后。文本输入,使…

PS图象处理软件中国风刷海报,突破极

PS图象处理软件中国风刷海报,突破极

突破,国风,图象,处理软件,海报,萧边今天将与大家分享在PS图象处理软件生产的海报打破中国式毛笔的限制教程。这个教程真的很好。本教程非常详细和推荐。一起学习。 先看看效果吧。 第一张照片 在教程的最后,以上是打破中国式刷极限PS图象…

AI是如何绘制一个可爱铅笔盒的图标

AI是如何绘制一个可爱铅笔盒的图标

图标,绘制,铅笔盒,可爱,电脑软件,简单地绘制铅笔盒的图标 软件名称:Adobe Illustrator CS6(AI CS6)简化绿色中文版(32位+ 64位)软件大小:205mb更新时间:2014-05-11 1。在Ai软件中,新建了一个新的800 * 800文档,选择圆角矩形工具,绘制一个圆角图形,填…

JS随机数组无序方法综述

JS随机数组无序方法综述

方法,数组,无序,综述,电脑软件,本文对JS随机随机数组的方法进行了总结,供大家参考: 在js中,有很多方法可以扰乱数组。在因特网上,有一种外国作家的写作方式。我认为这是单一的。 功能randomsort(A,B){ 返回Math.random()>。5 - 1:1; / / Math.random()…