Html
    Css
    Js

    
                        
#header {
	width:800px;
	height:500px;
	border:1px solid orange;
	margin:0px auto;
}
#header>div {
	float:left;
	text-align:center;
	line-height:30px;
}
.you {
	width:200px;
	height:300px;
	padding-top:50px;
	padding-left:50px;
}
.mo {
	width:200px;
	height:300px;
	padding-top:50px;
	padding-left:50px;
}
.tian {
	width:200px;
	height:300px;
	padding-top:50px;
	padding-left:50px;
}
.c1 {
	width:120px;
	height:30px;
	border:1px solid #ddd;
	margin-left:40px;
	margin-top:20px;
}
.c1 {
	}.c2 {
	width:120px;
	height:30px;
	border:1px solid #ddd;
	margin-left:40px;
	margin-top:20px;
}
.c3 {
	width:120px;
	height:30px;
	border:1px solid #ddd;
	margin-left:40px;
	margin-top:20px;
}
img {
	transition:all 1s ease;
}
img:hover {
	transform:rotate(360deg);
}
#d1>div {
	padding:1px;
}
#d1>div:hover {
	border:2px solid black;
	padding:0px;
	transform:
}
.a1 {
	transition:all 1s ease 0.2s;
}
.a1 {
	width:122px;
	height:2px;
	background:white;
	position:relative;
	left:-125px;
}
.c1:hover .a1 {
	background:red;
	transform:translate(125px,0px);
}
.c2:hover .a1 {
	background:red;
	transform:translate(125px,0px);
}
.c3:hover .a1 {
	background:red;
	transform:translate(125px,0px);
}
.a2 {
	width:2px;
	height:34px;
	background:white;
	position:relative;
	left:-2px;
	top:-68px;
	transition:all 1s ease 0.2s;
}
.c1:hover .a2 {
	background:red;
	transform:translate(0px,35px);
}
.c2:hover .a2 {
	background:red;
	transform:translate(0px,35px);
}
.c3:hover .a2 {
	background:red;
	transform:translate(0px,35px);
}
.a3 {
	width:123px;
	height:2px;
	background:white;
	position:relative;
	left:123px;
	top:-68px;
	transition:all 1s ease 0.2s;
}
.c1:hover .a3 {
	background:red;
	transform:translate(-124px,0px);
}
.c2:hover .a3 {
	background:red;
	transform:translate(-124px,0px);
}
.c3:hover .a3 {
	background:red;
	transform:translate(-124px,0px);
}
.a4 {
	width:2px;
	height:32px;
	background:white;
	position:relative;
	left:120px;
	top:-35px;
	transition:all 1s ease 0.2s;
}
.c1:hover .a4 {
	background:red;
	transform:translate(0px,-33px);
}
.c2:hover .a4 {
	background:red;
	transform:translate(0px,-33px);
}
.c3:hover .a4 {
	background:red;
	transform:translate(0px,-33px);
}

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

幽灵按钮(原创)

0