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

31312021-01-28 10:24:24

本篇文章给大家通过示例介绍一下使用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实现文字折纸效果的方法（代码示例）