利用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 相关文章推荐
IE兼容css3圆角的实现代码
Jul 21 HTML / CSS
前端隐藏出边界内容的实现方法
Apr 14 HTML / CSS
CSS3中各种颜色属性的使用教程
May 17 HTML / CSS
CSS3绘制有活力的链接下划线
Jul 14 HTML / CSS
CSS3模拟IOS滑动开关效果
Sep 28 HTML / CSS
HTML5中FileReader接口使用方法实例详解
Aug 26 HTML / CSS
利用html5的websocket实现websocket聊天室
Dec 12 HTML / CSS
纯HTML5+CSS3制作生日蛋糕(代码易懂)
Nov 16 HTML / CSS
html5 input输入实时检测以及延时优化
Jul 18 HTML / CSS
HTML5 3D旋转相册的实现示例
Dec 03 HTML / CSS
如何查看浏览器对html5的支持情况
Dec 15 HTML / CSS
CSS 文字装饰 text-decoration & text-emphasis 详解
Apr 06 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 autoload与spl_autoload自动加载机制的深入理解
2013/06/05 PHP
php操作(删除,提取,增加)zip文件方法详解
2015/03/12 PHP
php生成二维码
2015/08/10 PHP
PHP与服务器文件系统的简单交互
2016/10/21 PHP
JAVASCRIPT对象及属性
2007/02/13 Javascript
JavaScript 变量基础知识
2009/11/07 Javascript
jquery常用方法及使用示例汇总
2014/11/08 Javascript
JavaScript实现动画打开半透明提示层的方法
2015/04/21 Javascript
详细分析使用AngularJS编程中提交表单的方式
2015/06/19 Javascript
js Canvas实现圆形时钟教程
2016/09/19 Javascript
BootStrap 可编辑表Table格
2016/11/24 Javascript
xmlplus组件设计系列之网格(DataGrid)(10)
2017/05/05 Javascript
jQuery实现的简单无刷新评论功能示例
2017/11/08 jQuery
JS使用Date对象实时显示当前系统时间简单示例
2018/08/23 Javascript
JS原生带缩略图的图片切换效果
2018/10/10 Javascript
详解webpack打包第三方类库的正确姿势
2018/10/20 Javascript
vue-cli3.0如何使用CDN区分开发、生产、预发布环境
2018/11/22 Javascript
JS实现图片轮播效果实例详解【可自动和手动】
2019/04/04 Javascript
vue中组件通信的八种方式(值得收藏!)
2019/08/09 Javascript
微信小程序事件 bindtap bindinput代码实例
2019/08/26 Javascript
微信小程序单选框自定义赋值
2020/05/26 Javascript
微信小程序scroll-view实现滚动到锚点左侧导航栏点餐功能(点击种类,滚动到锚点)
2020/06/11 Javascript
详解基于element的区间选择组件校验(交易金额)
2021/01/07 Javascript
[01:04:09]DOTA2-DPC中国联赛 正赛 iG vs VG BO3 第二场 2月2日
2021/03/11 DOTA
python实现猜数字游戏(无重复数字)示例分享
2014/03/29 Python
Python中exit、return、sys.exit()等使用实例和区别
2015/05/28 Python
python下调用pytesseract识别某网站验证码的实现方法
2016/06/06 Python
Python图像处理之直线和曲线的拟合与绘制【curve_fit()应用】
2018/12/26 Python
PyQt5使用QTimer实现电子时钟
2019/07/29 Python
python+openCV调用摄像头拍摄和处理图片的实现
2019/08/06 Python
在css3中background-clip属性与background-origin属性的用法介绍
2012/11/13 HTML / CSS
巴西Bo.Bô官方在线商店:经营奢侈品时尚业务
2020/03/16 全球购物
汽车专业毕业生推荐信
2013/11/12 职场文书
超市开业庆典策划方案
2014/05/14 职场文书
企业法人授权委托书
2014/09/25 职场文书
销售会议开幕词
2015/01/28 职场文书