Html
    Css
    Js

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

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

纯css3 click动效,炫酷导航

<div class="icon-holder"></div>

这个div就是页面上蓝色的框。可以在这个div里加个icon图片,或是外链

http://www.bootcss.com/p/font-awesome/

样式,在div里加上

<i class="fa fa-magic"></i>


0