ホームページ > 記事 > ウェブフロントエンド > フィルターと変換スタイルのプロパティを賢く使用して、視覚的な 3D 効果を作成します
フィルターと変換スタイルのプロパティを賢く使用して、視覚的な 3D 効果を作成します
- 青灯夜游転載
- 2021-11-02 19:21:182124ブラウズ
この記事では、ブラーを使用して視覚的な 3D 効果を実現するテクニックを紹介し、フィルターと変換スタイルの属性を使用して視覚的な 3D 効果を実現する方法を説明します。皆さんのお役に立てれば幸いです。
通常の視覚効果では、通常、自分に近づくほど鮮明に見え、遠ざかるにつれて相対的に鮮明さが低下することは誰もが知っています~
clear と blur の 2 つの状態を使用して視差効果を構築できます。次のように:
CSS では、ぼかしフィルター filter:blur() と transform-style:preserve -3d を使用できます。 を実行してください。
テキストの 3D 変換の実装
まず、比較的単純なテキストの 3D 変換を実装する必要があります。主に、transform-style:preserve-3d と perspective を使用し、テキストを Y 軸を中心に回転させます。
簡単なコードは次のとおりです:
<p>CSS3DEFFECT</p>
body {
perspective: 160vmin;
}
p {
font-size: 24vmin;
transform-style: preserve-3d;
animation: rotate 10s infinite ease-in-out;
}
@keyframes rotate {
0% {
transform: rotateY(-45deg);
}
50% {
transform: rotateY(45deg);
}
100% {
transform: rotateY(-45deg);
}
}このような 3D テキスト効果を得ることができます:
このエフェクトにはすでに予備的な 3D エフェクトが含まれていますが、このままでは何かが足りないように感じられます。次に、ぼかし効果を追加して、近くにあるテキストを鮮明にし、遠くにあるテキストをぼかす必要があります。 しかし、これには各テキストの詳細な処理が必要です。上記の HTML 構造では各テキストを個別に処理できません。構造を単純に変換しましょう:
<p>
<span>C</span>
<span>S</span>
<span>S</span>
<span>3</span>
<span>D</span>
<span>E</span>
<span>F</span>
<span>F</span>
<span>E</span>
<span>C</span>
<span>T</span>
</p>完全なコード おそらく次のようになります: @import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
$count: 12;
body, html {
font-family: 'Lobster', cursive;
perspective: 160vmin;
overflow: hidden;
}
p {
margin: auto;
font-size: 24vmin;
transform-style: preserve-3d;
animation: rotate 10s infinite ease-in-out;
span {
text-shadow:
1px 1px 0 rgba(0, 0, 0, .9),
2px 2px 0 rgba(0, 0, 0, .7),
3px 3px 0 rgba(0, 0, 0, .5),
4px 4px 0 rgba(0, 0, 0, .3),
5px 5px 0 rgba(0, 0, 0, .1);
&:nth-child(-n+5) {
animation-delay: -5s;
}
}
}
@for $i from 1 to 7 {
span:nth-child(#{$i}),
span:nth-last-child(#{$i}) {
animation: filterBlur-#{$i} 10s infinite ease-in-out;
}
@keyframes filterBlur-#{$i} {
0% {
filter: blur(0px) contrast(5);
}
50% {
filter: blur(#{7 - $i}px) contrast(1);
}
100% {
filter: blur(0px) contrast(5);
}
}
}
@keyframes rotate {
0% {
transform: rotateY(-45deg);
}
50% {
transform: rotateY(45deg);
}
100% {
transform: rotateY(-45deg);
}
} 簡単な分析の下で、ここにいくつかのヒントがあり、必要な効果を注意深く観察してください:
- 最初の文字と最後の文字は回転の終わりにあります。左の効果と右端の効果それぞれ私たちに最も近い文字と最も遠い文字になります。それらの効果は実際には同じである必要があるため、最初の文字と最後の文字は均一に処理される必要があり、同様に 2 番目の文字と最後から 2 番目の文字も統一処理されます。ここでは SASS を使用できます。
- :nth-child
と:nth-last-childを使用して CSS コードを効率的に記述するにはanimation-delay を使用してアニメーションの半分を遅延させます。 -
-
このようにして、最終的に次の効果を得ることができます:
完全なコードについては、ここをクリックしてください-- CSS のインスピレーション -- filter:blur を使用すると、テキストの 3D 効果が強化されます
https://csscoco.com/inspire/#/./filter/use-filter-blur-enhance-text-3d-effectぼかしを適切に使用すると、ぼかしを使用して落ち葉エフェクトを構築する
transform-style:preserve-3d
および ## のサポートなしで落ち葉エフェクトを作成できます。 #perspective 素晴らしい 3D 効果。 たとえば、次の落ち葉エフェクトでは、ぼかしと単純な階層関係を使用して、全体像を非常にリアルに見せています: <pre class="brush:html;toolbar:false;"><h2>Falling Leaves</h2>
<section>
<div class="leaf">
<div><img src="落叶图片.png" / alt="フィルターと変換スタイルのプロパティを賢く使用して、視覚的な 3D 効果を作成します" ></div>
<div><img src="落叶图片.png" / alt="フィルターと変換スタイルのプロパティを賢く使用して、視覚的な 3D 効果を作成します" ></div>
<div><img src="落叶图片.png" / alt="フィルターと変換スタイルのプロパティを賢く使用して、視覚的な 3D 効果を作成します" ></div>
<div><img src="落叶图片.png" / alt="フィルターと変換スタイルのプロパティを賢く使用して、視覚的な 3D 効果を作成します" ></div>
<div><img src="落叶图片.png" / alt="フィルターと変換スタイルのプロパティを賢く使用して、視覚的な 3D 効果を作成します" ></div>
<div><img src="落叶图片.png" / alt="フィルターと変換スタイルのプロパティを賢く使用して、視覚的な 3D 効果を作成します" ></div>
<div><img src="落叶图片.png" / alt="フィルターと変換スタイルのプロパティを賢く使用して、視覚的な 3D 効果を作成します" ></div>
</div>
<div class="leaf leaf2">
// 重复第二组
</div>
<div class="leaf leaf3">
// 重复第三组
</div>
</section></pre>rrree
Clear
と
2 つの状態間のコントラストと速度の違いを使用して、視差効果を作成します。 CodePen デモ -- 落ち葉
https://codepen.io/Chokcoco/pen/vYyGVZZ最後にさて、この記事はここで終わります。お役に立てば幸いです:)
プログラミング関連の知識については、
プログラミング ビデオをご覧ください。 ！
以上がフィルターと変換スタイルのプロパティを賢く使用して、視覚的な 3D 効果を作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。