CSS3实现文字折纸效果的方法（代码示例）

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>
        div class="wrapper">
            h1 data-heading="jquery">
    jQuery/h1>
        /div>
    /body>
    /html>
    

效果图：

更多编程相关知识，请访问：编程视频！！

以上就是CSS3实现文字折纸效果的方法（代码示例）的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！