.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>