开发者学堂课程【jQuery 开发教程：jQuery 特效实例_幽灵按钮2】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/362/detail/4313
jQuery 特效实例_幽灵按钮2
一、案例代码
(1)设置承载按钮盒子link，
.box .link{ //
float: left; //浮动元素设置成向左浮动，实现水平排列
margin:0 20px; //实现左右撑开，上下为0，左右为20ox的距离
width: 205px; //设置宽205高280，使得按钮分开排列
height: 280px;
position: relative; //相对定位
}
三个盒子已经撑开排列了，运行效果：
2)提示框设置
提示框需要设置成绝对定位方式进行排列，并且导入图片到工程当中，再将图片分别引入到每个span标签中：
. link-miss . icon{ //因为比较特别用miss，使用分别的标签找到icon
background-image: url("mission. png"); //使用background引入图片，url引入图片地址
background-position: center center; //使图片水平居中
backgr ound-repeat: no-repeat; //设置重复性为不让重复
}//以上三条语句也可以用一条来代替
. link-play. icon{
background-image: url("play. png");
background-position: center center;
backgr ound-repeat: no-repeat;
}
. link-touch. icon{
background-image: url("touch. png");
background-position: center center;
backgr ound-repeat: no-repeat;
}
图片成功引入，运行结果：
图片动画效果
观察动画效果有旋转，放大。
下面设置鼠标略过的动画效果，如，放大效果
.box .link . icon{ //设置span标签大小，因为是共同属性，可以通过.box .link索引到span标签
display: inline-block; //变为类名块级元素，设置宽高及大小
width: 100%; //%100为原图片大小
height: 190px; //高设置成190
transition: 0.2s linear ; //引入动画并给0.2秒的执行时间
-webkit-transition: 0.2s linear ; //0.2秒的执行时间，线性属性
-moz- transition: 0.2s linear; //添加内核支持多种浏览器
-o-transition: 0.2s linear ;
}
旋转，放大效果
.box .link .icon: hover{//三个图片动画是共同的效果，共同属性，可以通过.box .link索引到下面的span标签，为承载图片的标签增加hover鼠标略过的属性
transform: rotate(360deg) scale(1.2); //旋转360°缩放1.2倍
-webkit-trans form: rotate (360deg) scale(1.2);
-moz- transform: rotate (360deg) scale(1.2) ;
-o- transform: rotate(360deg) scale(1.2);
}
鼠标掠过时，旋转360°加放大1.2倍，运行效果：
(4)按钮动画效果
设置button的动画效果，因为这个按钮是一个a标签，所以设置宽高前先把他变成一个块级元素，还要设置a标签的初始化
a
{
text-decoration:none; //去掉下划线
}
.box .link . button{
display: block;
width: 180px; //宽为180px
height: 50px; //高为50px，这里刷新一下运行下发现没有任何效果，但右键审查元素可以查看到宽高已经设置
border:2px solid rgba(255 ,255,255,0.8); //设置边框为2px，单实现，颜色是rgba的形式，前三个为三原色，都设置为255，代表的是白色的文本框，如果都为0，代表的是黑色，因为边框有一个点亮的效果，所以要设置透明度，这里设置成0.8
line-height: 50px; //设置边框内文字内容垂直居中
color: #2dcb70; //设置字体颜色
font-size: 18px; //设置字体大小为18px
font-weight: 700; //设置字体加粗的效果
padding: 0 0 0 20px; //内边距设置，发现使用 padding 后格子大小发生变化，为保证盒子大小不变需要引入box-sizing
box-sizing: border -box;
margin: auto ; //文字居于图片正中
background: url("allow.png") no-repeat 130px center ; //引入箭头，url引入图片地址，设置不重复属性，大小为130px，位置居中
}
运行效果