CSS3 はクールなローポリアニメーションの例を実装します-CSSチュートリアル-php.cn

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

零下一度

リリース： 2017-05-13 13:08:58

オリジナル

1822 人が閲覧しました

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

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

段階的な分解:

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

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

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

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

2. 画像処理

ここで AI の重要なステップである「クリッピングマスクを解放する」を実行しないと、生成された SVG コードに多数のパスクリッピングマスクタグが含まれます。 code> <clip<<a href="http://www.php.cn/wiki/921.html" target="_blank">clip</a>Path> 以及polygon的clip-path属性。 <img alt="" src="https://img.php.cn/upload/article/000/001/506/25034086c418412e9ccaf407ab9556fd-5.jpg"> 释放剪切路径后选中图形就可以看到此时图片已经由一个个三角形色块组成了。 导出SVG代码可以看到密密麻麻的多边形标签 <code><polygon fill="" points=""/>Path> とポリゴンのクリップパス属性。

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

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

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

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

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

このオンラインツールで生成された画像が処理されていない場合は、パスタグとストローク属性があり、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... 要素が得られます。

たとえば、ポリゴンを 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 属性よりも上位です。