這篇文章主要介紹了關於如何使用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>以上就是本文的全部內容，希望對大家的學習有幫助，更多相關內容請關注PHP中文網！
相關推薦：
#以上是如何使用CSS3來實現文字摺紙的效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！
