CSSとJavaScriptで、hoverすると浮き上がるような文字です。サンプルの「浮き上がる文字」にhoverすると、hoverした文字ごとに浮かび上がるような動きを発動し、マウスを外すとゆっくり元に戻ります。

 

サンプル

サンプルのhtmlソース

<div class="main">
	<div class="text">浮き上がる文字</div>
</div>

サンプルのCSSソース

.text {
	top: 50%;
	left: 0px;
	width: 100%;
	position: absolute;
	text-align: center;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	font-family: sans-serif;
	line-height: 60px;	
	}
.text span {
	color: #fff;
	font-size: 70px;
	font-weight: bold;
	display: inline-block;
	letter-spacing: 5px;
	-webkit-transition: 2s;
	transition: 2s;
	text-shadow: 0px 0px 0px #558B2F;
	position: relative;
	top: 10px;
	left: 0px;
	cursor: default;
	}
.text span:hover {
	text-shadow: -8px 8px 0px #558B2F;
	-webkit-transition: 0.3s;
	transition: 0.3s;
	top: -8px;
	left: 8px;
	}
.text span.space {
	width: 20px;
	height: 100%;
	}

サンプルのScriptソース

var text = $('.text').text(),
textArr = text.split('');
$('.text').html('');
$.each(textArr, function(i, v){
	if(v == ' '){$('.text').append('');}
	$('.text').append(''+v+'');
})