.right-box {
width:600px;
margin:0 auto;
}
.service.active {
border-color:red;
}
.service {
width:30%;
height:240px;
text-align:center;
border:1px solid #947a35;
float:left;
background:rgba(121,85,72,0.5);
margin-right:4.5%;
margin-bottom:7.5%;
-webkit-transition:all 0.3s ease;
transition:all 0.3s ease;
cursor:pointer;
}
.service .icon-holder {
position:relative;
top:40px;
display:inline-block;
margin-bottom:0px;
-webkit-transition:all 0.3s ease;
transition:all 0.3s ease;
font-size:50px;
color:#f2f2f2;
width:50px;
height:50px;
background:blue;
}
.service.active .icon-holder {
top:-30px;
color:#d3bc82;
}
.service .heading {
font-size:24px;
position:relative;
font-weight:normal;
top:60px;
color:#fff;
-webkit-transition:all 600ms cubic-bezier(0.68,-0.55,0.265,1.55);
transition:all 600ms cubic-bezier(0.68,-0.55,0.265,1.55);
}
.service.active .heading {
top:-22px;
}
.service.active .description {
opacity:1;
-webkit-transform:scale(1);
-ms-transform:scale(1);
transform:scale(1);
}
.service .description {
width:80%;
margin:0 auto;
margin-top:-20px;
opacity:1;
-webkit-transition:all 600ms cubic-bezier(0.68,-0.55,0.265,1.55);
transition:all 600ms cubic-bezier(0.68,-0.55,0.265,1.55);
-webkit-transform:scale(0);
-ms-transform:scale(0);
transform:scale(0);
}
.description .txt {
font-size:16px;
color:#fff;
display:inline-block;
width:100%;
line-height:40px;
border:none;
}
.description .txt a {
color:#fff;
text-decoration:none;
}
<div class="icon-holder"></div>
这个div就是页面上蓝色的框。可以在这个div里加个icon图片,或是外链
http://www.bootcss.com/p/font-awesome/
样式,在div里加上
<i class="fa fa-magic"></i>