순수한 CSS3로 텍스트 효과를 얻는 방법은 무엇입니까? 공유할 수 있는 8가지 텍스트 효과

이 기사에서는 CSS 텍스트 효과를 구현하는 8가지 방법을 공유합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

오늘 우리는 효과를 얻기 위해 주로 텍스트 그림자와 웹킷 커널의 여러 고유 기능을 사용하여 여러 가지 텍스트 효과를 연구할 것입니다.

온라인으로 학습하려면 여기를 클릭하고 컬렉션을 다운로드하려면 여기를 클릭하세요.

효과 1 - 입체적인 캐릭터 효과

효과를 더 잘 표시하기 위해 편집 가능한 속성을 추가했습니다.

<div contenteditable="true" class="text effect01">前端开发whqet</div>

css 파일에서 먼저 전역 설정

body{
  background-color: #666;
}
@import url(http://fonts.googleapis.com/css?family=Dosis:500,800);
.text {
    font-family:"微软雅黑", "Dosis", sans-serif;
    font-size: 80px;
    text-align: center;
    font-weight: bold;
    line-height:200px;
    text-transform:uppercase;
    position: relative;
}

을 살펴본 다음 효과 1에 대한 전용 CSS를 살펴봅니다. 매우 간단합니다. 텍스트 그림자를 사용하면 3차원 단어 효과

.effect01{
    background-color: #333;
    color:#fefefe;
    text-shadow:
    0px 1px 0px #c0c0c0,
    0px 2px 0px #b0b0b0,
    0px 3px 0px #a0a0a0,
    0px 4px 0px #909090,
    0px 5px 10px rgba(0, 0, 0, 0.6);
}

효과를 얻을 수 있습니다. 투 - 롱테일 효과

html 파일은 그대로예요

<div contenteditable="true" class="text effect02">前端开发whqet</div>

텍스트 그림자가 조금 더 오프셋되고, 색상이 더 단순해지고, 롱테일 효과가 옵니다.

.effect02{
  color:#333;
  background-color: #ddd;
  text-shadow:
    1px -1px 0 #767676, 
    -1px 2px 1px #737272, 
    -2px 4px 1px #767474, 
    -3px 6px 1px #787777, 
    -4px 8px 1px #7b7a7a, 
    -5px 10px 1px #7f7d7d, 
    -6px 12px 1px #828181, 
    -7px 14px 1px #868585, 
    -8px 16px 1px #8b8a89, 
    -9px 18px 1px #8f8e8d, 
    -10px 20px 1px #949392, 
    -11px 22px 1px #999897, 
    -12px 24px 1px #9e9c9c, 
    -13px 26px 1px #a3a1a1, 
    -14px 28px 1px #a8a6a6, 
    -15px 30px 1px #adabab, 
    -16px 32px 1px #b2b1b0, 
    -17px 34px 1px #b7b6b5,
    -18px 36px 1px #bcbbba, 
    -19px 38px 1px #c1bfbf, 
    -20px 40px 1px #c6c4c4, 
    -21px 42px 1px #cbc9c8, 
    -22px 44px 1px #cfcdcd;
}

3가지 내부 그림자 효과

html 파일

<div contenteditable="true" class="text effect03">前端开发whqet</div>

css 파일

.effect03{
  color: #202020;
  background-color: #2d2d2d;
  text-shadow: 
    -1px -1px 1px #111111,
    2px 2px 1px #363636;
}

4가지 능직 획 효과

html 파일

<div contenteditable="true" class="text effect04">前端开发whqet</div>

css 파일, 선형 그라데이션 사용 p에 줄무늬 배경을 설정하고, 텍스트에만 배경을 표시하고(-webkit-ground-clip: text;), 텍스트 색상은 투명하고(-webkit-text-fill-color: transparent;), 텍스트 획(- 웹킷-텍스트 스트로크: 2px #111;)이 구현되었습니다.

.effect04{
  background-color: #333;
  background-image:
      linear-gradient(
        45deg,
        transparent 45%,
        hsla(48,20%,90%,1) 45%,
        hsla(48,20%,90%,1) 55%,
        transparent 0
        );
    background-size: .05em .05em;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 2px #111;
}

효과 5 - 텍스트 줄무늬 애니메이션

html 파일

<div data-text="前端开发whqet" class="text effect05">前端开发whqet</div>

css 파일에서 :before 의사 개체를 사용하여 줄무늬를 표시하고 애니메이션을 추가합니다.

.effect05{
    color:#DC554F;
    background-color:#27ae60;
    z-index: 3;
}
.effect05:before{
    content:attr(data-text);  
    width:100%;
    line-height:200px;
    opacity: .5;
    position: absolute;
    top:2px;
    left:5px;
    background-image:  
      linear-gradient(  
        45deg,  
        transparent 45%,  
        hsla(48,20%,90%,1) 45%,  
        hsla(48,20%,90%,1) 55%,  
        transparent 0  
        ); 
    z-index:-1;
    background-size: .05em .05em;  
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; 
    animation: shadowGo 20s linear infinite; 
}
@keyframes shadowGo{   
    0% {background-position: 0 0}  
    0% {background-position: -100% 100%}}; 
}

Effect Six - 획 텍스트

html 파일

<div contenteditable="true" class="text effect06">前端开发whqet</div>

css 파일

.effect06 {
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 2px #d6d6d6;
    background: url(http://www.pencilscoop.com/demos/CSS_Text_Effects/images/galaxy.jpg);
    background-size: cover;
}

Effect Seven - 마스크 텍스트

html 파일

<div contenteditable="true" class="text effect07">前端开发whqet</div>

c ss 파일

.effect07 {
    background: url(http://www.pencilscoop.com/demos/CSS_Text_Effects/images/galaxy.jpg) #333;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: cover;
    animation: 10s infinite linear animate;
}
.effect07:before {
    content:"";
    width:100%;
    height:100%;
    position: absolute;
    left:0;
    top:0;
    background-color: #999;
    z-index: -1;
}
@keyframes animate {
    0% {
        background-position:0;
    }
    100% {
        background-position:-1000px 0;
    }
}

효과 8 - 3D 눈부심 효과

html 파일

<div class="text effect08">
  <h1 id="前端开发whqet">前端开发whqet</h1>
  <h1 id="前端开发whqet">前端开发whqet</h1>
  <h1 id="前端开发whqet">前端开发whqet</h1>
  <h1 id="前端开发whqet">前端开发whqet</h1>
  <h1 id="前端开发whqet">前端开发whqet</h1>
  <h1 id="前端开发whqet">前端开发whqet</h1>
  <h1 id="前端开发whqet">前端开发whqet</h1>
  <h1 id="前端开发whqet">前端开发whqet</h1>
</div>

css 파일

.effect08 {
    color:#fff;
    transform-origin:center bottom;
    transform-style:preserve-3d;
    transition:all 1s;
    cursor: pointer;
}
.effect08:hover {
    transform:rotate3d(1, 0, 0, 40deg);
}
.effect08 h1 {
    position: absolute;
    left:0;
    right:0;
    margin:auto;
    text-shadow:0 0 10px rgba(0, 0, 100, .5);
}
/*
sass 循环给每一个h1设置不同的translateZ
*/
@for $n from 1 to 8 {
    .effect08 h1:nth-child(#{$n}) {
        transform:translateZ(4px*$n);
    }
}

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

위 내용은 순수한 CSS3로 텍스트 효과를 얻는 방법은 무엇입니까? 공유할 수 있는 8가지 텍스트 효과의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!