Netlify＆＃039; s neat-oスライドボタン効果を再現します

Netlifyの公式Webサイトのダウンロードボタンはシンプルでエレガントで、突然のことなく目を引き付けます。インタラクティブな効果は特に印象的です。マウスがホイバーすると、ボタンが展開して「ダウンロード」という言葉が表示されます。 Safariの下でのディスプレイのわずかな違いに気付いたので、それがどのように実装されたかを探ることに興味を持っていました。そこで、効果を再現して間隔を最適化しました。

そのコアテクノロジーは4つの側面にあります。

• left属性を使用して、「ダウンロード」タグの表示と隠れを制御します。
• ボタンのホバリング状態のpaddingプロパティを使用して、「ダウンロード」タグのスペースを作成します。
• scale(1, 1)ボタンがホバリングされているときに、移動中にコンテンツがそのままであることを確認します。
• transition属性を使用して、 padding 、背景background-positionボタンの位置、 transform属性をアニメーション化して、スムーズなアニメーション効果を実現します。

以下は、その原則をより明確に示すスタイルを含めないコード例です。

それがどのように機能するかを理解することが困難な場合、次の画像は、「ダウンロード」タグがoverflow: hiddenを介してボタンからどのように隠されているかを示しています。

アイコンと「ダウンロード」ラベルにネガティブなleft値を設定して非表示にし、ボタン全体がホバリングされたときに正の値にリセットします。

 /*デフォルトステータス*/
。ボタン {
    背景： 
      ＃f6bc00 
      url（data：image/svg xml; base64、...）
      繰り返し-12pxセンター;
    オーバーフロー：隠し;
}

.button span：nth-​​child（1）{
  位置：絶対;
  左：-70px;
}

/*ホバーステータス*/
.button：Hover {
  パディング左：95px;
  バックグラウンドポジション：5pxセンター。
}

.button span：nth-​​child（1）{
  位置：絶対;
  左：-70px;
}

この状態だけでは、アイコンが視界にスライドし、「ダウンロード」タグのために十分なスペースを残すことに注意してください。

この時点で、ボタンにscale(1, 1)を追加すると、コンテンツを完全に保つことができます。

 /*ホバーステータス*/
.button：Hover {
  パディング左：95px;
  バックグラウンドポジション：5pxセンター。
  変換：スケール（1、1）;
}

padding値はエクスペリエンス値であり、フォント、フォントサイズなどの要因に応じて変更されます。

最後に、 transition属性はアニメーションの遷移を滑らかにし、ユーザーエクスペリエンスを向上させます。

 /*デフォルトステータス*/
。ボタン {
    背景： 
      ＃f6bc00 
      url（data：image/svg xml; base64、...）
      繰り返し-12pxセンター;
    オーバーフロー：隠し;
    遷移：パディング.2sの容易さ、背景ポジション.2s容易さ、.5s容易さ。
}

丸い角などの詳細な変更を追加すると、美しいボタンが表示されます。

以上がNetlify＆＃039; s neat-oスライドボタン効果を再現しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。