新しいcss sin（）およびcos（）三角測定関数を使用して時計を作成する

CSSの新機能：sin（）およびcos（）三角関数はクロック効果を作成します

FirefoxとSafariの最新バージョンは、CSS三角関数をサポートしています！これにより、強力な数学的コンピューティング機能がCSSにもたらされ、無限の可能性が拡大されます。このチュートリアルでは、sin（）とcos（）関数に焦点を当て、それを使用してクロックを作成します。 Tan（）などの他の三角関数はまもなく登場しますが、SIN（）およびCOS（）関数は、6年前にCSS-TricksでSASS Mixinを使用してChrisが実装したRisによってテキストを配置するという目標に適しています。

ターゲット効果（現在FirefoxとSafariによってのみサポートされています）：

円周に沿ってテキスト文字をアレンジして、時計の顔を形成します。最初のHTML構造は次のとおりです

次に、基本的なスタイルを

<div class="clock">
  <div class="clock-face">
    <time datetime="12:00">12</time><time datetime="1:00">1</time><time datetime="2:00">2</time><time datetime="3:00">3</time><time datetime="4:00">4</time><time datetime="5:00">5</time><time datetime="6:00">6</time><time datetime="7:00">7</time><time datetime="8:00">8</time><time datetime="9:00">9</time><time datetime="10:00">10</time><time datetime="11:00">11</time>
  </div>
</div>

コンテナに追加し、

タグを使用して、.clock属性を追加します：<time></time> datetime

これは、効果の観察を容易にするために基本的な形状と背景色を作成するためだけです。 CSS変数に幅値を保存し、後で使用されることに注意してください。

.clock {
  --_ow: clamp(5rem, 60vw, 40rem);
  --_w: 88cqi;
  aspect-ratio: 1;
  background-color: tomato;
  border-radius: 50%;
  container-type: inline;
  display: grid;
  height: var(--_ow);
  place-content: center;
  position: relative;
  width: var(--_ow);
}

さて、変数

を追加して円の半径を保存します。これは円の幅の半分に等しくなり、

関数を使用して実装してください：--_r calc()

数学の計算：円周は360度、時計には12の数字があり、各数字は30度（360/12）です。数学的には、円は3時から始まるので、実際には12時は-90度で、270度（360-90）です。

.clock {
  --_w: 300px;
  --_r: calc(var(--_w) / 2);
  /* rest of styles */
}

変数を追加

各数値の度合いを設定し、30度で増加します：

--_d

ここで、sin（）およびcos（）関数を使用して、各数字のxおよびy座標を計算します。

.clock time:nth-child(1) { --_d: 270deg; }
.clock time:nth-child(2) { --_d: 300deg; }
.clock time:nth-child(3) { --_d: 330deg; }
/* ... rest of the numbers ... */

x座標式：radius（radius * cos（degure））

y座標式：radius（radius * sin（度））

--_x: calc(var(--_r) + (var(--_r) * cos(var(--_d))));

数字に基本的なスタイルを追加して、それらが絶対に配置され、計算された座標を使用します：

--_y: calc(var(--_r) + (var(--_r) * sin(var(--_d))));

より正確に配置するために、半径を計算する場合、数値のサイズを差し引く必要があります。

色を変えて、より美しくします。

.clock-face time {
  --_x: calc(var(--_r) + (var(--_r) * cos(var(--_d))));
  --_y: calc(var(--_r) + (var(--_r) * sin(var(--_d))));
  --_sz: 12cqi;
  display: grid;
  height: var(--_sz);
  left: var(--_x);
  place-content: center;
  position: absolute;
  top: var(--_y);
  width: var(--_sz);
}

次に、時間、分、2番目の手を追加します：

--_r: calc((var(--_w) - var(--_sz)) / 2);

HTML構造を追加：

スタイルを追加：

最後に、JavaScriptを使用して現在の時間を設定します。

<div class="arm hours"></div>
<div class="arm minutes"></div>
<div class="arm seconds"></div>

ブラウザの互換性処理を追加：

.arm {
  /* ... styles ... */
}

.seconds { /* ... styles ... */ }
.minutes { /* ... styles ... */ }
.hours { /* ... styles ... */ }

@keyframes turn { /* ... animation ... */ }

最終効果：完全なCSSクロック！現在、FirefoxとSafariブラウザのみがサポートされています。

// ... JavaScript code to set initial time ...

さらに、時計は円形の画像ライブラリまたは他の創造的なパターンに変換できます。

以上が新しいcss sin（）およびcos（）三角測定関数を使用して時計を作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。