关闭

幽灵按钮

328人阅读 评论(0) 收藏 举报
分类:



思路

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

  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>



0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:62038次
    • 积分:974
    • 等级:
    • 排名:千里之外
    • 原创:40篇
    • 转载:2篇
    • 译文:1篇
    • 评论:3条
    文章分类
    最新评论