CSS3를 사용하여 텍스트 종이접기 효과를 얻는 방법-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS3를 사용하여 텍스트 종이접기 효과를 얻는 방법

Jul 14, 2018 pm 04:35 PM

이 글은 CSS3를 사용하여 텍스트 종이접기 효과를 얻는 방법을 주로 소개합니다. 이제 필요한 친구들이 참고할 수 있도록 공유하겠습니다.

렌더링 :

코드는 다음과 같습니다. 복사하여 사용하세요.

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;
    &lt;title&gt;&lt;/title&gt;
    &lt;style type=&quot;text/css&quot;&gt;
        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: &#39;Source Code Pro&#39;, 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);}

    &lt;/style&gt;&lt;/head&gt;&lt;body&gt;
    &lt;p class=&quot;wrapper&quot;&gt;
        &lt;h1 data-heading=&quot;jQuery&quot;&gt;jQuery&lt;/h1&gt;
    &lt;/p&gt;&lt;/body&gt;&lt;/html&gt;

로그인 후 복사

#🎜 🎜## 🎜🎜#위 내용은 모두의 학습에 도움이 되기를 바랍니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!