您现在的位置是：网站首页> 编程资料编程资料

魔幻般冒泡背景的CSS3按钮动画CSS3鼠标滑过图片效果 用Font Awesome库实现悬停图标基于CSS3实现鼠标滑过图片上移代码纯CSS3实现鼠标滑过按钮动画第二节

2021-09-05 695人已围观

简介 这篇文章主要介绍了一款魔幻般冒泡背景的CSS3按钮动画，按钮的背景不是背景图片，也不是单纯的颜色，而是一组魔幻般的冒泡背景动画，感兴趣的小伙伴们可以参考一下

这是一款非常有特点的CSS3按钮，按钮的背景不是北京图片，也不是单纯的颜色，而是一组魔幻般的冒泡背景动画。当我们将鼠标滑过按钮时，按钮的冒泡背景动画就可以展示出来。可以说这款CSS3按钮的设计风格相当有创意，而且令人惊叹的是，这些动画都是用CSS3实现的，并没有使用JavaScript，非常强大。

HTML代码：

XML/HTML Code复制内容到剪贴板
  1. <div id="buttonContainer">  
  2.   
  3.     <a href="#" class="button big blue">Big Buttona>  
  4.     <a href="#" class="button big green">Big Buttona>  
  5.     <a href="#" class="button big orange">Big Buttona>  
  6.     <a href="#" class="button big gray">Big Buttona>  
  7.   
  8.     <a href="#" class="button blue medium">Medium Buttona>  
  9.     <a href="#" class="button green medium">Medium Buttona>  
  10.     <a href="#" class="button orange medium">Medium Buttona>  
  11.     <a href="#" class="button gray medium">Medium Buttona>  
  12.   
  13.     <a href="#" class="button small blue">Small Buttona>  
  14.     <a href="#" class="button small green">Small Buttona>  
  15.     <a href="#" class="button small blue rounded">Roundeda>  
  16.   
  17.     <a href="#" class="button small orange">Small Buttona>  
  18.     <a href="#" class="button small gray">Small Buttona>  
  19.   
  20.     <a href="#" class="button small green rounded">Roundeda>  
  21.   
  22. div>  

CSS代码：

CSS Code复制内容到剪贴板
  1. .button{   
  2.  font:15px Calibri, Arial, sans-serif;   
  3.   
  4.  /* A semi-transparent text shadow */  
  5.  text-shadow:1px 1px 0 rgba(255,255,255,0.4);   
  6.   
  7.  /* Overriding the default underline styling of the links */  
  8.  text-decoration:none !important;   
  9.  whitewhite-space:nowrap;   
  10.   
  11.  display:inline-block;   
  12.  vertical-align:baselinebaseline;   
  13.  position:relative;   
  14.  cursor:pointer;   
  15.  padding:10px 20px;   
  16.   
  17.  background-repeat:no-repeat;   
  18.   
  19.  /* The following two rules are fallbacks, in case  
  20.     the browser does not support multiple backgrounds. */  
  21.   
  22.  background-position:bottombottom left;   
  23.  background-image:url('button_bg.png');   
  24.   
  25.  /* Multiple backgrounds version. The background images  
  26.     are defined individually in color classes */  
  27.   
  28.  background-position:bottombottom left, top rightright, 0 0, 0 0;   
  29.  background-clip:border-box;   
  30.   
  31.  /* Applying a default border raidus of 8px */  
  32.   
  33.  -moz-border-radius:8px;   
  34.  -webkit-border-radius:8px;   
  35.  border-radius:8px;   
  36.   
  37.  /* A 1px highlight inside of the button */  
  38.   
  39.  -moz-box-shadow:0 0 1px #fff inset;   
  40.  -webkit-box-shadow:0 0 1px #fff inset;   
  41.  box-shadow:0 0 1px #fff inset;   
  42.   
  43.  /* Animating the background positions with CSS3 */  
  44.  /* Currently works only in Safari/Chrome */  
  45.   
  46.  -webkit-transition:background-position 1s;   
  47.  -moz-transition:background-position 1s;   
  48.  transition:background-position 1s;   
  49. }   
  50.   
  51. .button:hover{   
  52.   
  53.  /* The first rule is a fallback, in case the browser  
  54.     does not support multiple backgrou

    上一篇：你值得拥有的CSS下拉菜单效果纯CSS实现下拉菜单的示例代码CSS3模拟动画下拉菜单效果CSS导航栏及弹窗示例代码CSS下拉菜单简单制作教程 css制作黑色经典导航下拉菜单基于CSS实现的4级下拉菜单效果代码CSS实现的灰色下拉菜单效果代码纯CSS实现的大型下拉菜单的示例代码

    下一篇：CSS3中currentColor关键字的妙用

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网