本篇文章给大家通过示例介绍一下使用css3来实现文字折纸效果的方法，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下，希望对大家有所帮助。
CSS3文字折纸
代码如下，复制即可使用：
nbsp;html>html { height: 100%;}body { background: -webkit-linear-gradient(45deg, #e6e2df 80%, #c2c1bd 100%); background: linear-gradient(45deg, #e6e2df 80%, #c2c1bd 100%); height: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}.wrapper { width: 100%; font-family: 'Source Code Pro', monospace; margin: 0 auto; height: 100%;}.wrapper h1 { text-transform: uppercase; -webkit-transform: translate(-50%, -50%) skew(10deg) rotate(-10deg); transform: translate(-50%, -50%) skew(10deg) rotate(-10deg); font-size: 20vw; top: 50%; left: 50%; margin: 0; position: absolute; text-rendering: optimizeLegibility; font-weight: 900; color: rgba(255, 158, 177, 0.5); text-shadow: 1px 4px 6px #e6e2df, 0 0 0 #66303a, 1px 4px 6px #e6e2df;}.wrapper h1:before { content: attr(data-heading); position: absolute; left: 0; top: -4.8%; overflow: hidden; width: 100%; height: 50%; color: #fbf7f4; -webkit-transform: translate(1.6vw, 0) skew(-13deg) scale(1, 1.2); transform: translate(1.6vw, 0) skew(-13deg) scale(1, 1.2); z-index: 2; text-shadow: 2px -1px 6px rgba(0, 0, 0, 0.2);}.wrapper h1:after { content: attr(data-heading); position: absolute; left: 0; top: 0; overflow: hidden; width: 100%; height: 100%; z-index: 1; color: #d3cfcc; -webkit-transform: translate(0vw, 0) skew(13deg) scale(1, 0.8); transform: translate(0vw, 0) skew(13deg) scale(1, 0.8); -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0% 100%); clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0% 100%); text-shadow: 2px -1px 6px rgba(0, 0, 0, 0.3);} jQuery
登录后复制
效果图：
立即学习“前端免费学习笔记（深入）”；
更多编程相关知识，请访问：编程视频！！
以上就是CSS3实现文字折纸效果的方法（代码示例）的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2880690.html
