ネットで見かけたやつを再現してみた

ネットで見かけたSNS系リンク配置デザイン

f:id:K396_109:20130724143544p:plain


見よう見真似で再現してみた

(どのページ見たか忘れてコードがわからなかったから作ってみた)

<!doctype html>
<html lang="ja">
<head>
	<meta charset="UTF-8" />
	<title>icon</title>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
</head>
<body>
<div class="center">
<div class="hello" id="1" style="margin-left:-10px;">box1</div>
<div class="hello" id="2">box2</div>
<div class="hello" id="3">box3</div>
<div class="hello" id="4">box4</div>
<div class="hello" id="5">box5</div>
<div class="clear"></div>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>
<div id="box5"></div>
</div>
<div class="clear"></div>
<div id="kabe"><div class="shadow"></div>
<div class="shadow" style="margin-left:155px;"></div>
<div class="shadow" style="margin-left:265px;"></div>
<div class="shadow" style="margin-left:375px;"></div>
<div class="shadow" style="margin-left:485px;"></div>
</div>
<style>
.center{
	margin-top: 200px;
	margin-left: 400px;
}

#box1{
	width: 50px;
	height: 50px;
	background: #225378;
	float: left;

}

#box2{
	width: 50px;
	height: 50px;
	background: #1695A3;
	float: left;
	margin-left: 60px;
}

#box3{
	width: 50px;
	height: 50px;
	background: #ACF0F2;
	float: left;

	margin-left: 60px;
}

#box4{
	width: 50px;
	height: 50px;
	background: #D9CB9E;
	float: left;
	margin-left: 60px;
}

#box5{
	width: 50px;
	height: 50px;
	background: #EB7F00;
	float: left;
	margin-left: 60px;
}

.hello{
	width: 70px;
	height: 30px;
	border-radius: 20px;
	background: rgba(0,0,0,0.81);
	float: left;
	margin-left: 40px;
	margin-bottom: 30px;
	color: #fff;
	opacity: 0;
	text-align: center;
}

.clear{
	clear: both;
}

#kabe{
	width: 600px;
	height: 20px;
	margin-top:-10px;
	margin-left: 350px;
	background: #fff;
	position: relative;
	z-index: 10;
}
.shadow{
	width: 60px;
	height: 10px;
	float: left;
	box-shadow: inset 0px -15px 10px -13px #000;
	position: relative;
	margin-top: -10px;
	margin-left: 45px;
}


</style>

<script>
$("#box1").hover(function(){
	$(this).animate({"margin-top":"-15px"}),
	$("#1").animate({"opacity":"1"})
},
	function(){
	$(this).animate({"margin-top":"0px"}),
	$("#1").animate({"opacity":"0"})
});

$("#box2").hover(function(){
	$(this).animate({"margin-top":"-15px"}),
	$("#2").animate({"opacity":"1"})
},
	function(){
	$(this).animate({"margin-top":"0px"}),
	$("#2").animate({"opacity":"0"})
});
$("#box3").hover(function(){
	$(this).animate({"margin-top":"-15px"}),
	$("#3").animate({"opacity":"1"})
},
	function(){
	$(this).animate({"margin-top":"0px"}),
	$("#3").animate({"opacity":"0"})
});
$("#box4").hover(function(){
	$(this).animate({"margin-top":"-15px"}),
	$("#4").animate({"opacity":"1"})
},
	function(){
	$(this).animate({"margin-top":"0px"}),
	$("#4").animate({"opacity":"0"})
});
$("#box5").hover(function(){
	$(this).animate({"margin-top":"-15px"}),
	$("#5").animate({"opacity":"1"})
},
	function(){
	$(this).animate({"margin-top":"0px"}),
	$("#5").animate({"opacity":"0"})
});


</script>

</body>
</html>

このコードで

f:id:K396_109:20130724143654p:plain

こんなのができる