<!doctype html> <html> <head> <meta charset='utf-8'> <title>无标题文档</title> <style> *{ margin:0; padding:0;} .box { width: 500px; height: 200px; position: relative; background: #ccc; margin:100px auto; font:35px/200px '微软雅黑'; text-align:center; text-shadow: 0 1px 1px #fff; } .box:before, .box:after { content: ''; position: absolute; z-index: -1; bottom: 15px; left: 10px; width: 50%; max-width: 150px; height: 20%; /*添加阴影效果*/ -webkit-box-shadow: 0 15px 10px rgba(125,125,125,0.8); -moz-box-shadow: 0 15px 10px rgba(125,125,125,0.8); box-shadow: 0 15px 10px rgba(125,125,125,0.8); /*添加transform属性*/ -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); -o-transform: rotate(-3deg); transform: rotate(-3deg); } .box:after { right:10px; left: auto; -webkit-transform:rotate(3deg); -moz-transform:rotate(3deg); -o-transform:rotate(3deg); transform:rotate(3deg); } </style> </head> <body> <div class='box'>LICHENG</div> </body> </html>
text-fill-color 文字遮罩动画效果实例:
地址：
延伸阅读：
Tag标签：效果
返回到首页 返回到电脑设计
相关文章
精彩导读
热门资讯
关注我们
