摘要:实现文字折纸效果效果图代码如下,复制即可使用如有错误,欢迎联系我改正,非常感谢
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">jQueryh1>
div>
body>
html>
如有错误,欢迎联系我改正,非常感谢!!!
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/2028.html
摘要:是因为动画的结束后的最后一帧的颜色为,立马会重新执行动画,颜色会初始到第一帧,所以会有明显的变化。的效果就是背景颜色被剪裁到文字上面,只有文字会显示背景颜色。用数字表达结合以上三个属性结合动画,最终实现文字渐变的效果。 浏览 Animate.css官网 的时候发现Animate.css这几个字母的颜色会慢慢变化,个人觉得还是很有意思,本以为是利用animate 改变color,结果F1...
摘要:所以给父元素添加至此,就实现了一个翻转卡牌的效果,但是这里需要解决一个问题,因为属性不被支持支持,所以需要进行降级,我的做法是直接显示隐藏。 今天在工作中遇到需求,需要用CSS3写一个卡片翻转效果,这个效果看起来简单,但是还是涉及到一些不常用的CSS3中的3D转换的属性以及实现该效果的思路,所以这里总结一下。 原文链接:http://mrzhang123.github.io/2016/...
摘要:所以给父元素添加至此,就实现了一个翻转卡牌的效果,但是这里需要解决一个问题,因为属性不被支持支持,所以需要进行降级,我的做法是直接显示隐藏。 今天在工作中遇到需求,需要用CSS3写一个卡片翻转效果,这个效果看起来简单,但是还是涉及到一些不常用的CSS3中的3D转换的属性以及实现该效果的思路,所以这里总结一下。 原文链接:http://mrzhang123.github.io/2016/...
阅读 690·2023-04-25 19:43
阅读 3881·2021-11-30 14:52
阅读 3736·2021-11-30 14:52
阅读 3802·2021-11-29 11:00
阅读 3752·2021-11-29 11:00
阅读 3819·2021-11-29 11:00
阅读 3535·2021-11-29 11:00
阅读 6023·2021-11-29 11:00