利用CSS3实现文字折纸效果实例代码


Posted in HTML / CSS onJuly 10, 2018

前言

本文主要跟大家分享了一个利用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>

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

HTML / CSS 相关文章推荐
css3强大的动画效果animate使用说明及浏览器兼容介绍
Jan 09 HTML / CSS
CSS3中的opacity属性使用教程
Aug 19 HTML / CSS
使用CSS3实现一个3D相册效果实例
Dec 03 HTML / CSS
HTML5 Web 存储详解
Sep 16 HTML / CSS
HTML5之WebGL 3D概述(下)—借助类库开发及框架介绍
Jan 31 HTML / CSS
HTMl5的存储方式sessionStorage和localStorage详解
Mar 18 HTML / CSS
html5中JavaScript removeChild 删除所有节点
May 16 HTML / CSS
html5是什么_动力节点Java学院整理
Jul 07 HTML / CSS
使用html5新特性轻松监听任何App自带返回键的示例
Mar 13 HTML / CSS
详解HTML5 Canvas标签及基本使用
Jan 10 HTML / CSS
canvas实现图片镜像翻转的2种方式
Jul 22 HTML / CSS
如何解决flex文本溢出问题小结
Jul 15 HTML / CSS
CSS3实现文本垂直排列的方法
Jul 10 #HTML / CSS
CSS3实现背景透明文字不透明的示例代码
Jun 25 #HTML / CSS
css3 column实现卡片瀑布流布局的示例代码
Jun 22 #HTML / CSS
CSS3 清除浮动的方法示例
Jun 01 #HTML / CSS
CSS3之transition实现下划线的示例代码
May 30 #HTML / CSS
CSS3实现可翻转的hover效果
May 23 #HTML / CSS
详解如何在css中引入自定义字体(font-face)
May 17 #HTML / CSS
You might like
php短信接口代码
2016/05/13 PHP
原生JS实现Ajax通过POST方式与PHP进行交互的方法示例
2018/05/12 PHP
Jquery 高亮显示文本中重要的关键字
2009/12/24 Javascript
EXTJS FORM HIDDEN TEXTFIELD 赋值 使用value不好用的问题
2011/04/16 Javascript
JS操作XML实例总结(加载与解析XML文件、字符串)
2015/12/08 Javascript
深入解析Backbone.js框架的依赖库Underscore.js的作用
2016/05/07 Javascript
js智能获取浏览器版本UA信息的方法
2016/08/08 Javascript
Bootstrap基本模板的使用和理解1
2016/12/14 Javascript
js实现定时进度条完成后切换图片
2017/01/04 Javascript
vue.js 获取当前自定义属性值
2017/06/01 Javascript
详解webpack 多页面/入口支持&amp;公共组件单独打包
2017/06/29 Javascript
Node调用Java的示例代码
2017/09/20 Javascript
vue.js 使用axios实现下载功能的示例
2018/03/05 Javascript
vue项目中使用scss的方法步骤
2019/05/16 Javascript
javascript设计模式 ? 简单工厂模式原理与应用实例分析
2020/04/09 Javascript
Python抓取电影天堂电影信息的代码
2016/04/07 Python
利用Python破解验证码实例详解
2016/12/08 Python
Pandas DataFrame数据的更改、插入新增的列和行的方法
2019/06/25 Python
python提取log文件内容并画出图表
2019/07/08 Python
Python实现RGB与HSI颜色空间的互换方式
2019/11/27 Python
TensorFlow:将ckpt文件固化成pb文件教程
2020/02/11 Python
使用Python第三方库pygame写个贪吃蛇小游戏
2020/03/06 Python
Python select及selectors模块概念用法详解
2020/06/22 Python
CSS3哪些新特性值得称赞
2016/03/02 HTML / CSS
德国原装品牌香水、化妆品和手表网站:BRASTY.DE
2016/10/16 全球购物
BabyBjörn婴儿背带法国官网:BabyBjorn法国
2018/06/16 全球购物
UNOde50美国官网:西班牙珠宝品牌
2020/08/15 全球购物
介绍一下Python下range()函数的用法
2013/11/07 面试题
个人找工作自荐信格式
2013/09/21 职场文书
数控技术专业推荐信
2013/11/01 职场文书
大学毕业生个人自荐书
2014/07/02 职场文书
我为党旗添光彩演讲稿
2014/09/10 职场文书
领导干部作风建设自查报告
2014/10/23 职场文书
汽车转让协议书范本
2014/12/07 职场文书
大学生村官工作心得体会
2016/01/23 职场文书
资产移交协议书
2016/03/24 职场文书