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. Button 或 ImageButton 背景设为 透明 或半透明 (转)

    半透明<Button android:background="#e0000000" ... /> 透明<Button android:background=&qu ...

  2. bzoj2757【scoi2012】Blinker的仰慕者

    题目描述 Blinker 有非常多的仰慕者,他给每个仰慕者一个正整数编号.而且这些编号还隐藏着特殊的意义,即编号的各位数字之积表示这名仰慕者对Blinker的重要度. 现在Blinker想知道编号介于 ...

  3. centos详细安装redis步骤

    1. 从官网(http://redis.io)下载最新稳定版2. 使用命令解压下载的tar包:tar –zxvf redis-3.2.0.tar.gz3. 通过命令cd redis-3.2.0进入源码 ...

  4. 简单易懂的GBDT

    转https://www.cnblogs.com/liuyu124/p/7333080.html 梯度提升决策树(Gradient Boosting Decision Tree,GBDT)算法是近年来 ...

  5. 面向对象SOLID原则的自我理解

    S.O.L.I.D 是面向对象设计(OOD)和面向对象编程(OOP)中的几个重要编码原则(Programming Priciple)的首字母缩写.面向对象设计的原则SRP The Single Res ...

  6. P1171 售货员的难题

    P1171 售货员的难题 题目描述 某乡有nn个村庄(1<n \le 201<n≤20),有一个售货员,他要到各个村庄去售货,各村庄之间的路程s(0<s<1000)s(0< ...

  7. 如何在Windows系统下隐藏文件

    隐藏后只有键入文件夹名称才可访问,如果忘记路径就找不到了 attrib +s +a +h +r e:\bak\tools 取消的方法: attrib -a -s -h -r e:\bak\tools

  8. laravel 和 thinkphp 条件查询的区别

    laravel:以二维数组形式where查询,可以为空,即,该条where不运行: thinkphp:以字符串形式查询,不能为空.

  9. input新类型详解

    http://www.webhek.com/post/html5-input-type.html

  10. BNUOJ 12756 Social Holidaying(二分匹配)

    题目链接:http://www.bnuoj.com/bnuoj/problem_show.php?pid=12756 Social Holidaying Time Limit: 3000ms Memo ...