利用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之边框多颜色Border-color属性使用示例
Oct 11 HTML / CSS
CSS3制作文字半透明倒影效果的两种实现方式
Aug 08 HTML / CSS
详解CSS透明opacity和IE各版本透明度滤镜filter的最准确用法
Dec 20 HTML / CSS
CSS3 中filter(滤镜)属性使用详解
Apr 07 HTML / CSS
css3实现背景模糊的三种方式(小结)
May 15 HTML / CSS
CSS3实现的渐变幻灯片效果
Dec 07 HTML / CSS
CSS3选择器新增问题的实现
Jan 21 HTML / CSS
html5教程实现Photoshop渐变色效果
Dec 04 HTML / CSS
使用javascript和HTML5 Canvas画的四渐变色播放按钮效果
Apr 10 HTML / CSS
手把手教你实现一个canvas智绘画板的方法
Mar 04 HTML / CSS
canvas实现图片镜像翻转的2种方式
Jul 22 HTML / CSS
使用canvas实现雪花飘动效果的示例代码
Mar 30 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
日本因肺炎疫情影响,这几部动漫推延播放!
2020/03/03 日漫
《Re:从零开始的异世界生活 冰结之绊》
2020/04/09 日漫
PHP读取MySQL数据代码
2008/06/05 PHP
PHP常用日期加减计算方法实例小结
2018/07/31 PHP
Yii框架 session 数据库存储操作方法示例
2019/11/18 PHP
jQuery Ajax之$.get()方法和$.post()方法
2009/10/12 Javascript
原生js ActiveXObject获取execl里面的值
2013/11/01 Javascript
Nodejs中 npm常用命令详解
2016/07/04 NodeJs
vue.js组件vue-waterfall-easy实现瀑布流效果
2017/08/22 Javascript
vue-cli3 项目从搭建优化到docker部署的方法
2019/01/28 Javascript
微信小程序 扭蛋抽奖机css3动画实现详解
2019/07/19 Javascript
Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)
2019/11/21 Javascript
javascript实现鼠标点击生成文字特效
2019/12/24 Javascript
three.js 利用uv和ThreeBSP制作一个快递柜功能
2020/08/18 Javascript
js删除对象中的某一个字段的方法实现
2021/01/11 Javascript
Python实现向QQ群成员自动发邮件的方法
2014/11/19 Python
python自然语言编码转换模块codecs介绍
2015/04/08 Python
Python中optparser库用法实例详解
2018/01/26 Python
Django 实现下载文件功能的示例
2018/03/06 Python
Python常用模块sys,os,time,random功能与用法实例分析
2020/01/07 Python
利用Tensorflow构建和训练自己的CNN来做简单的验证码识别方式
2020/01/20 Python
Python模块相关知识点小结
2020/03/09 Python
python解释器安装教程的方法步骤
2020/07/02 Python
Python实现LR1文法的完整实例代码
2020/10/25 Python
乔丹诺(Giordano)酒庄德国官网:找到最好的意大利葡萄酒
2017/12/28 全球购物
旧时光糖果:Old Time Candy
2018/02/05 全球购物
英国设计师珠宝网站:Joshua James Jewellery
2020/03/01 全球购物
英国时尚和家居用品零售商:Matalan
2021/02/28 全球购物
计算机专业毕业生自我鉴定
2014/01/16 职场文书
厂办主管岗位职责范本
2014/02/28 职场文书
计算机求职信
2014/07/02 职场文书
大雁塔导游词
2015/02/04 职场文书
搞笑的婚礼主持词
2015/06/29 职场文书
工作简报范文
2015/07/21 职场文书
PostgreSQL聚合函数介绍以及分组和排序
2022/04/12 PostgreSQL
Win10 Anaconda安装python-pcl
2022/04/29 Servers