jQuer y 特效实例_幽灵按钮2|学习笔记

.box .link{  //
float: left; //浮动元素设置成向左浮动，实现水平排列
margin:0 20px; //实现左右撑开，上下为0，左右为20ox的距离 
width: 205px;  //设置宽205高280，使得按钮分开排列
height: 280px;
position: relative; //相对定位
}

. 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);
}

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，位置居中
}