3d动态文字的绘制
在这里介绍一种3D文字的一种动态效果，可以说这是一种伪3D创建的一种3D的视觉效果
简单的讲解一下：大家或多或少都会听说过素描这种绘画手法，其实这种手法就是巧妙的利用了。阴影给人们带来的立体的视觉冲击，在这里我们也是通过这种素描的方式，利用css3中的文字阴影属性：text-shadow来绘制出唯美的3D效果字
text-shadow:一共有四个参数，参数一是X轴的偏移，参数2是Y轴的偏移，参数三是模糊层度(一定要大于零，小于零的话表示没有模糊将看不到效果)，参数4：是阴影的颜色
text-shadow:最大的优势在于他可以无限的连接，就是多个阴影重叠，这也就是我们3D效果创建出来的根本
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#nav{
font-family: sans-serif;
width: 100%;
text-align: center;
margin-top: 200px;
}
body{
padding: 0;
margin: 0;
background-color: #444444;
}
h1{
text-transform: uppercase;
font-size: 3em;
letter-spacing: 0.1em;
color: #EEE;
animation: rotate 2s alternate infinite;
}
/*利用伪类创建文字下方的黑色阴影*/
h1:before{
content:"你在桥上看风景,而我在桥边看你";
text-shadow: 0 0 15px #111;
color: transparent;
position: absolute;
z-index: -1;
margin: -0.1em 0 0 0;
animation: skew 2s alternate infinite;
transform-origin: bottom;
}
/*给一个动画让文字动起来，并且可以给定义个六重阴影一个更好的展现平台*/
@keyframes rotate {
from {
transform: rotateY(-10deg);
text-shadow: 1px -1px #CCC,
2px -1px #BBB,
3px -2px #AAA,
4px -2px #999,
5px -3px #888,
6px -3px #777;
}
to {
transform: rotateY(10deg);
text-shadow: -1px -1px #CCC,
-2px -1px #BBB,
-3px -2px #AAA,
-4px -2px #999,
-5px -3px #888,
-6px -3px #777;
}
}
/*让阴影随着文字移动创建更好的视觉效果*/
@keyframes skew {
from {
transform: scaleY(0.5) skewX(-35deg);
}
to {
transform: scaleY(0.5) skewX(35deg);
}
</style>
</head>
<body>
<div id="nav">
<h1>你在桥上看风景,而我在桥边看你</h1>
</div>
</body>
</html>
效果图:在这里给大家简单的截图看一眼，动态效果大家可以复制代码观赏，以后如果有好的效果会继续分享给大家!谢谢大家
