LabEx
ログイン登録

視覚的に魅力的なデザインのための CSS 技術

Beginner

This tutorial is from open-source community. Access the source code

はじめに

この実験では、CSS プログラミングの世界に深く突き入り、ウェブページのデザインとレイアウトを向上させるための様々な技術を探求します。一連のエクササイズとチャレンジを通じて、HTML 要素にスタイルを付け、視覚的に魅力的なウェブページを作成するために CSS セレクター、プロパティ、および値をどのように使用するかを学びます。実験が終了するまでに、CSS プログラミングの堅牢な基礎を築き、新たに獲得した知識を活用して見事なウェブサイトを作成できるようになります。

これは Guided Lab です。学習と実践を支援するためのステップバイステップの指示を提供します。各ステップを完了し、実践的な経験を積むために、指示に注意深く従ってください。過去のデータによると、この 初級 レベルの実験の完了率は 100%です。学習者から 100% の好評価を得ています。

ドーナツスピナー

VM には既に index.html と style.css が用意されています。

コンテンツの読み込みを示すために、要素全体に半透明の border を持つドーナツスピナーを作成します。ドーナツの読み込みインジケータとして機能するように、ある辺を除きます。そして、transform: rotate() を使って要素を回転させる適切なアニメーションを定義して使用します。以下は HTML と CSS のサンプルコードです。

HTML:

<div class="donut"></div>

CSS:

@keyframes donut-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.donut {
  display: inline-block;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-left-color: #7983ff;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: donut-spin 1.2s linear infinite;
}

右下隅の「Go Live」をクリックして、ポート 8080 でウェブサービスを実行してください。その後、Web 8080 タブを更新してウェブページをプレビューできます。

まとめ

おめでとうございます！あなたはドーナツスピナーの実験を完了しました。あなたの技術を向上させるために、LabEx でさらに多くの実験を練習できます。