この記事では主に、画像ローポリアニメーションエフェクトのCSS3実装を紹介します。これは、CSS3アニメーションプロパティを使用して実現されるローポリ(低ポリゴンスタイル)と組み合わせたエフェクトであり、主にCSS3のtransform属性の回転を使用します。回転、移動移動、スケールスケーリング
CSS3アニメーション属性を使用して実現されるローポリ(ローポリゴンスタイル)と組み合わせたエフェクトです。 主にCSS3トランスフォーム属性の回転回転、移動移動、スケールスケーリング、CSSを使用します。 コード部分は次のとおりです。非常に単純です。唯一興味深いのは、nth-of-type セレクターの使用を思いとどまる必要がないことです。CSS 部分は再利用でき、パラメーターは独自の要件に応じて自由に変更できます。再利用できないパラメータはすべて SVG アニメーション コードです)。その後、UI デザイナーは使い慣れた AI ツールを使用して、次の効果を完全に実現できます。
段階的な分解:
1. ローポリゴンスタイルの画像の作成
私の元の画像は次のとおりです:
コンピューター上でランダムに見つけました。背景画像とアーティファクト Image Triangulator の助けを借りて、デザイナーが行う必要があるのは画像上にドットを追加することだけです (テストのために頂点を非常に大まかに追加しました)。必要に応じて、明暗を分けるエッジに慎重に追加する必要がある非常に鮮やかな効果です)。
すると、エクスポートされたPDF形式のファイルをAIで開くことができます。
2. 画像処理
ここで AI の重要なステップである「クリッピング マスクを解放する」を実行しないと、生成された SVG コードに多数のパス クリッピング マスク タグが含まれます。 code> clip clipPath> 以及polygon的clip-path属性。
释放剪切路径后选中图形就可以看到此时图片已经由一个个三角形色块组成了。
导出SVG代码可以看到密密麻麻的多边形标签 <polygon fill="" points=""></polygon> Path> とポリゴンのクリップパス属性。
クリッピング パスを解放し、グラフィックを選択します。画像が三角形のカラー ブロックで構成されていることがわかります。
SVG コードをエクスポートすると、密なポリゴン タグ <polygon fill="" points=""></polygon> が表示されます。 Image Triangulator はローポリ スタイルの画像を生成します。AI 処理によりクリッピング マスクを解放します
ここで、このソフトウェアによって生成された PDF には未処理のベースマップがあり、SVG ファイルには 
タグが含まれていることに注意してください。端が空洞になるのを防ぐために、端にさらにいくつかのポイントを追加するか、端の一部を切り取ります。
3. オンラインで生成されたローポリゴンの背景画像の処理
この オンライン ツール で生成された画像が処理されていない場合は、
まず、アニメーション実装の予備的なアイデアについて話しましょう。これらの生成されたポリゴン フラグメントの回転、変位、サイズを変更したいのですが、これも CSS で簡単に実現できますが、必要なのは、散乱、変位の異なる方向、異なる距離、およびスケーリングの異なる効果です。ですが、私はランダムな関数を書くことができないJavaScriptの野郎です。幸いなことに、CSS3には強力なセレクターnth-of-type(an+b)が用意されており、それを使用すると、さまざまなフラグメントを割り当てることができます。アニメーション化されたプロパティ値。
nth-of-type(an+b) について簡単に説明します。n は 0 から始まり、順番に 1 を加算していくので、a+b、2a+b、3a+b... 要素が得られます。
たとえば、
polygon:nth-of-type(6n+1){transform: translate(x , y) scale() rotate();}これは 6n+1 (つまり 1,7) です。 ,13,19 ...) ポリゴン アニメーション効果 同様に、次のグループは、polygon:nth-of-type(6n+2)、つまり 2 番目、8 番目、14 番目、20 番目... のポリゴンです。 Polygon:nth-of-type(6n+6) まで順に選択して後ろに押します
次に、すべてのコードとコメントを添付します
以下のすべてのコードと組み合わせます:
<html>
<head>
<style>
/*以下为可复用的CSS代码部分*/
.cover{
position: absolute;
width: 800px;
height: 445px;
top: 20%;
left: 20%;
z-index: 2;
}
/*cover和svg的宽高位置都重合，唯一不同的是z-index属性*/
svg {
position: absolute;
width: 800px;
height: 445px;
top: 20%;
left: 20%;
overflow: visible;
z-index: 1;
}
polygon{
transition:all 1s ease;
transform-origin: 50% 50%;
}
/*以下为设定的6组动画效果*/
.cover:hover + svg #lowpoly polygon:nth-of-type(6n+1){
transform: translate(-400% , -400%) scale(1.5) rotate(100deg);
opacity: .3
}
.cover:hover + svg #lowpoly polygon:nth-of-type(6n+2){
transform: translate(800% , -400%) scale(1.1) rotate(200deg);
opacity: .4;
}
.cover:hover + svg #lowpoly polygon:nth-of-type(6n+3){
transform: translate(-800% , 400%) scale(1.2) rotate(200deg);
opacity: .3;
}
.cover:hover + svg #lowpoly polygon:nth-of-type(6n+4){
transform: translate(-400% , 800%) scale(1.4) rotate(200deg);
opacity: .4
}
.cover:hover + svg #lowpoly polygon:nth-of-type(6n+5){
transform: translate(400% , 400%) scale(1.3) rotate(100deg);
opacity: .3
}
.cover:hover + svg #lowpoly polygon:nth-of-type(6n+6){
transform: translate(800% , 400%) scale(1.2) rotate(200deg);
opacity: .3
}
</style></head>
<body><p class="cover"></p><!--定义的触发区域-->
<svg>
<g id="lowpoly">
……此处为若干<polygon>标签 即需要自行替换的部分
</g>
</svg></body></html>を実行すると SVG が全画面表示になるため、アニメーション効果は、マウスが入ったときに中断し、マウスが出たときに復元する効果を設定する必要があります。これが、カバーの定義と階層の意味です。属性は SVG 属性よりも上位です。
アニメーション効果のトリガーに関しては、マウスが通過するときに :hover を使用します。他のトリガーイベントが必要な場合は、フロントエンドの Siege Lion に助けを求めることができます。
アニメーション効果後に SVG サイズを超えた部分が確実に表示されるように、SVG のオーバーフロー属性を可視として定義する必要があります。
ポリゴンアニメーション属性の設定に関して、このトランジション: すべて 1 秒のイージングは、すべてのアニメーション時間が 1 秒であり、イージング効果を意味します。変換原点: 50% 50% は、変換の原点を各要素の中心として定義します。
6 種類のアニメーション効果セットについて、移動移動、拡大縮小、選択範囲の回転、透明度の不透明度の変更を設定しました。
ここでのX軸とY軸の変位は、値が大きいほど拡散が高くなります。たとえば、私の場合はX方向とY方向の両方が-800%〜800です。 %。また、回転角度 (rotate()) については、物理法則に従うため、オフセット パスが遠いほど回転角度は大きくなり、その逆も同様です。
さらに異なる効果を設定したい場合は、nth-of-type (an+b) の n の係数 a を変更するだけです。
修正して試すのが面倒な場合は、UI デザイナーがこのテンプレートを適用するときに、作成した (または自動生成された)
知識ポイントの概要
1. ローポリゴンのローポリスタイルの画像の制作について (自分で任意のグラフィックを作成することに重点を置きます)
2. CSS3 セレクター nth-of-type (an+b) の使用
【関連する推奨事項】
1. 特にお勧めします : 「php Programmer Toolbox」V0.1バージョンのダウンロード
2. 3.php.cn Dugu Jiijian (2) - CSSビデオチュートリアル
以上がCSS3 はクールなローポリアニメーションの例を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
@keyframesや@mediaなど、 @rulesにはどの程度の特異性がありますか？Apr 18, 2025 am 11:34 AM先日、この質問がありました。私の最初の考えは、奇妙な質問です！特異性はセレクターに関するものであり、アットレールはセレクターではないので、...無関係ですか？
@mediaと@supportのクエリをネストできますか？Apr 18, 2025 am 11:32 AMはい、あなたはできます、そしてそれは本当にどの順序で重要ではありません。 CSSプリプロセッサは必要ありません。通常のCSSで動作します。
クイックガルプキャッシュバストApr 18, 2025 am 11:23 AMCSSやJavaScript（および画像とフォントなど）などのアセットにファーアウトキャッシュヘッダーを確実に設定する必要があります。それはブラウザを伝えます
CSSの品質と複雑さを監視するスタックを探してApr 18, 2025 am 11:22 AM多くの開発者は、CSSコードベースを維持する方法について書いていますが、そのコードベースの品質をどのように測定するかについて多くの人が書いていません。確かに、私たちは持っています
データリストは、値を強制せずに値を提案するためのものですApr 18, 2025 am 11:08 AM短い任意のテキストを受け入れるために必要なフォームを持っていたことがありますか？名前などのように。それはまさにそのためのものです。たくさんあります
チューリッヒでのフロント会議Apr 18, 2025 am 11:03 AM私は、フロント会議のためにスイスのチューリッヒに向かうことにとても興奮しています（その名前とURLが大好きです！）。私はこれまでスイスに行ったことがないので、興奮しています
CloudFlareワーカーとのフルスタックサーバーレスアプリケーションを構築しますApr 18, 2025 am 10:58 AMソフトウェア開発における私のお気に入りの開発の1つは、サーバーレスの出現です。詳細に行き詰まる傾向がある開発者として
NUXTアプリケーションで動的ルートを作成しますApr 18, 2025 am 10:53 AMこの投稿では、私が構築して展開して展開してネットライフを使用して、着信データの動的ルートを作成する方法を示すeコマースストアのデモを使用します。それはかなりです
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SecLists
SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。
PhpStorm Mac バージョン
最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール
AtomエディタMac版ダウンロード
最も人気のあるオープンソースエディター
ZendStudio 13.5.1 Mac
強力な PHP 統合開発環境
