在这里介绍一种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; 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>
效果图:在这里给大家简单的截图看一眼,动态效果大家可以复制代码观赏,以后如果有好的效果会继续分享给大家!谢谢大家