html:

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.  
  7.     <!--
  8.      主要知识点：
  9.      1.transform 事件发生后需要变的样子
  10.      2.transition 主体样式中定义
  11.      3.box-sizing
  12.      4.border-radius
  13.     -->
  14.     <link rel="stylesheet" type="text/css" href="style.css">
  15.     <script src="jquery-2.1.1.min.js"></script>
  16. </head>
  17. <body>
  18.     <div class="box">
  19.         <div class="link link-miss">
  20.             <span class="icon"></span>
  21.             <a href="#" class="button" data-title="My mission is clear">
  22.                 <span class="line line-top"></span>
  23.                 <span class="line line-left"></span>
  24.                 <span class="line line-right"></span>
  25.                 <span class="line line-bottom"></span>
  26.                 MISSION
  27.             </a>
  28.         </div>
  29.         <div class="link link-play">
  30.             <span class="icon"></span>
  31.             <a href="#" class="button" data-title="This is my palyground">
  32.                 <span class="line line-top"></span>
  33.                 <span class="line line-left"></span>
  34.                 <span class="line line-right"></span>
  35.                 <span class="line line-bottom"></span>
  36.                 MISSION
  37.             </a>
  38.         </div>
  39.         <div class="link link-touch">
  40.             <span class="icon"></span>
  41.             <a href="#" class="button" data-title="Lets do something together">
  42.                 <span class="line line-top"></span>
  43.                 <span class="line line-left"></span>
  44.                 <span class="line line-right"></span>
  45.                 <span class="line line-bottom"></span>
  46.                 MISSION
  47.             </a>
  48.         </div>
  49.         <div class="tip">
  50.             <em></em>
  51.             <span></span>
  52.         </div>
  53.     </div>
  54.     <script>
  55.         $(function(){
  56.             $(".link .button").hover(function(){
  57.                 var title = $(this).attr("data-title");
  58.                 $(".tip em").text(title);
  59.                 var pos= $(this).offset().left;
  60.                 var dis = ($(".tip").outerWidth()-$(this).outerWidth())/2;
  61.                 var f = pos-dis;
    　　　　　　　　　　//从top195 -> 160变化
  62.                 $(".tip").css({"left":f+"px"}).animate({"top":195,"opacity":1},300);
  63.             },function(){
    　　　　　　　　　　//鼠标移出回到本来的样式
  64.               $(".tip").animate({"top":160,"opacity":0},300);
  65.             })
  66.         })
  67.     </script>
  68. </body>
  69. </html>

