dex com code nsf after ota cas idt
- <div class="wrapper">
- <h1 contenteditable data-heading="Folded">
- Folded
- </h1>
- </div>
- $bg: #e6e2df;
- html,
- body {
- height: 100 % ;
- }
- body {
- background: linear - gradient(45deg, $bg 80 % , #c2c1bd 100 % ); - webkit - font - smoothing: antialiased; - moz - osx - font - smoothing: grayscale;
- }.wrapper {
- width: 100 % ;
- font - family: 'Source Code Pro',
- monospace;
- margin: 0 auto;
- height: 100 % ;
- h1 {
- text - transform: uppercase;
- 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(#ff9eb1, 0.5);
- text - shadow: 1px 4px 6px $bg,
- 0 0 0#66303a,
- 1px 4px 6px $bg;
- white - space: nowrap;
- & :before {
- content: attr(data - heading);
- position: absolute;
- left: 0;
- top: -4.8 % ;
- overflow: hidden;
- width: 100 % ;
- height: 50 % ;
- color: #fbf7f4;
- 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);
- }
- & :after {
- content: attr(data - heading);
- position: absolute;
- left: 0;
- top: 0;
- overflow: hidden;
- width: 100 % ;
- height: 100 % ;
- z - index: 1;
- color: #d3cfcc;
- transform: translate(0vw, 0) skew(13deg) scale(1, 0.8);
- clip - path: polygon(0 50 % , 100 % 50 % , 100 % 100 % , 0 % 100 % );
- text - shadow: 2px - 1px 6px rgba(0, 0, 0, 0.3);
- }
- }
- }
- // JS for content editable trick from Chris Coyier
- var h1 = document.querySelector("h1");
- h1.addEventListener("input",
- function() {
- this.setAttribute("data-heading", this.innerText);
- });
纯 css 实现 3D 字体
来源: http://www.bubuko.com/infodetail-2002576.html