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. MySQL总结小妙招

    mysql5.7版本,免登陆修改管理员密码: vim /etc/my.cnf 加入skip-grant-tables,重启MySQL 终端输入 mysql ,直接登录MySQL数据库,然后use my ...

  2. GridView中网络图片延迟加载导致高度计算失败的问题

    在使用下拉刷新以及加载更多控件的时候,出现了列表上滚不完的现象,经过半天的分析,最后得出结论:由于图片采用了延迟加载,导致列表按照没有加载图片时候的大小进行布局,相关的加载更多控件也就傻逼了. 最终解 ...

  3. 解题：SCOI 2012 喵星球上的点名

    题面 初见广义SAM 建立广义SAM,每次把询问走一遍,最终走到节点的子树里的猫老师都被这次点名点到 这样DFS parent树打时间戳记录入栈出栈时间,把问题转化成一个序列问题:给一个若干种颜色构成 ...

  4. 【trie树】【P4551】 最长异或路径

    Description 给定 \(n\) 个点的带边权树,求一条异或和最大的简单路径 Input 第一行是点数 \(n\) 下面 \(n - 1\) 行每行三个整数描述这棵树 Output 输出一个数 ...

  5. 交互式shell脚本对话框----whiptail指令

    当你在linux环境下setup软件的时候就会有相应的对话框让你输入.虽然我们已经习惯了这种交互的方法,但是如果有一种直观的界面来输入是不是会更加友好和方便呢,在shell脚本中你可以使用-whipt ...

  6. 八、java常用类

    目录 一.字符串相关类 String类 StringBuffer类 二.基本数据类型包装类 三.Math类 四.File类 五.枚举类 一.字符串相关类 1.String类 java.lang.Str ...

  7. 【Asp.net入门09】第一个ASP.NET 应用程序-处理窗体(1)

    我们创建了一个HTML窗体,可以通过它显示受邀参加晚会的嘉宾,但是,当嘉宾单击Submit RSVP按钮时,同一个页面会反复多次显示.为了解决此问题,需要实现一段代码,用于在将窗体数据发布到服务器时执 ...

  8. 深入了解volatile

    volatile关键字经常在并发编程中使用,其特性是保证可见性以及有序性,但是关于volatile的使用仍然要小心,这需要明白volatile关键字的特性及实现的原理,这也是本篇文章的主要内容 一.J ...

  9. Hadoop基础-HDFS数据清理过程之校验过程代码分析

    Hadoop基础-HDFS数据清理过程之校验过程代码分析 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 想称为一名高级大数据开发工程师,不但需要了解hadoop内部的运行机制,还需 ...

  10. 转：iPhone上关于相机拍照的图片的imageOrientation的问题

    用相机拍摄出来的照片含有EXIF信息,UIImage的imageOrientation属性指的就是EXIF中的orientation信息.如果我们忽略orientation信息,而直接对照片进行像素处 ...