介绍 & lt; ! DOCTYPE html>
& lt; html>
& lt; head>
,,,& lt; title> & lt;/title>
,,,& lt; style 类型=拔谋?css"比;
,,,,,,,html {
,,身高:100%;
}
body {
背景:才能,-webkit-linear-gradient(45度,,# e6e2df 80%,, # c2c1bd 100%);
背景:才能,线性渐变(45度,,# e6e2df 80%,, # c2c1bd 100%);
,,身高:100%;
-webkit-font-smoothing:才能,平滑;
,,-moz-osx-font-smoothing:灰度;
}
.wrapper {
,,宽度:100%;
,,字体类型:& # 39;Source Code 箴# 39;,,等宽字体;
保证金才能:0,汽车;
,,身高:100%;
}
.wrapper h2 {
首字母才能:大写;
,,-webkit-transform:翻译(-50%,-50%),斜(10度),旋转(-10度);
,,,,,,,,,变换:,翻译(-50%,-50%),斜(10度),旋转(-10度);
,,字体大小:20大众;
,,:50%;
,,左:50%;
保证金才能:0;
位置:才能,绝对;
文本渲染才能:optimizeLegibility;
,,粗细:900;
颜色:,才能rgba (255,, 158,, 177,, 0.5);
,,文本阴影:1 px 4 px 6 px # e6e2df,, 0, 0, 0, # 66303,, 1 px 4 px 6 px # e6e2df;
}
.wrapper h2: before {
内容:才能,attr (data-heading);
位置:才能,绝对;
,,左:0;
,,:-4.8%;
,,溢出:隐藏。
,,宽度:100%;
,,身高:50%;
,,颜色:# fbf7f4;
-webkit-transform才能:翻译(1.6大众,,0),斜(-13度),规模(1),1.2);
,,,,,,,,,变换:,翻译(1.6大众,,0),斜(-13度),规模(1),1.2);
,,z - index: 2;
,,文本阴影:2 px 1 px 6 px rgba (0, 0, 0, 0.2);
}
.wrapper h2: after {
内容:才能,attr (data-heading);
位置:才能,绝对;
,,左:0;
,,:0;
,,溢出:隐藏。
,,宽度:100%;
,,身高:100%;
,,z - index: 1;
,,颜色:# d3cfcc;
-webkit-transform才能:翻译(0大众,0),斜(13度),规模(1),0.8);
,,,,,,,,,变换:,翻译(0大众,0),斜(13度),规模(1),0.8);
,,-webkit-clip-path:多边形(0,50%,100%,50%,100%,100%,0%,100%);
,,,,,,,,,clip-path:,多边形(0,50%,100%,50%,100%,100%,0%,100%);
,,文本阴影:2 px 1 px 6 px rgba (0, 0, 0, 0.3);
}
,,,& lt;/style>
& lt;/head>
& lt; body>
,,,& lt; div 类=皐rapper"比;
,,,,,,,& lt; h2 data-heading=癹Query"祝辞jQuery
,,,& lt;/div>
& lt;/body>
& lt;/html>
这期内容当中小编将会给大家带来有关使用CSS3怎么实现一个文字折纸效果,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。
上述就是小编为大家分享的使用CSS3怎么实现一个文字折纸效果了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注行业资讯频道。
