텍스트 종이접기 효과를 얻는 CSS3 방법(코드 예)-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

텍스트 종이접기 효과를 얻는 CSS3 방법(코드 예)

青灯夜游

Jan 27, 2021 pm 07:37 PM

css3

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

텍스트 종이접기 효과를 얻는 CSS3 방법(코드 예)

CSS3 text origami

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

<!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: &#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);
}

    </style>
</head>
<body>
    <div class="wrapper">
        <h1 id="jQuery">jQuery</h1>
    </div>
</body>
</html>

렌더링:

텍스트 종이접기 효과를 얻는 CSS3 방법(코드 예)

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 비디오를 방문하세요! !

위 내용은 텍스트 종이접기 효과를 얻는 CSS3 방법(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

이 기사는 博客园에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제

관련 기사

큰 분열에서 분기Apr 18, 2025 am 10:27 AM

나는 프론트 엔드 개발자라는 용어를 좋아합니다. 우려 사항이있는 경우 작업의 본질을 캡슐화합니다.

웹 사이트를 시작하는 초보자의 여정Apr 18, 2025 am 10:20 AM

2018 년 9 월, 나는 웹 개발을 배우는 데 몇 달 밖에 걸리지 않았습니다. 많은 새로운 개발자들의 경우에 나는 확실히 큰 일이었습니다.

모든 새로운 ES2019 팁과 요령Apr 18, 2025 am 10:19 AM

ECMAScript 표준은 ES2019의 새로운 기능을 추가하여 다시 업데이트되었습니다. 이제 Node, Chrome, Firefox 및 Safari에서 공식적으로 제공됩니다

코일로 사이트 수익 창출 (및 지지자를위한 광고 제거)Apr 18, 2025 am 10:13 AM

나는 과거에 "소액 결제 팁"을 기반으로 소수의 웹 사이트를 시도했습니다. 그들은왔다 갔다. 괜찮습니다. 출판사 관점에서, 그것은

반응 형 iframesApr 18, 2025 am 10:10 AM

이것은 웹 사이트에서 iframe을 반응하기 위해해야 할 모든 것입니다. 그것은 외모보다 까다 롭고 CSS는 확실히 관여합니다.

CSS-in-JS에 대한 다른 관점Apr 18, 2025 am 10:07 AM

어떤 사람들은 CSS-in-JS의 아이디어를 완전히 싫어합니다. 그 이름은 불쾌합니다. 힘든 아니요. 스타일링은 JavaScript에 속하지 않으며 CSS에 속합니다.

Google Pagespeed의 작동 방식 : 점수 및 검색 엔진 순위 향상Apr 18, 2025 am 10:03 AM

이 기사에서는 PagesPeed가 중요한 속도 점수를 계산하는 방법을 밝혀냅니다. 속도가 수익을 높이고 포기 율을 낮추는 데 중요한 요소가 된 것은 비밀이 아닙니다. 이제 Google은 페이지 속도를 순위 요소로 사용하므로 많은 Orga

SVG로 현실적인 유리 효과를 만듭니다Apr 18, 2025 am 10:01 AM

나는 SVG와 사랑에 빠졌다. 물론, 코드는 처음에는 조밀하고 어려워 보일 수 있지만, 결과를 알게 될 때 결과의 아름다움을 볼 수 있습니다. 보너스는입니다

See all articles

핫 AI 도구

뜨거운 도구

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.