Html
    Css
    Js
body {
	color:#333;
	font-family:'Terminal Dosis',Arial,sans-serif;
	font-size:13px;
}
a {
	color:#fff;
	text-decoration:none;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
}
.menu {
	padding:0;
	margin:20px auto;
	width:500px;
}
.menu li {
	width:500px;
	height:100px;
	overflow:hidden;
	display:block;
	background:#fff;
	-webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.2);
	-moz-box-shadow:1px 1px 2px rgba(0,0,0,0.2);
	box-shadow:1px 1px 2px rgba(0,0,0,0.2);
	margin-bottom:4px;
	border-left:10px solid #000;
	-webkit-transition:all 300ms ease-in-out;
	-moz-transition:all 300ms ease-in-out;
	-o-transition:all 300ms ease-in-out;
	-ms-transition:all 300ms ease-in-out;
	transition:all 300ms ease-in-out;
}
.menu li:last-child {
	margin-bottom:0px;
}
.menu li a {
	text-align:left;
	display:block;
	width:100%;
	height:100%;
	color:#333;
	position:relative;
}
.content {
	position:absolute;
}
.main {
	font-size:30px;
	-webkit-transition:all 300ms linear;
	-moz-transition:all 300ms linear;
	-o-transition:all 300ms linear;
	-ms-transition:all 300ms linear;
	transition:all 300ms linear;
}
.sub {
	font-size:14px;
	color:#666;
	-webkit-transition:all 300ms linear;
	-moz-transition:all 300ms linear;
	-o-transition:all 300ms linear;
	-ms-transition:all 300ms linear;
	transition:all 300ms linear;
}
.menu li:hover {
	border-color:#fff004;
	background:#000;
}
.menu li:hover .main {
	color:#fff004;
	font-size:14px;
}
.menu li:hover .sub {
	color:#fff;
	font-size:30px;
}

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

css3动画效果

鼠标滑入时,放入文字的容器此时改变为黄色色块,并且h3号字体放大h1号字体,h1号字体此时缩小h3号字体

0