我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！”
详细说明
中秋佳节，哪儿都去不了，只能待在家里看电视，可是看电视又贼多广告，各式各样的广告，广告里面的文字样式也是各种各样的，有会跳动的、会旋转的、有静态立体的...,想着强大的css，有什么不能实现的，那这次就来实现个立体的字体样式吧。
是这样的效果：当鼠标移到界面中，立体文字就显现出来。
先上示例吧：
看着示例图片中，需要到html结构不多，只需要一个容器和文字就足够了。所以html代码就很简单了：
<div id="app">
<div class="text">立体文字</div>
</div>
结构好了之后就可以开始来给文字加样式了。刚开始时是看不到文字的，因此，文字的颜色一定要和背景颜色一样，什么颜色都可以，只要是你喜欢的颜色。
为了能体现出立体的样式，这里主要还是要靠样式的阴影效果来表现，这里的阴影需要用到内阴影和外阴影相结合，网文字内部的阴影颜色采用白色，文字外面的阴影颜色采用黑色。鼠标悬浮在元素上面才显示出字体，所以这里需要伪类:hover。上样式代码：
#app {
width: 100%;
height: 400px;
background-color: #ccc;
}
.text {
font-size: 150px;
font-weight: bold;
color: #ccc;
text-align: center;
}
#app:hover {
text-shadow: -1px -1px 0px white, 1px 1px 0px black;
}
这样就可以实现立体文字的效果了，但是为了能让字体显示出来有个过程，这里需要再加个过渡的效果。
.text {
font-size: 150px;
font-weight: bold;
color: #ccc;
text-align: center;
transition: all 1s;
}
这样就圆满成功了。
