又一款文字倒影代码,刚才介绍的倒影利用JS技术给倒影一个渐变的效果,与刚才介绍的不同,本文使用的是纯CSS,只是将文字反了一下,并没有渐变效果,兼容性做的非常好,思路新颖,并且在代码中使用了判断IE9浏览器的语句。 演示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <style type="text/css"> #box { text-align:center; margin:50px; font-size:20px; } .txt { position:relative; } .txt:after { position:absolute; left:0; top:20px; content:"花间一壶酒,独酌无相亲。"; -moz-transform:scaleX(-1) rotate(180deg); -webkit-transform:scaleX(-1) rotate(180deg); -o-transform:scaleX(-1) rotate(180deg); } </style> <!--[if lte IE 9]> <style type="text/css"> .txt:after { content:"";} .ie { filter:FlipV(); display:inline-block; zoom:1; } </style> <![endif]--> <title></title> </head> <body> <div id="box"> <span class="txt">花间一壶酒,独酌无相亲。</span> <!--[if lte IE 9]> <br /> <span class="ie">花间一壶酒,独酌无相亲。</span> <![endif]--> </div> </body> </html><div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果,请按Ctrl+F5刷新本页,更多网页代码:<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>提示:可修改后代码再运行! 文章导航 CSS色阶特效代码,注释丰富并兼容各大浏览器App Store新规则:数字货币应用部分功能受限,不禁止不鼓励