开发者学堂课程【jQuery 开发教程：jQuery 特效实例_幽灵按钮1】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/362/deta
jQuery 特效实例_幽灵按钮1
一、jQuery 特效实例_幽灵按钮1
幽灵按钮:
也叫透明按钮,顾名思义,也就是在设计网页中的按钮之时,不再设计复杂色彩、样式和纹理,而是外仅以线框示意轮廓,只脑示意功能，背景透出,与整个页面背景合而为-的设计方式。
国外的设计师称之为“幽灵按钮”( Ghost Buttons ),盛赞这种按钮通透简约,贴合整体风格又不失神韵,别具魅力。这种按钮的设计早已有之,但是在iOS安卓双双风格转向之后,成了网页设计的新趋势,拥有类似设计的网页设计作品入雨后春笋一般,映入眼帘。
代码部分：
首先创建一个新的工程，GhostButtons
< !DOCTYPE html> <html Lang="en"> <head> <meta charset="UTF-8"> <title></title> //引入ccs <link rel=”stylesheet” href=”app.css” type= “text/css”/> </head> <body> //大盒子 <div class="box">
三个按钮都在一个大的布局当中
//第一个按钮 <div class="Link link-miss"> //span标签，承载图片 <span class= "icon"></span> //承载button <a href="#n class="button"> //4个span承载4条线，上下左右 <span class="Line line-top">< /span> <span class="Line line-Left"></span> <span class="line line-right"></span> <span class="line line-bottom"></span> MISSION </a> </div>
里面首先应该有一个承载图案的区域，下面会有个承载按钮的区域，仔细观察进入这个按钮Imagine,他有一个动画效果，事实上这个动画效果是由一个元素产生的，然后对这个元素进下动画处理即可。
//第二个按钮 <div class="link link-play"> <pan class="icon">< /span> <a href="#" class="button"> <span class="Line line- top"></span> <span class="line line-Left"></span> <span class="line line-right></span> <span class="line line- bottom"></ span> PLAY </a> </div> //第三个按钮 <div class="link line-touch"> <span class="icon">< / span> <a href=”#” class="button'> <span class="line line-top"></span> <span class="Line line-left></span <span class="line line-right"></span> <span class="line line- bottom"></ span> TOUCH </a> </div> </div> </body> </htmL>
效果图：
App.css:
*{ margin:0 padding:0 } //背景颜色 body{ background-color; #33 } //大box样式 .box{ width: 1000px; height: 220px; margin: 50px auto }
设置完cs后效果图：
三个按钮样式已初步搭建完成
