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. 【树状数组】【P4113】[HEOI2012]采花

    Description 给定一个长度为 \(n\) 的序列,有 \(m\) 次询问,每次询问一段区间,求区间中有多少个数出现次数超过 \(1\) 次 Limitation \(n,~m~\leq~2~ ...

  3. md5sum命令行使用注意事项

    Linux下md5sum命令可以直接计算标准输入的hash值,使用方式为 echo -n '123456' | md5sum 注意给echo加上-n表示在尾部不加换行 命令行示例 $ echo -n ...

  4. C++并发类成员函数调用(练习1)

    一般类成员函数开线程格式 std::thread t1(&类名::函数,&实例化对象,参数....) ||std::thread t1(std::bind(&&类名:: ...

  5. 题解【bzoj4587 & bzoj4408 [FJOI2016]神秘数】

    Description \(n\) 个数的序列,每次询问一个区间,求最小的一个数使得不能用这个区间中的数之和表示. \(n \leq 10^5, \sum a_i \leq 10^9\) 这两个题一个 ...

  6. Java质数求解

    质数概念 质数,又称素数,指在一个大于1的自然数中,除了1和此整数自身外,无法被其他自然数整除的数(也可定义为只有1和本身两个因数的数).最小的素数是2,也是素数中唯一的偶数:其他素数都是奇数.质数有 ...

  7. vuejs2.0 vue实例的生命周期

    每个 Vue 实例在被创建之前都要经过一系列的初始化过程.例如,实例需要配置数据观测(data observer).编译模版.挂载实例到 DOM ,然后在数据变化时更新 DOM .下图展示的就是一个v ...

  8. 算法: 排序: 归并排序(Merge)

    http://www.codeproject.com/Articles/805587/Merge-Sort

  9. Python入门系列教程(五)函数

    全局变量 修改全局变量 a=100 def test(): global a a=200 print a 多个返回值 缺省参数 def test3(a,b=1): print a,b test3(a) ...

  10. 2016-2017-2 《Java程序设计》第六周学习总结

    20155223 2016-2017-2 <Java程序设计>第六周学习总结 教材学习内容总结 第十章 InputStream.OutputStream:无论数据源或目的地为何,只要设法取 ...