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

2020-11-27 来源：我们爱旅游

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

效果图：

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

<!DOCTYPE html><html><head>
 <title></title>
 <style type="text/css">
 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);}

 </style></head><body>
 <p class="wrapper">
 <h1 data-heading="jQuery">jQuery</h1>
 </p></body></html>

全部栏目

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