利用CSS3实现文字折纸效果实例代码
发布时间:2018-07-10 17:18:08 作者:Foryourfuture 我要评论
这篇文章主要给大家介绍了关于利用CSS3实现文字折纸效果的相关资料,文中给出了完整的示例代码,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun)
前言
本文主要跟大家分享了一个利用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>
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对程序员之家的支持。
相关文章
- CSS3 3D折叠翻转文字动画 14 人浏览暂无评论 0今天我们再来分享一款CSS3文字特效应用,和之前分享的这款HTML5/CSS3文字特效类似,它也是一款CSS3 3D折叠翻转文字动画2014-12-29
- 这是一款基于纯CSS3使用立方体几何模型构建3D文字动画效果源码。通过css3绘制图形阴影构成带有3D立体视觉效果的几何图形文字旋转显示动画特效,画面上的文字“HELLO”的各2018-06-23
- 这篇文章主要介绍了CSS3下的渐变文字效果实现示例的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-03-02
- 这篇文章主要介绍了css3实现文字扫光渐变动画效果的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2017-11-07
- Mimic.css是一款CSS3动画效果库,利用css3属性制作18种酷炫的文字动画特效,和animate.css一样使用简单,欢迎下载2017-09-30
CSS3动画之流彩文字效果+图片模糊效果+边框伸展效果实现代码合集
这篇文章主要介绍了CSS3动画中流彩文字效果+图片模糊效果+边框伸展效果实现,blur滤镜实现和SVG滤镜实现以及SVG作为背景图片载入等操作步骤实现功能,具体操作步骤大家可查2017-08-18- 这是一款使用CSS3制作鼠标hover图片遮罩层动画特效,在鼠标hover图片时,会生成一个不同颜色的遮罩层,并显示文字2017-06-27
- 这篇文章主要跟大家分享了利用纯CSS3实现文字向右循环闪过效果的相关资料,因为兼容性的问题,常被用于移动端,实现的效果非常不错,文中给出了详细的介绍和示例代码,需要2017-06-15
- 最近在做项目的时候,发现文字下方有个波浪线,寻思着,能不能用css来实现,减少资源,遂参考一些资料,后来真的实现了。所以就有了这篇文章了,本文详细的介绍了利用CSS32016-11-20
CSS3利用text-shadow属性实现多种效果的文字样式展现方法
下面小编就为大家带来一篇CSS3利用text-shadow属性实现多种效果的文字样式展现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2016-08-25
最新评论