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实现文字折纸效果的更多相关文章

  1. CSS3知识之折角效果

    CSS3折角效果:可兼容不同背景

  2. CSS3实战开发: 折角效果实战开发

    <!DOCTYPE html> <html> <head> <meta charset="utf-9"> <meta name ...

  3. CSS3实现文字扫光效果

    本篇文章由:http://xinpure.com/css3-text-light-sweep-effect/ CSS3 实现的文字扫光效果,几乎可以和 Flash 相媲美了 效果解析 我们分析一下实现 ...

  4. 纯css3实现文字间歇滚动效果

    场景: 假设有4条数据或者标题,视口中只显示两条,采用每次向上滚动一条数据来展示所有的数据.效果如图: 用JavaScript也很容易实现,但是需要操作DOM,可以参考这篇博客.考虑到项目中经常使用V ...

  5. ps教程--折纸效果

    原文:http://www.fevte.com/tutorial-16947-1.html

  6. jquery使用CSS3实现文字动画效果插件Textillate.js

    Textillate是一款基于jquery的使用CSS3实现文字动画的小巧插件.Textillate.js集成了一些很棒的使用CSS3动画效果的 JavaScript 库,您可非常轻轻松地把这些动画效 ...

  7. 利用css3的text-shadow属性实现文字阴影乳白效果

    现在CSS3+html5的网页应用的越来越广泛了.很多网页中的字体同样可以用CSS3来实现炫酷的效果. 下面就介绍一下利用css3的text-shadow属性实现文字阴影乳白效果.这是在设计达人上面看 ...

  8. CSS3写折纸

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  9. CSS3图片折角效果

    本篇文章由:http://xinpure.com/css3-picture-angle-effect/ 图片折角效果主要是通过设置 border 属性实现的效果 效果预览 效果解析 假设我们将一个元素 ...

随机推荐

  1. 解题：CQOI 2017 小Q的棋盘

    题面 由树的结构我们可以知道,最终要么是连一条(最长的)链都没走完,要么是走了一些点最后走了最长的链.为什么总是说最长的链呢,因为在树上这样走的过程中(最后不要求返回的话)除了一条链都会被走两次,显然 ...

  2. MySQL 第七篇：视图、触发器、事务、存储过程、函数

    一 视图 视图是一个虚拟表(非真实存在),其本质是[根据SQL语句获取动态的数据集,并为其命名],用户使用时只需使用[名称]即可获取结果集,可以将该结果集当做表来使用. 使用视图我们可以把查询过程中的 ...

  3. C++ public private protect 继承关系(链接)

    基础链接 总结:  public继承基类成员访问权限没有变化; protected继承基类public和protected权限变为protected,基类private不变. private继承基类p ...

  4. UIScrollview 与 Autolayout 的那点事

    原文  http://www.cocoachina.com/ios/20151221/14757.html 前言 自从写了 介绍Masonry 那篇文章以后 就一直有人对UIScrollView的那个 ...

  5. opencv图片右转函数

    因为需要将函数进行右转,发现opencv自带 的过于麻烦.自己写了个右转的.可以根据这个想法写出任何方向的 //函数功能,右转图片 IplImage* convertImage(IplImage* i ...

  6. SQL统计每科前三名的学生的语句

    偶然在论坛看到一个网友的帖子,关于他遇到一个面试题的,网站写了很多,我看了一下,结果应该是没问题的,但是为何面试官还是不满意,我想面试官可能并不是想考你真能把这道题做出来,而是看你如何简洁的通过一个s ...

  7. Linux入门，这七大习惯得有！

    对于很多Linux初学者来说,在刚开始使用Linux系统时会感到很多不适.这里为大家整理了自己以前Linux入门时别人告诉我的七个习惯.我相信如果你运用了这七个习惯,在你使用Linux时你会感觉更安全 ...

  8. select()函数

    select(),确定一个或多个套接口的状态,本函数用于确定一个或多个套接口的状态,对每一个套接口,调用者可查询它的可读性.可写性及错误状态信息,用fd_set结构来表示一组等待检查的套接口,在调用返 ...

  9. python3.6.4的importlib模块重载用法

    了解:模块的重载 考虑到性能的原因,每个模块只被导入一次,放入字典sys.module中,如果你改变了模块的内容,你必须重启程序,python不支持重新加载或卸载之前导入的模块, 有的同学可能会想到直 ...

  10. linux之top命令详解

    top:动态查看进程变化,监控linux的系统状况. top命令是Linux下常用的性能分析工具,能够实时显示系统中各个进程的资源占用状况,类似于Windows的任务管理器. 下面详细介绍它的使用方法 ...