純粋な CSS3 テキスト効果の推奨_html/css_WEB-ITnose

これまで、「CSS テキスト ストライプ シャドウ アニメーション」や「レスポンシブ クリーム 3 次元キャラクター エフェクト」など、純粋な CSS で実装されたいくつかのテキスト効果を研究してきました。今日は、主に text-shadow と webkit カーネルを使用して、いくつかのテキスト効果を学習します。いくつかのユニークな機能が効果を実現します。

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

エフェクト 1-3D テキストエフェクト

表示効果を向上させるために、編集可能な属性を追加した HTML ファイルは次のようになります。

rrreecss ファイルでは、最初にグローバル設定

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

を確認し、次にエフェクト 1 の専用 CSS を確認します。これは非常に簡単で、text-shadow を使用して 3 次元の文字効果を実現するだけです

。

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

エフェクト 2 - ロング テールエフェクト

HTML ファイルは同じです

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

text-shadow のオフセットが少し増え、色が徐々にシンプルになり、ロングテールエフェクトがここにあります。

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

エフェクト 3 インナーシャドウ

html ファイル

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

cs ファイル

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

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

html ファイル

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

csファイル、線形グラデーションを使用して div にストライプを設定します背景、テキストの背景のみを表示 (-webkit-background-clip: text;)、テキストの色を透明 (-webkit-text-fill-color: traditional;)、およびテキスト ストローク (-webkit-text-ストローク: 2px # 111;) ） 実装。

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

エフェクト 5 テキスト ストライプ アニメーション

html ファイル

rrreecss ファイルで、疑似オブジェクトの前に :before を使用してストライプを表示し、それにアニメーションを追加します。

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

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

htmlファイル

rrreecssファイル

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

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

htmlファイル

rrreecssファイル

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

エフェクト8-3Dグレアエフェクト

html ファイル

rrreecss ファイル

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

以上です。 --- --------------------------------

フロントエンド開発現場、Webフロントエンドに注目関連リソースの開発と共有。

------------------------------------------------- ------------------