利用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 相关文章推荐
使用HTML5和CSS3表单验证功能
May 05 HTML / CSS
纯CSS3实现手风琴风格菜单具体步骤
May 06 HTML / CSS
浅谈CSS3 动画卡顿解决方案
Jan 02 HTML / CSS
CSS3关于z-index不生效问题的解决
Feb 19 HTML / CSS
CSS3 实现弹跳的小球动画
Oct 26 HTML / CSS
html5 canvas 使用示例
Oct 22 HTML / CSS
html5与css3小应用
Apr 03 HTML / CSS
一些常用的HTML5模式(pattern) 总结
Jul 14 HTML / CSS
使用phonegap进行本地存储的实现方法
Mar 31 HTML / CSS
HTML5中indexedDB 数据库的使用实例
May 11 HTML / CSS
手对手的教你用canvas画一个简单的海报的方法示例
Dec 10 HTML / CSS
完美实现CSS垂直居中的11种方法
Mar 27 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数组实现无限分类,不使用数据库,不使用递归.
2006/12/09 PHP
php 404错误页面实现代码
2009/06/22 PHP
PHP面向对象详解(三)
2015/12/07 PHP
PHP实现十进制数字与二十六进制字母串相互转换操作示例
2018/08/10 PHP
php5.3/5.4/5.5/5.6/7常见新增特性汇总整理
2020/02/27 PHP
php redis setnx分布式锁简单原理解析
2020/10/23 PHP
JS 修改URL参数(实现代码)
2013/07/08 Javascript
用js的for循环获取radio选中的值
2013/10/21 Javascript
Bootstrap每天必学之滚动监听
2016/03/16 Javascript
Angular 根据 service 的状态更新 directive
2016/04/03 Javascript
利用vue-router实现二级菜单内容转换
2016/11/30 Javascript
使用JavaScript实现链表的数据结构的代码
2017/08/02 Javascript
从0到1搭建Element的后台框架的方法步骤
2019/04/10 Javascript
vue中v-show和v-if的异同及v-show用法
2019/06/06 Javascript
微信小程序实现树莓派(raspberry pi)小车控制
2020/02/12 Javascript
微信小程序仿通讯录功能
2020/04/09 Javascript
JS实现audio音频剪裁剪切复制播放与上传(步骤详解)
2020/07/28 Javascript
JS实现按比例缩小图片宽高
2020/08/24 Javascript
Python比较文件夹比另一同名文件夹多出的文件并复制出来的方法
2015/03/05 Python
使用apidocJs快速生成在线文档的实例讲解
2018/02/07 Python
python版opencv摄像头人脸实时检测方法
2018/08/03 Python
Python实现一个数组除以一个数的例子
2019/07/20 Python
python中的逆序遍历实例
2019/12/25 Python
python+flask编写一个简单的登录接口
2020/11/13 Python
纯CSS3大转盘抽奖示例代码(响应式、可配置)
2017/01/13 HTML / CSS
HTML5实现经典坦克大战坦克乱走还能发出一个子弹
2013/09/02 HTML / CSS
大学生创业计划书的用途
2014/01/08 职场文书
模范教师事迹材料
2014/02/10 职场文书
多媒体专业自我鉴定
2014/02/28 职场文书
暑期培训班策划方案
2014/08/26 职场文书
美容院合作经营协议书
2014/10/10 职场文书
党风廉政建设调研报告
2015/01/01 职场文书
个人工作年终总结
2015/03/09 职场文书
汽车4S店前台接待岗位职责
2015/04/03 职场文书
少先大队干部竞选稿
2015/11/20 职场文书
聊聊golang中多个defer的执行顺序
2021/05/08 Golang