css:

  1. *{
  2.     margin:;
  3.     padding:;
  4. }
  5.  
  6. body{
  7.     background: #333;
  8. }
  9.  
  10. .box{
  11.     width: 1000px;
  12.     height: 280px;
  13.     margin: 50px auto;
  14. }
  15.  
  16. .box .link{
  17.     width: 205px;
  18.     height: 280px;
  19.     margin: 0 20px;
  20.     float: left;
  21.     position: relative;
  22. }
  23. /*
  24. Transition
  25.  
  26. •定义和用法
  27. •transition 属性是一个简写属性，用于设置四个过渡属性：
  28. •transition-property
  29. •transition-duration
  30. •transition-timing-function
  31. •transition-delay
  32. •语法
  33. •transition: property duration timing-function delay;
  34. •值描述
  35. •transition-property规定设置过渡效果的 CSS 属性的名称。
  36. •transition-duration规定完成过渡效果需要多少秒或毫秒。
  37. •transition-timing-function规定速度效果的速度曲线。
  38. •transition-delay定义过渡效果何时开始(延时执行时间)。
  39.  
  40. •浏览器支持
  41. •Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 属性。
  42. •Safari 支持替代的 -webkit-transition 属性。
  43. •注释：Internet Explorer 9 以及更早版本的浏览器不支持 transition 属性。*/
  44. /*span属于内敛元素，不具备宽高，使用display属性显示*/
  45. .link .icon{
  46.     display: inline-block;
  47.     width: 100%;
  48.     height: 190px;
  49.     transition: 0.2s linear;
  50.     -webkit-transition: 0.2s linear;
  51.     -o-transition: 0.2s linear;
  52.     -moz-transition: 0.2s linear;
  53.     -ms-transition: 0.2s linear;
  54. }
  55.  
  56. .link-miss .icon{
  57.     background:url("mission.png") no-repeat center center;
  58. }
  59.  
  60. .link-play .icon{
  61.     background: url("play.png") no-repeat center center;
  62. }
  63.  
  64. .link-touch .icon{
  65.     background: url("touch.png") no-repeat center center;
  66. }
  67. /*Transform
  68.  
  69. •定义和用法
  70. •transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜
  71. •rotate(angle )定义 2D 旋转，在参数中规定角度
  72. •rotateX(angle)定义沿着 X 轴的 3D 旋转。
  73. •rotateY(angle)定义沿着 Y 轴的 3D 旋转。
  74. •rotateZ(angle)定义沿着 Z 轴的 3D 旋转。
  75. •scale(x,y)定义 2D 缩放转换。
  76. •scale3d(x,y,z)定义 3D 缩放转换。
  77. •scaleX(x)通过设置 X 轴的值来定义缩放转换。
  78. •scaleY(y)通过设置 Y 轴的值来定义缩放转换。
  79. •scaleZ(z)通过设置 Z 轴的值来定义 3D 缩放转换。
  80.  
  81. •浏览器支持
  82. •Internet Explorer 10、Firefox、Opera 支持 transform 属性。
  83. •Internet Explorer 9 支持替代的 -ms-transform 属性（仅适用于 2D 转换）。
  84. •Safari 和 Chrome 支持替代的 -webkit-transform 属性（3D 和 2D 转换）。
  85. •Opera 只支持 2D 转换。
  86.  
  87. */
  88. /*.link:hover .icon*/
  89. .link .icon:hover{
  90.     transform: rotate(360deg) scale(1.2);
  91.     -ms-transform: rotate(360deg) scale(1.2);
  92.     -webkit-transform: rotate(360deg) scale(1.2);
  93.     -o-transform: rotate(360deg) scale(1.2);
  94.     -moz-transform: rotate(360deg) scale(1.2);
  95. }
  96. /*
  97. •box-sizing
  98. •定义和用法
  99. •box-sizing 属性允许以特定的方式定义匹配某个区域的特定元素。
  100. •语法
  101. •box-sizing: content-box|border-box|inherit
  102. •值描述
  103. •content-box
  104. •宽度和高度分别应用到元素的内容框。
  105. •在宽度和高度之外绘制元素的内边距和边框。
  106. •border-box
  107. •为元素设定的宽度和高度决定了元素的边框盒。
  108. •就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
  109. •通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
  110. •inherit  规定应从父元素继承 box-sizing 属性的值。
  111.  
  112. •浏览器支持
  113. •Internet Explorer、Opera 以及 Chrome 支持 box-sizing 属性。
  114. •Firefox 支持替代的 -moz-box-sizing 属性。*/
  115. .button{
  116.     display: block;
  117.     width: 180px;
  118.     height: 50px;
  119.     text-decoration: none;
  120.     line-height: 50px;
  121.     color:#2DCB70;
  122.     font-family: "微软雅黑", Arial, Helvetica, sans-serif;
  123.     font-weight: bolder;
  124.     border: 2px solid rgba(255,255,255,0.8);
  125.     padding-left: 20px;
  126.     margin: 0 auto;
  127.     box-sizing: border-box;
  128.     -moz-box-sizing: border-box;
  129.     -webkit-box-sizing: border-box;
  130.     background: url("allow.png") no-repeat 130px center;
  131.     position: relative;
  132.     transition: 0.4s ease;
  133.     -webkit-transition: 0.4s ease;
  134.     -o-transition: 0.4s ease;
  135.     -moz-transition: 0.4s ease;
  136.     -ms-transition: 0.4s ease;
  137. }
  138.  
  139. .button:hover{
  140.     border: 2px solid rgba(255,255,255,1);
  141.     background-position: 140px center;
  142. }
  143.  
  144. .button .line{
  145.     display: block;
  146.     position: absolute;
  147.     background: none;
  148.     transition: 0.4s ease;
  149.     -webkit-transition: 0.4s ease;
  150.     -o-transition: 0.4s ease;
  151.     -moz-transition: 0.4s ease;
  152.     -ms-transition: 0.4s ease;
  153. }
  154.  
  155. .button:hover .line{
  156.     background: #fff;
  157. }
  158.  
  159. /*
  160.  top:
  161.   1.高度不变
  162.   2.宽度变（0-盒子的宽度）
  163.   3.位置：左-右
  164. */
  165.  
  166. .button .line-top{
  167.     height: 2px;
  168.     width: 0px;
  169.     left: -110%;
  170.     top: -2px;
  171. }
  172.  
  173. .button:hover .line-top{
  174.     width: 100%;
  175.     left: -2px;
  176. }
  177.  
  178. .button .line-bottom{
  179.     width: 0px;
  180.     height: 2px;
  181.     right: -110%;
  182.     bottom: -2px;
  183. }
  184.  
  185. .button:hover .line-bottom{
  186.     width: 100%;
  187.     right: -2px;
  188. }
  189.  
  190. .button .line-left{
  191.     width: 2px;
  192.     height:;
  193.     left: -2px;
  194.     bottom: -110%;
  195. }
  196.  
  197. .button:hover .line-left{
  198.     height: 100%;
  199.     bottom: -2px;
  200. }
  201.  
  202. .button .line-right{
  203.     width: 2px;
  204.     height: 0px;
  205.     right: -2px;
  206.     top: -110%;
  207. }
  208.  
  209. .button:hover .line-right{
  210.     height: 100%;
  211.     top: -2px;
  212. }
  213.  
  214. .box .tip{
  215.     position: absolute;
  216.     padding: 0px 14px;
  217.     height: 35px;
  218.     line-height: 35px;
  219.     background: #2DCB70;
  220.     color: #fff;
  221.     top: 160px;
  222.     font-size: 16px;
  223.     font-weight: normal;
  224.     text-transform: none;
  225.     margin: 0 auto;
  226.     border-radius: 3px;
  227.     opacity:;
  228. }
  229.  
  230. .tip em{
  231.     font-style: normal;
  232. }
  233. /*下三角定义，通过border上，下，左，右显示一部分颜色实现*/
  234. .tip span{
  235.     position: absolute;
  236.     width:;
  237.     height:;
  238.     overflow: hidden;
  239.     border: 7px solid transparent;
  240.     border-top-color: #2DCB70;
  241.     left: 50%;
  242.     margin-left: -3px;
  243.     bottom: -14px;
  244. }

