検索

ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS3 はクールなローポリアニメーションの例を実装します

CSS3 はクールなローポリアニメーションの例を実装します

零下一度
零下一度オリジナル
2017-05-13 13:08:581874ブラウズ

この記事では主に、画像ローポリアニメーションエフェクトのCSS3実装を紹介します。これは、CSS3アニメーションプロパティを使用して実現されるローポリ(低ポリゴンスタイル)と組み合わせたエフェクトであり、主にCSS3のtransform属性の回転を使用します。回転、移動移動、スケールスケーリング

CSS3アニメーション属性を使用して実現されるローポリ(ローポリゴンスタイル)と組み合わせたエフェクトです。 主にCSS3トランスフォーム属性の回転回転、移動移動、スケールスケーリング、CSSを使用します。 コード部分は次のとおりです。非常に単純です。唯一興味深いのは、nth-of-type セレクターの使用を思いとどまる必要がないことです。CSS 部分は再利用でき、パラメーターは独自の要件に応じて自由に変更できます。再利用できないパラメータはすべて SVG アニメーション コードです)。その後、UI デザイナーは使い慣れた AI ツールを使用して、次の効果を完全に実現できます。

段階的な分解:

1. ローポリゴンスタイルの画像の作成

私の元の画像は次のとおりです:

コンピューター上でランダムに見つけました。背景画像とアーティファクト Image Triangulator の助けを借りて、デザイナーが行う必要があるのは画像上にドットを追加することだけです (テストのために頂点を非常に大まかに追加しました)。必要に応じて、明暗を分けるエッジに慎重に追加する必要がある非常に鮮やかな効果です)。

すると、エクスポートされたPDF形式のファイルをAIで開くことができます。

2. 画像処理

ここで AI の重要なステップである「クリッピング マスクを解放する」を実行しないと、生成された SVG コードに多数のパス クリッピング マスク タグが含まれます。 code> 3560d84b4cffd450d921d037f0ba4273 以及polygon的clip-path属性。

 

释放剪切路径后选中图形就可以看到此时图片已经由一个个三角形色块组成了。

导出SVG代码可以看到密密麻麻的多边形标签 c32be6ae7b55b2e3b096b12a7e719a36 Path> とポリゴンのクリップパス属性。

クリッピング パスを解放し、グラフィックを選択します。画像が三角形のカラー ブロックで構成されていることがわかります。

SVG コードをエクスポートすると、密なポリゴン タグ 27680cd05836b1c2df59b8252bd523f2 が表示されます。 <strong></strong>Image Triangulator はローポリ スタイルの画像を生成します。AI 処理によりクリッピング マスクを解放します

ここで、このソフトウェアによって生成された PDF には未処理のベースマップがあり、SVG ファイルには a1f02c36ba31691bcfe87b2722de723b タグが含まれていることに注意してください。端が空洞になるのを防ぐために、端にさらにいくつかのポイントを追加するか、端の一部を切り取ります。

3. オンラインで生成されたローポリゴンの背景画像の処理

背景画像のみが必要な場合は、Web サイト qrohlf.com/trianglify-generator/ を使用することをお勧めします。サイズ、色、格子をカスタマイズできます。サイズ、SVG 形式の生成をサポートします。たとえば、次のようなものです:

この オンライン ツール で生成された画像が処理されていない場合は、98953a78f52873edae60a617ec082494 パス タグとストローク属性があり、AI で処理する必要があります。すべてを削除し、すべてのストロークのプロパティを削除します。このときエクスポートされるSVGファイルは、対応するポリゴンタグとなります。 このステップまでで、グラフィック処理部分は終了です。残りは、

CSS3アニメーション🎜🎜🎜のアニメーション効果の実装です。

まず、アニメーション実装の予備的なアイデアについて話しましょう。これらの生成されたポリゴン フラグメントの回転、変位、サイズを変更したいのですが、これも CSS で簡単に実現できますが、必要なのは、散乱、変位の異なる方向、異なる距離、およびスケーリングの異なる効果です。ですが、私はランダムな関数を書くことができないJavaScriptの野郎です。幸いなことに、CSS3には強力なセレクターnth-of-type(an+b)が用意されており、それを使用すると、さまざまなフラグメントを割り当てることができます。アニメーション化されたプロパティ値。

nth-of-type(an+b) について簡単に説明します。n は 0 から始まり、順番に 1 を加算していくので、a+b、2a+b、3a+b... 要素が得られます。

たとえば、6f1cb7f8499a7e0f625f982868cbc44d ポリゴンを 6 つのグループに分割し、各グループに異なるアニメーション属性を設定したいとします。私の書き方は次のとおりです: 

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 デザイナーがこのテンプレートを適用するときに、作成した (または自動生成された) 6f1cb7f8499a7e0f625f982868cbc44d タグを置き換えるだけで済みます

知識ポイントの概要

1. ローポリゴンのローポリスタイルの画像の制作について (自分で任意のグラフィックを作成することに重点を置きます)

2. CSS3 セレクター nth-of-type (an+b) の使用

【関連する推奨事項】

1. 特にお勧めします : 「php Programmer Toolbox」V0.1バージョンのダウンロード

2.

無料のCSSオンラインビデオチュートリアル

3.

php.cn Dugu Jiijian (2) - CSSビデオチュートリアル

以上がCSS3 はクールなローポリアニメーションの例を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：CSSのz-indexの詳しい解説(1)次の記事：CSSのz-indexの詳しい解説(1)

関連記事

続きを見る