2

まず、私は Web 開発者ではありませんが、できるだけ多くのチュートリアルから学び、Google 検索からコードをハッキングすることで、HTML5 と CSS3 の Web サイトを作成することができました。

私の Web サイトで、温度、湿度、気圧などの環境情報を表示したいと考えています。

次のことが可能かどうか、誰かが私を正しい方向に向けることができるかどうかを知りたいですか?

私がやりたいのは、Temp の値を表示することです。温度に関連する数字の内側に色を付けます。

たとえば、次のようになります。

温度が10'C未満の場合、数字内の色は紺色になります

温度が10'C ～ 20'Cの場合、数字の内側の色は下部が濃い青色で、数字の上部が薄青色になります。

温度が20'C ～ 30'Cの場合、数字の内側の色は下部が水色で、数字の上部がオレンジに変わります。

温度が30'C ～ 40'Cの場合、数字の内側の色は下部がオレンジ色で、数字の上部が赤色になります。

温度が40'Cを超える場合、数字内の色は赤になります

私はそれが理にかなっている願っています

前もって感謝します

グレッグ

4

4 に答える 4

0

background-clip: text を使用すると、良い効果が得られます。

ただし、これは webkit と mozilla でのみサポートされています。

Chrome のデモを用意しました。CSSは

.text {
  font-size: 100px;
  background-image: linear-gradient(0deg, red, orange, yellow, lightblue, blue);
  background-size: 100% 400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-animation: colors 10s infinite linear;
  -webkit-text-stroke: 1px black;
}

@-webkit-keyframes colors {
    0% {background-position-y: 300%;}
    100% {background-position-y: 0%;}
}

このデモでは、背景がテキストによって切り取られているため、数字の内部のみが表示されます。表示するには、テキストを透明にする必要もあります。(そして、もう少し見栄えを良くするために、フォントの周りにストロークを設定します。

次に、必要な色でグラデーションの背景を作成し、楽しみのためにアニメーション化します。

コードでは、温度に応じて background-position が設定されます。

そのシステムでは、連続して実行できることに注意してください。(つまり、温度ごとにわずかに異なる色

デモ

于 2013-10-18T16:58:27.607 に答える
0

のように、背景色が異なるいくつかのクラスを使用できます。

CSSで

.cssclassname1{
 background-color:blue;
}

.cssclassname2{
 background-color:blue;
}

htmlで

<div class="cssclassname1">below 10</div>
<div class="cssclassname2">above 10</div>

お役に立てれば...

于 2013-10-18T06:59:41.023 に答える