html5: 幽灵按钮的更多相关文章

  1. 听着好像很牛的特效——幽灵按钮DOM

    给大家分享一个听着好像很牛的东西——幽灵按钮,这个玩意对于艺术设计细胞在高中决定不在考试试卷上画画的我来说,实在不感冒.但是这个按钮的设计元素很流行,一个网页东西不做几个,光放上几个按钮就会显得很高端 ...

  2. 巧用HTML5给按钮背景设计不同的动画

      如何巧用HTML5设计按钮背景不同动画特效,在该特效中,当鼠标滑过按钮时,使用CSS3   animation 来动画   background-size  和  background-posit ...

  3. html5 渐变按钮练习

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  4. 纯css3实现的幽灵按钮导航

    之前为大家介绍了好几款导航菜单,今天再给大家带来一款css3实现的幽灵按钮式的导航菜单.导航界面非常好看.右侧是一个css3实现的动画消息图标.效果图如下: 在线预览   源码下载 实现代码: htm ...

  5. 自己动手画一个HTML5的按钮

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

  6. 快速完成网页设计,10个顶尖响应式HTML5网页模板助你一臂之力

    为了寻找一个优质的网页模板,网页设计师和开发者往往可能会花上大半天的时间.不过幸运的是,现在的网页设计师和开发人员已经开始共享HTML5,Bootstrap和CSS3中的免费网页模板资源.鉴于网站模板 ...

  7. 8款超酷而实用的CSS3按钮动画

    1.CSS3分享按钮动画特效 这是一款基于CSS3的社会化分享按钮,按钮非常简单,提供了分享到twitter.facebook.youtube等大型社交网站.每一个分享按钮都有个大社交网站的Logo图 ...

  8. [UWP]浅谈按钮设计

    一时兴起想谈谈UWP按钮的设计. 按钮是UI中最重要的元素之一,可能也是用得最多的交互元素.好的按钮设计可以有效提高用户体验,构造让人眼前一亮的UI.而且按钮通常不会影响布局,小小的按钮无论怎么改也不 ...

  9. Flash生成HTML5动画方法

      方法一:利用“swiffy”将Flash转换成HTML5动画. 首先,我们需要下载一款基于“Flash”程序的插件,名称为“swiffy”,这是一款由谷歌推出的一个Flash扩展,可以通过“Fla ...

