利用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特性绘制简易版围棋效果
Sep 28 HTML / CSS
使用简单的CSS3属性实现炫酷读者墙效果
Jan 08 HTML / CSS
css3教程之倾斜页面
Jan 27 HTML / CSS
CSS3实现千变万化的文字阴影text-shadow效果设计
Apr 26 HTML / CSS
CSS3 实现童年的纸飞机
May 05 HTML / CSS
CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码
Feb 24 HTML / CSS
值得收藏的HTML5资源(学习html5的朋友可以收藏下)
Jul 20 HTML / CSS
html5 Canvas绘制线条 closePath()实例代码
May 10 HTML / CSS
程序设计HTML5 Canvas API
Apr 08 HTML / CSS
HTML5不支持标签和新增标签详解
Jun 27 HTML / CSS
处理HTML5新标签的浏览器兼容版问题
Mar 13 HTML / CSS
HTML5中使用json对象的实例代码
Sep 10 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按行读取、处理较大CSV文件的代码实例
2014/04/09 PHP
关于PHP文件的自动运行方法分析
2016/05/13 PHP
jquery+thinkphp实现跨域抓取数据的方法
2016/10/15 PHP
Zend Framework入门应用实例详解
2016/12/11 PHP
phpstudy后门rce批量利用脚本的实现
2019/12/12 PHP
php实现商城购物车的思路和源码分析
2020/07/23 PHP
JS解密入门之凭直觉解
2008/06/25 Javascript
jquery.boxy插件的iframe扩展代码
2010/07/02 Javascript
基于jquery跨浏览器显示的file上传控件
2011/10/24 Javascript
jquery通过visible来判断标签是否显示或隐藏
2014/05/08 Javascript
jquery获取复选框checkbox的值实现方法
2016/05/30 Javascript
javascript之IE版本检测超简单方法
2016/08/20 Javascript
微信小程序通过api接口将json数据展现到小程序示例
2017/01/20 Javascript
vue中动态绑定表单元素的属性方法
2018/02/23 Javascript
javascript中的相等操作符(==与===区别)
2019/12/21 Javascript
[57:50]DOTA2上海特级锦标赛主赛事日 - 4 胜者组决赛Secret VS Liquid第二局
2016/03/05 DOTA
[51:17]完美世界DOTA2联赛循环赛Inki vs DeMonsTer 第二场 10月30日
2020/10/31 DOTA
[38:32]完美世界DOTA2联赛循环赛 Forest vs DM 第二场 11.06
2020/11/06 DOTA
python实现的希尔排序算法实例
2015/07/01 Python
python实现获取Ip归属地等信息
2016/08/27 Python
python实现发送邮件及附件功能
2021/03/02 Python
Python处理Excel文件实例代码
2017/06/20 Python
TensorFlow 合并/连接数组的方法
2018/07/27 Python
在python中按照特定顺序访问字典的方法详解
2018/12/14 Python
python实现爬取百度图片的方法示例
2019/07/06 Python
对python while循环和双重循环的实例详解
2019/08/23 Python
Python模块的定义,模块的导入,__name__用法实例分析
2020/01/07 Python
Python常见反爬虫机制解决方案
2020/06/01 Python
Python自带的IDE在哪里
2020/07/01 Python
最新pycharm安装教程
2020/11/18 Python
应届生新闻编辑求职信
2013/11/19 职场文书
教师求职信范文分享
2013/12/27 职场文书
房地产财务部员工岗位职责
2014/03/12 职场文书
Pytorch实现图像识别之数字识别(附详细注释)
2021/05/11 Python
python实现简单聊天功能
2021/07/07 Python
MySQL中IO问题的深入分析与优化
2022/04/02 MySQL