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. Zabbix利用msmtp+mutt发送邮件报警

    操作系统:CentOS 7 Web环境:Nginx+MySQL+PHP zabbix版本:zabbix-2.4.8.tar.gz 邮件服务:msmtp-1.4.32.tar.bz2     #http ...

  2. 21天实战caffe笔记_第一天

    1 深度学习术语 深度学习常用名词:有监督学习.无监督学习.训练数据集.测试数据集.过拟合.泛化.惩罚值(损失loss); 机器自动学习所需三份数据:训练集(机器学习的样例),验证集(机器学习阶段,用 ...

  3. C++统一初始化

    .C++中指定初始化值的方式有4种方式: ()小括号 ); ()等号 ; ()大括号 }; ()等号和大括号 }; .C++11统一初始化, 即使用大括号初始化方式, 其使用场景主要有以下3种: () ...

  4. Dockerfile 部署 nodejs

    1.编写.dockerignore 构建镜像时,并不需要node_modules目录等内容,可以使用.dockerignore忽略一些文件 # .dockerignore Dockerfile nod ...

  5. 发现视口（窗口）自适应的新大陆！！vw、vh

    从事前端已经1年了,一直为背景自适应铺满整个屏幕而苦苦发愁,因为要适配不同的pc显示器,所以高度不能写死,但是写(height:100%)并不能实现,愁死我了~我要不用写好的css框架实现或者自己写j ...

  6. vue全局组件和局部组件

    1.全局注册组件 Vue.componet('name',{ template:'<div></div>', data(){ retrun {} } }) 使用了以上这种方式注 ...

  7. tomcat修改java不重启

    修改tomcat   server.xml 找到项目的Context配置 <Context docBase="项目名" path="/项目路径" relo ...

  8. 《设计模式》-原则六：迪米特法则（LoD）

    啊哈哈哈哈,又到星期五了,真开心.回来吃完饭慌着去玩游戏,所以立马过来先完成今天的学习目标. 这个原则的命名好像是以某个人的名字命名的,算了我不去管这个了. 直接说说我学到的东西,这个迪米特法则又可以 ...

  9. HDU 2571 命运 (入门dp)

    题目链接 题意:二维矩阵,左上角为起点,右下角为终点,如果当前格子是(x,y),下一步可以是(x+1,y),(x,y+1)或者(x,y*k) ,其中k>1.问最大路径和. 题解:入门dp,注意负 ...

  10. caffe设计网络教程（一）

    假设现在我们要设计一个基于VGG的网络,主要考虑的问题是可否修改VGG类似于resnet那样,应该怎么修改?更具体来说,我们需要在VGG网络上考虑eltwise层,现在我们有三种方案,如下: 方案一: ...