随机推荐

  1. java中数组以及集合

    java中数组: 数组在Java里是一种特殊类型,有别于普通的“类的实例”的对象.但实际数组也是一种对象类型,int[]a = new int[5]  a是在java栈中分配的引用变量,类型是int[ ...

  2. Android中C可执行程序编译问题

    make:进入目录'/opt/FriendlyARM/tiny4412/android/android-4.1.2'make: *** 没有规则可以创建“out/target/product/gene ...

  3. kernel command line 参数详解

    Linux内核在启动的时候,能接收某些命令行选项或启动时参数.当内核不能识别某些硬件进而不能设置硬件参数或者为了避免内核更改某些参数的值,可以通过这种方式手动将这些参数传递给内核.  如果不使用启动管 ...

  4. wechat4j获取用户昵称乱码修复

    项目对接微信公众号平台时,微信的官方给出的建议是使用wechat4j.官方建议的,自然心里踏实,但实际用起来时发现wechat4j埋有很多雷,最让人心烦意乱的就是中文乱码问题. 之前写过一篇为JAXB ...

  5. SSM框架下分页的实现（封装page.java和List<?>）

    之前写过一篇博客  java分页的实现(后台工具类和前台jsp页面),介绍了分页的原理. 今天整合了Spring和SpringMVC和MyBatis,做了增删改查和分页,之前的逻辑都写在了Servle ...

  6. C++中的指针和数组

    最近看C++编程思想,看到第十三章动态内存管理的时候把自己给绕进去了,主要是在数据和指针这块弄混了.现在把找到的一些资料总结如下: 1. 数组是数组,指针是指针,两者并不等价: 2.数组在作为左值的时 ...

  7. Spring 集成rabbiatmq

    pom 文件 <dependencies> <dependency> <groupId>com.rabbitmq</groupId> <artif ...

  8. Qwt中鼠标获取坐标点

    void getPoint(QwtPlot *plot) { QPoint point = plot->canvas()->mapFromGlobal(QCursor::pos()); Q ...

  9. phpcms v9 栏目伪静态完全自定义为栏目英文目录名

    1,后台增加url规则,增加后.导航上,或分页号上,会自动替换为静态的样式.类似www.abc.com/news/2/ 2表示页码 phpcms v9 的后台扩展,url规则,添加两个规则, 一个是名 ...

  10. SQL使用CASE 语句

    CASE 语句可以在SELECT 子句和ORDER BY 子句中使用 CASE语句分为两种Case Simple Expression and Case Search Expression Case ...