利用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代码实现switch滑动开关按钮效果
Aug 30 HTML / CSS
CSS3实现任意图片lowpoly动画效果实例
May 11 HTML / CSS
用CSS3实现Win8风格的方格导航菜单效果
Apr 10 HTML / CSS
使用CSS3的背景渐变Text Gradient 创建文字颜色渐变
Aug 19 HTML / CSS
css3实现wifi信号逐渐增强效果实例
Aug 09 HTML / CSS
网页中的电话号码如何实现一键直呼效果_附示例
Mar 15 HTML / CSS
详解HTML5 canvas绘图基本使用方法
Jan 29 HTML / CSS
html+css实现自定义图片上传按钮功能
Sep 04 HTML / CSS
html5中的一些标签学习(心得)
Oct 18 HTML / CSS
HTML5 新表单类型示例代码
Mar 20 HTML / CSS
HTML5 video循环播放多个视频的方法步骤
Aug 06 HTML / CSS
详解CSS不受控制的position fixed
May 25 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
S900/ ETON E1-XM 收音机
2021/03/02 无线电
PHP 和 XML: 使用expat函数(一)
2006/10/09 PHP
浅析PHP原理之变量(Variables inside PHP)
2013/08/09 PHP
thinkphp在模型中自动完成session赋值示例代码
2014/09/09 PHP
ThinkPHP分页实例
2014/10/15 PHP
php中static和const关键字用法分析
2016/12/07 PHP
Laravel 5+ .env环境配置文件详解
2020/04/06 PHP
JavaScript中Math对象使用说明
2008/01/16 Javascript
跨浏览器开发经验总结(四) 怎么写入剪贴板
2010/05/13 Javascript
Javascript高级技巧分享
2014/02/25 Javascript
BootStrap点击下拉菜单项后显示一个新的输入框实现代码
2016/05/16 Javascript
文本框只能输入数字的js代码(含小数点)
2016/07/10 Javascript
javascript中Number的方法小结
2016/11/21 Javascript
JQuery学习总结【二】
2016/12/01 Javascript
Bootstrap基本插件学习笔记之Tooltip提示工具(18)
2016/12/08 Javascript
Js自动截取字符串长度,添加省略号(……)的实现方法
2017/03/06 Javascript
Vue项目webpack打包部署到服务器的实例详解
2017/07/17 Javascript
vuejs使用FormData实现ajax上传图片文件
2017/08/08 Javascript
微信小程序自定义对话框弹出和隐藏动画
2018/07/19 Javascript
Vue中通过Vue.extend动态创建实例的方法
2019/08/13 Javascript
Vue的属性、方法、生命周期实例代码详解
2019/09/17 Javascript
Vue 设置axios请求格式为form-data的操作步骤
2019/10/29 Javascript
[02:40]2014DOTA2 国际邀请赛中国区预选赛 四大豪门抵达华西村
2014/05/23 DOTA
[01:23:45]DOTA2-DPC中国联赛 正赛 CDEC vs Dragon BO3 第一场 1月22日
2021/03/11 DOTA
快速了解Python相对导入
2018/01/12 Python
基于python的socket实现单机五子棋到双人对战
2020/03/24 Python
扩展Django admin的list_filter()可使用范围方法
2019/08/21 Python
python3 selenium自动化 frame表单嵌套的切换方法
2019/08/23 Python
python实现一个点绕另一个点旋转后的坐标
2019/12/04 Python
Python对wav文件的重采样实例
2020/02/25 Python
keras自定义回调函数查看训练的loss和accuracy方式
2020/05/23 Python
英国时尚配饰、珠宝和服装网站:KJ Beckett
2020/01/23 全球购物
化工操作工岗位职责
2014/04/29 职场文书
社区爱国卫生月活动总结
2014/06/30 职场文书
领导干部群众路线对照检查材料
2014/11/05 职场文书
幼儿园教师读书笔记
2015/06/29 职场文书