幽灵按钮

原创 2015年07月09日 13:50:36



思路

  按钮特效:在按钮的上下左右各置一个点,鼠标经过是令点的宽(或高)、位置改变

  tiptool:鼠标经过时tiptool的位置发生变化


知识点

1   box-sizing  属性允许您以特定的方式定义匹配某个区域的特定元素。
      参数:content-box(指盒子的宽度=width+border+padding+margin,默认值)
                border-box(指盒子的宽度=width)

      兼容性

   

2、过渡、位移、圆角 参照css3系列文章

html代码

<body>
<div class="box">
  <a>
    <p>this is home demo<span></span></p>
  	<span class="line line-top"></span>
  	<span class="line line-left"></span>
  	<span class="line line-right"></span>
  	<span class="line line-bottom"></span>
  	Home
  </a>
  <a>
    <p>this is about  demo<span></span></p>
  	<span class="line line-top"></span>
  	<span class="line line-left"></span>
  	<span class="line line-right"></span>
  	<span class="line line-bottom"></span>
  	About
  </a>
  <a>
    <p>this is contact demo<span></span></p>
  	<span class="line line-top"></span>
  	<span class="line line-left"></span>
  	<span class="line line-right"></span>
  	<span class="line line-bottom"></span>
  	contact
  </a>
</div>
</body>

css


<style type="text/css">
*{margin:0;padding: 0;}
body{background: #333;}
.box{width: 700px;margin: 340px auto;}
a{display:inline-block;text-decoration: none;width: 180px; height: 50px;line-height:50px;position:relative;margin: 0px 20px;color:#2DCB70;border:2px solid rgba(255,255,255,0.8);
  font-weight:bold;font-size:18px;text-decoration:none;font-family:Arial; padding-left: 20px;
  text-transform: uppercase;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  -ms-box-sizing:border-box;
  -o-box-sizing:border-box;
   box-sizing:border-box;
   /*box-sizing 属性允许以特定的方式匹配某个区域的特定元素
      参数:content-box(指盒子的宽度=width+border+padding+margin,默认值)
            border-box(指盒子的宽度=width)
  */
  -moz-transition:ease 0.4s;
  -o-transition:ease 0.4s;
  -webkit-transition:ease 0.4s;
  transition:ease 0.4s;
}
a:hover{background-position: 140px center; border:2px solid rgba(255,255,255,1);}
.line{ display: block; position: absolute;
  -webkit-transition:0.4s ease;
  -moz-transition:0.4s ease;
  -ms-transition:0.4s ease;
  -o-transition:0.4s ease;
  transition:0.4s ease;
}
a:hover .line{background:#fff;}
.line-top{width:0px; height:2px;left:-100%;top:-2px;}
a:hover .line-top{width:100%; left:-2px;}
.line-left{width:2px;height:0px;left:-2px;top:200%;}
a:hover .line-left{height:100%;top:-2px;}
.line-right{width:2px;height:0px;right:-2px;top:-100%;}
a:hover .line-right{height:100%;top:-2px;}
.line-bottom{width:0px;height:2px;left:200%; top:100%;}
a:hover .line-bottom{width:100%; left:-2px;}
/*tip*/
p{width:180px;position: absolute; background:#2DCB70;color:#fff;border-radius: 3px;bottom:200%;left: 50%;font-size:13px;font-weight: 500;padding:0px;text-align: center;opacity: 0;
  -webkit-transform:translateX(-50%);
  transform:translateX(-50%);
  text-transform: lowercase;
  box-sizing:border-box;
  -webkit-transition:0.3s ease-in-out;
  -moz-transition:0.3s ease-in-out;
  -ms-transition:0.3s ease-in-out;
  -o-transition:0.3s ease-in-out;
  transition:0.3s ease-in-out;
}
p span{width:0px;height: 0px; border:8px solid transparent;border-top-color:#2DCB70;
  position: absolute;bottom:-15px; left: 50%; margin-left: -8px;}
a:hover p{bottom:170%;opacity: 1;}
</style>



版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

css3做幽灵按钮

问题?有时候我们会看到那种非常炫酷,又很有动画感的页面或者图标动画或者那种透明又由动画的按钮。那应该怎么做呢? 原理:运用css3中的几个属性及jquery,css3,js 属性介绍: ...
  • Mr_li13
  • Mr_li13
  • 2015年10月05日 15:22
  • 1243

幽灵按钮css3

暑假第14天,学习了幽灵按钮。 幽灵按钮,也就是Ghost Buttons,是一个透明的按钮,通常是矩形或者圆角矩形,仅保留基本的形制,使用细线来标识边界;按钮内的文字通常使用纤细的非衬线体字体的纯...

css3幽灵按钮样本

  • 2015年10月05日 15:40
  • 34KB
  • 下载

CSS3下实现幽灵按钮

CSS3下实现幽灵按钮
  • Simagle
  • Simagle
  • 2015年06月30日 19:03
  • 560

CSS3案例学习---幽灵按钮

body{ background-color:red; } .co...

幽灵按钮的制作

幽灵按钮的详细代码

幽灵按钮-按钮特效

效果是:图标鼠标以上旋转并缩放,按钮鼠标移上有线条飞入且箭头移动有提示框鼠标移开线条飞出 效果图如下: 代码如下: html> html> head lang="en"> m...

CVE-2015-0235:Linux Glibc幽灵漏洞允许黑客远程获取系统权限

来源:360播报 幽灵漏洞是Linux glibc库上出现的一个严重的安全问题,他可以让攻击者在不了解系统的任何情况下远程获取操作系统的控制权限。目前他的CVE编号为CVE-2015-02...
  • god_7z1
  • god_7z1
  • 2015年01月28日 19:56
  • 585

幽灵行动:NVIDIA 310M显卡完美超频直逼中高端显卡

在我买笔记本那个时代,差不多也就是两年前,联想的本本很多都是NVIDIA 310M显卡。很多友友都认为310M显卡鸡肋,其实它本来就是一低端显卡,但是我很少玩大型游戏,基本上它就够用了。      ...

理解 Java 的 GC 与 幽灵引用

Java 中一共有 4 种类型的引用 : StrongReference、 SoftReference、 WeakReference 以及 PhantomReference (传说中的幽灵引用 呵呵)...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:幽灵按钮
举报原因:
原因补充:

(最多只允许输入30个字)