MotionBlur动感模糊滤镜下文字阴影效果优化实例页面

展示

回到相关文章 »

张小姐长大了!
张小姐长大了!

代码

CSS代码:
.bg{width:512px; height:340px; margin:1em auto; background:url(//image.zhangxinxu.com/image/study/s/s512/mm19.jpg);}
.font{margin:0; padding:1em; font-size:36px; font-family:"微软雅黑";}
.text{color:#fff; position:absolute;}
.sh{color:#000; text-shadow:1px 1px 5px #000; filter:progid:DXImageTransform.Microsoft.MotionBlur(strength=5, direction=145); *zoom:1;}
            
HTML代码:
<div class="bg">
    <h4 class="font"><span class="text">张小姐长大了!</span><div class="sh">张小姐长大了!</div></h4>
</div>