CSS3实现文字折纸效果

最新推荐文章于 2021-08-04 00:36:22 发布
最新推荐文章于 2021-08-04 00:36:22 发布
阅读量187 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36190858/article/details/86152225
版权

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>

 如有错误，欢迎联系我改正，非常感谢！！！

posted @ 2018-07-09 16:56 Foryourfuture 阅读( ...) 评论( ...) 编辑 收藏
Foryourfuture
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS3实现折纸效果
努力，追梦的博客
05-04 2256
无标题文档 @-webkit-keyframes open{ 0% { -webkit-transform:rotateX(-120deg); } 25% { -webkit-transform:rotateX(30deg); } 50% { -webkit-transform:rotateX(-15deg); } 75% { -webkit-transfo
纯CSS实现3D折纸效果
whqet
02-17 5712
今天继续来看一个纯CSS实现的3D折纸效果，效果如下图。基于上一个效果《纯CSS实现图像3D悬停效果》而开发的，没有看过的童鞋欢迎移步。 本效果原理如下图所示，分别用.img，.img:before和.img:after三个元素装载图像的50%，30%和20%三个部分，三个部分设置一样的背景图像，下面两个background-position属性实现背景偏移。
绝对令人的惊叹的CSS3折叠效果(3D效果)整理
12-13
折纸效果是最近触摸屏幕最流行的一个3D效果，工作原理很简单，只需要轻轻触摸屏幕，它就会直接影响到即将显示出来的内容。这种独特的显示方式绝对可以让用户们眼前一亮！在我们的网站上，曾经共享过几篇关于折叠效果的设计文章，有兴趣的朋友可以阅读一下。 今天我们带来了更多关于折叠特效的资源，可以帮助你方便的实现这些折叠效果。注意，这里都可以使用CSS 3D来进行效果变换，如缩放、倾斜、旋转等等。 CSS and Javascript Resources Oridomi 这是一个独立的javascript插件，它们可以像纸一样生成折叠效果。此类库不依赖于任何其它JavaScript框架(但对于jQuer
css3实现折扇效果
weixin_45607293的博客
06-13 295
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{margin: 0;paddi.
折纸 css_折纸：CSS 3D折叠图像库
cungui5726的博客
08-20 310
折纸 cssSpace on web pages is growing tighter as mobile development gains in popularity. In response, designers are being pushed to create interfaces that work in extremely restricted areas. Carousels a...
利用HTML5和CSS3实现很酷的3D纸片折叠动画效果
09-25
3D纸片折叠动画是一款纸片折叠动画特效，利用HTML5和CSS3的相关特性，我们可以将一张张纸片折叠起来，形成很酷的3D动画效果。经测试效果相当不错。
利用CSS3实现文字折纸效果实例代码
09-22
在CSS3中，实现文字折纸效果是一种富有创意和视觉吸引力的设计技巧，它可以使文本看起来像被折叠或折痕处理过。本实例通过使用CSS3的变形（transform）、定位（positioning）和阴影（shadow）属性，以及伪元素...
jquery+css3文字列表展开折叠— —折纸效果.zip
最新发布
09-25
《jQuery与CSS3结合实现文字列表的折叠展开——折纸效果详解》 在网页设计中，为了提升用户体验和页面的互动性，各种动态效果被广泛应用。"jQuery+CSS3文字列表展开折叠— —折纸效果"就是一种巧妙地结合了jQuery库...
css3鼠标悬停图片折纸展开标题文字特效
06-10
本项目“css3鼠标悬停图片折纸展开标题文字特效”利用了CSS3的强大功能，特别是`transform`属性，来实现一种创新且吸引人的用户界面元素。下面将详细解析这一特效的实现原理和技术要点。 首先，`transform`属性是...
CSS3实现3D折叠字体效果代码.zip
07-04
CSS3实现3D折叠字体效果代码是一款纯CSS3实现的3D折纸效果。
jQuery+CSS3风琴折叠图片效果
06-12
CSS3实现的手风琴特效，支持图片倒影效果，请在火狐等支持CSS3属性的浏览器下观看
鼠标经过折纸展开CSS3特效
06-24
"折纸效果"是通过CSS3的`transform`属性来实现的。`transform`允许我们对元素进行各种变换，如旋转、缩放、移动和平移等。在这个特效中，当鼠标经过图片，图片上的透明层（遮罩效果）会应用`transform`的旋转和平移...
html文字展开效果图,利用CSS3实现文字折纸效果实例代码
weixin_32842959的博客
05-31 173
前言本文主要跟大家分享了一个利用CSS3实现文字折纸效果的实例，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧效果图：示例代码：代码如下，复制即可使用：html {height: 100%;}body {background: -webkit-linear-gradient(45deg, #e6e2df 80%, #c2c1bd 100%);background: linear-g...
css实现折叠纸,CSS3 折叠的纸塔
weixin_39926104的博客
08-04 178
CSS语言：CSSSCSS确定html {height: 100%;margin: 0;}body {background: #2980b9;background: black;font-size: 2px;}* {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}.main {ma...
html实现折纸展开的效果,如何利用Js+Css实现折纸动态导航效果
weixin_28869849的博客
06-04 268
如何利用Js+Css实现折纸动态导航效果发布时间：2021-03-20 09:39:30来源：亿速云阅读：111作者：小新这篇文章将为大家详细讲解有关如何利用Js+Css实现折纸动态导航效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。先来看看第一种实现方式效果图如下：不再采用ul li的布局方式-webkit-transform-style:preserve-...
折纸练习
njudongchen的博客
03-01 537
请把纸条竖着放在桌上，然后从纸条的下边向上对折，压出折痕后再展 开。此时有1条折痕，突起的⽅向指向纸条的背，这条折痕叫做“下”折痕 ；突起的指向纸条正的折痕叫做“上”折痕。如果每次都从下边向上对折，对折N次。请从上到下计算出所有折痕方向。给定折的次数n,请返回从上到下的折痕的数组，若为下折痕则对应元素为”down”,若为上折痕则为”up”.测试样例： 1 返回：[“down”]其实就是树的中序遍
css折扣样式
ansinie的博客
02-18 825
<style type="text/css"> #Discount{ border: 1px solid red; width: 200px; height: 50px; text-align: center; font-size: 20px; line-height: 50px; } #Discount>div{ float: left; } #Discount>#left{ ba
css3实现折纸效果
callmeCassie的博客
02-03 1589
css3实现折纸效果 实现步骤 1.文字居中且有立体感 /*内容块绝对居中*/ position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50......
CSS3实现透明背景与不透明文字效果
"本文将介绍如何使用CSS3来实现背景透明但文字保持不透明的效果，以满足在图片上展示带有半透明背景文字的需求。通过一个实际的示例代码，我们将探讨如何利用CSS3的特性来达成这一目的。" 在Web设计中，有时候我们...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值