CSS3实现文字折纸效果的方法（代码示例）-css教程-PHP中文网

首页

web前端

css教程

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

青灯夜游

Jan 27, 2021 pm 07:37 PM

css3

本篇文章给大家通过示例介绍一下使用CSS3来实现文字折纸效果的方法，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下，希望对大家有所帮助。

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: &#39;Source Code Pro&#39;, 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实现文字折纸效果的方法（代码示例）的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文转载于：博客园。如有侵权，请联系admin@php.cn删除

Draggin＆＃039;和droppin＆＃039;在反应中Apr 17, 2025 am 11:52 AM

React生态系统为我们提供了许多库，所有库都集中在拖放的相互作用上。我们有反应，反应，可爱dnd，

快速软件Apr 17, 2025 am 11:49 AM

最近有一些关于快速软件的完美互连的事情。

带有背景折叠的嵌套梯度Apr 17, 2025 am 11:47 AM

我可以说我经常使用背景折叠。 IT Wager IT几乎从未在日常CSS工作中使用。但是在斯特凡·朱迪斯（Stefan Judis）的帖子中，我想起了它，

使用React Hooks使用requestAnimationFrameApr 17, 2025 am 11:46 AM

使用RequestAnimationFrame进行动画化应该很容易，但是如果您还没有彻底阅读React的文档，那么您可能会遇到一些事情

需要滚动到页面顶部吗？Apr 17, 2025 am 11:45 AM

向用户提供此链接的最简单方法是针对元素上的ID的链接。如此...

最好的（GraphQl）API是您编写的APIApr 17, 2025 am 11:36 AM

听着，我不是GraphQL专家，但我确实喜欢与之合作。作为前端开发人员，它向我曝光数据的方式非常酷。它就像一个菜单

每周平台新闻：文本间距书签，顶级等待，新放大器加载指示器Apr 17, 2025 am 11:26 AM

在本周的综述中

在保留边框半径的同时，扩展盒子的各种方法Apr 17, 2025 am 11:19 AM

我最近注意到Codepen的一个有趣的更改：在悬停在主页上的笔时，有一个矩形，圆角在后面扩展。

See all articles

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

AI Hentai Generator

免费生成ai无尽的。

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

Atom编辑器mac版下载

最流行的的开源编辑器

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

将Eclipse与SAP NetWeaver应用服务器集成。

SecLists

SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合，这些列表在安全评估过程中经常使用，都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表，帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上，他就可以访问到所需的每种类型的列表。

VSCode Windows 64位下载

微软推出的免费、功能强大的一款IDE编辑器

显示更多

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