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: '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实现文字折纸效果的更多相关文章
- CSS3知识之折角效果
CSS3折角效果:可兼容不同背景
- CSS3实战开发: 折角效果实战开发
<!DOCTYPE html> <html> <head> <meta charset="utf-9"> <meta name ...
- CSS3实现文字扫光效果
本篇文章由:http://xinpure.com/css3-text-light-sweep-effect/ CSS3 实现的文字扫光效果,几乎可以和 Flash 相媲美了 效果解析 我们分析一下实现 ...
- 纯css3实现文字间歇滚动效果
场景: 假设有4条数据或者标题,视口中只显示两条,采用每次向上滚动一条数据来展示所有的数据.效果如图: 用JavaScript也很容易实现,但是需要操作DOM,可以参考这篇博客.考虑到项目中经常使用V ...
- ps教程--折纸效果
原文:http://www.fevte.com/tutorial-16947-1.html
- jquery使用CSS3实现文字动画效果插件Textillate.js
Textillate是一款基于jquery的使用CSS3实现文字动画的小巧插件.Textillate.js集成了一些很棒的使用CSS3动画效果的 JavaScript 库,您可非常轻轻松地把这些动画效 ...
- 利用css3的text-shadow属性实现文字阴影乳白效果
现在CSS3+html5的网页应用的越来越广泛了.很多网页中的字体同样可以用CSS3来实现炫酷的效果. 下面就介绍一下利用css3的text-shadow属性实现文字阴影乳白效果.这是在设计达人上面看 ...
- CSS3写折纸
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- CSS3图片折角效果
本篇文章由:http://xinpure.com/css3-picture-angle-effect/ 图片折角效果主要是通过设置 border 属性实现的效果 效果预览 效果解析 假设我们将一个元素 ...
随机推荐
- Button 或 ImageButton 背景设为 透明 或半透明 (转)
半透明<Button android:background="#e0000000" ... /> 透明<Button android:background=&qu ...
- bzoj2757【scoi2012】Blinker的仰慕者
题目描述 Blinker 有非常多的仰慕者,他给每个仰慕者一个正整数编号.而且这些编号还隐藏着特殊的意义,即编号的各位数字之积表示这名仰慕者对Blinker的重要度. 现在Blinker想知道编号介于 ...
- centos详细安装redis步骤
1. 从官网(http://redis.io)下载最新稳定版2. 使用命令解压下载的tar包:tar –zxvf redis-3.2.0.tar.gz3. 通过命令cd redis-3.2.0进入源码 ...
- 简单易懂的GBDT
转https://www.cnblogs.com/liuyu124/p/7333080.html 梯度提升决策树(Gradient Boosting Decision Tree,GBDT)算法是近年来 ...
- 面向对象SOLID原则的自我理解
S.O.L.I.D 是面向对象设计(OOD)和面向对象编程(OOP)中的几个重要编码原则(Programming Priciple)的首字母缩写.面向对象设计的原则SRP The Single Res ...
- P1171 售货员的难题
P1171 售货员的难题 题目描述 某乡有nn个村庄(1<n \le 201<n≤20),有一个售货员,他要到各个村庄去售货,各村庄之间的路程s(0<s<1000)s(0< ...
- 如何在Windows系统下隐藏文件
隐藏后只有键入文件夹名称才可访问,如果忘记路径就找不到了 attrib +s +a +h +r e:\bak\tools 取消的方法: attrib -a -s -h -r e:\bak\tools
- laravel 和 thinkphp 条件查询的区别
laravel:以二维数组形式where查询,可以为空,即,该条where不运行: thinkphp:以字符串形式查询,不能为空.
- input新类型详解
http://www.webhek.com/post/html5-input-type.html
- BNUOJ 12756 Social Holidaying(二分匹配)
题目链接:http://www.bnuoj.com/bnuoj/problem_show.php?pid=12756 Social Holidaying Time Limit: 3000ms Memo ...