• 技术文章 >web前端 >css教程

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

    青灯夜游青灯夜游2021-01-27 19:37:02转载317
    本篇文章给大家通过示例介绍一下使用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>

    效果图:

    1.png

    更多编程相关知识,请访问:编程视频!!

    以上就是CSS3实现文字折纸效果的方法(代码示例)的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:博客园,如有侵犯,请联系admin@php.cn删除
    专题推荐:CSS3 文字折纸
    上一篇:使用CSS实现圆角渐变边框 下一篇:如何解决less2css系统找不到指定的文件问题
    第15期线上培训班

    相关文章推荐

    • css居中代码是什么• apache不加载css文件怎么办• 谷歌浏览器不支持css3吗• css怎么设置文字加粗

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网