如何使用CSS3来实现文字折纸的效果

程序猿 • 2025年12月24日 01:46:35 • 好文分享 • 阅读 0

这篇文章主要介绍了关于如何使用css3来实现文字折纸的效果，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

效果图：

代码如下，复制即可使用：

                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

立即学习“前端免费学习笔记（深入）”；

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！