純粋な CSS3 でテキスト効果を実現するにはどうすればよいですか?共有できる 8 つのテキスト効果

この記事では、CSS テキスト効果を実装する 8 つの方法を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

今日は、主に text-shadow と、効果を実現するための Webkit カーネルのいくつかのユニークな機能を使用して、いくつかのテキスト効果を学習します。

オンラインで学習するにはここをクリックし、コレクションをダウンロードするにはここをクリックしてください。

#効果 1 - 3 次元キャラクター効果

##HTML ファイルは次のようになります。表示効果を高めるために、編集可能なプロパティが追加されました。

<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 が表示されます。非常に簡単で、text-shadow を使用して 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);
}

効果 2 ロングテール効果

html ファイルは同じです

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

text-shadow offset inside もう少しすると、徐々に色がシンプルになり、ロングテール効果が出てきます。

.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;
}

Effect 4-ツイル ストローク エフェクト

html ファイル

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

css ファイル、線形グラデーションを使用して背景にストライプを設定します、テキストの背景のみを表示 (-webkit-background-clip: text;)、テキストの色を透明 (-webkit-text-fill-color: traditional;)、およびテキストのストローク (-webkit-text-ストローク: 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 ファイル、使用: 疑似オブジェクトの前ストライプを表示してアニメーション化します。

.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%}}; 
}

エフェクト 6 ストローク テキスト

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;
}

エフェクト 7 マスク テキスト

html ファイル

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

css ファイル

.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);
    }
}

プログラミング関連の知識の詳細については、次のサイトを参照してください。

programmingビデオ＃＃＃！ ！

以上が純粋な CSS3 でテキスト効果を実現するにはどうすればよいですか?共有できる 8 つのテキスト効果の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。