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

青灯夜游
リリース: 2021-05-24 09:49:40
転載
6545 人が閲覧しました

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

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

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

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

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


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

前端开发whqet
ログイン後にコピー

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 ファイルは同じです

前端开发whqet
ログイン後にコピー

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 ファイル

前端开发whqet
ログイン後にコピー

css ファイル

.effect03{ color: #202020; background-color: #2d2d2d; text-shadow: -1px -1px 1px #111111, 2px 2px 1px #363636; }
ログイン後にコピー

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


html ファイル

前端开发whqet
ログイン後にコピー

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 ファイル

前端开发whqet
ログイン後にコピー

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 ファイル

前端开发whqet
ログイン後にコピー

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 ファイル

前端开发whqet
ログイン後にコピー

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 ファイル

前端开发whqet

前端开发whqet

前端开发whqet

前端开发whqet

前端开发whqet

前端开发whqet

前端开发whqet

前端开发whqet

ログイン後にコピー
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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:csdn.net
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!