CSS3如何实现文字折纸效果的方法

这篇文章给大家分享的是有关CSS3如何实现文字折纸效果的方法的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：空间域名、网站空间、营销软件、网站建设、自流井网站维护、网站推广。

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 h2 {
  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 h2: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 h2: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