iT邦幫忙

0

html 文字顯示兩種顏色

一段文字要一秒顯示紅色下一秒跳藍色,以此類推這樣,請問語法該怎麼打?

你要無限循環嗎?
有指定使用語言嗎?
可能要描述你的完整需求
才有可能真正幫到你
1
japhenchen
iT邦大師 1 級 ‧ 2021-10-08 10:16:08

用CSS/SCSS
這裡有一堆範本
https://freefrontend.com/css-text-effects/

(學HTML動畫不學CSS,學再多也枉然)

這裡有比較接近你的需求的做法
https://codepen.io/amit_sheen/pen/261df6f09d15a179b63454bb75acc191

2
毛毛
iT邦新手 3 級 ‧ 2021-10-08 12:31:50

使用 animation 設定動畫

<!DOCTYPE html>
<html lang="zh-TW>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Flash</title>
    <style>
    body {
      background: #223;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 90vh;
    }

    h1 {
      font-size: 60px;
      /*  使用動畫  */
      animation: flash 2s infinite steps(1, end);
    }

    h1::after {
      content: '';
      animation: flash 2s infinite steps(1, end);
    }

    /* 設定動畫 */
    @keyframes flash {
      0%, 100% {
        color: #f88;
        content: '紅色';
      }
      50% {
        color: #8bf;
        content: '藍色';
      }
    }

    </style>
</head>
<body>
    <h1>一段文字要一秒顯示</h1>
</body>
</html>

Codepen 展示

看更多先前的回應...收起先前的回應...
邊緣人 iT邦新手 5 級 ‧ 2021-10-08 14:07:01 檢舉

請問可以不使用CSS嗎?單純HTML的語法,想簡化一點。

毛毛 iT邦新手 3 級 ‧ 2021-10-08 14:31:40 檢舉

沒辦法,現在瀏覽器支援 HTML5,已經不太支援舊的 HTML 標籤。
animation 語法已經算是最簡化的語法了。

邊緣人 iT邦新手 5 級 ‧ 2021-10-08 14:39:59 檢舉

想利用這樣去寫有辦法嗎?

毛毛 iT邦新手 3 級 ‧ 2021-10-08 15:06:57 檢舉

純 HTML 以我目前的知識量是無法達成,
多半都是透過 CSS 實作(效能效果兼備)

Canvas 搭配 JavaScript 實作。(有點小題大作

邊緣人 iT邦新手 5 級 ‧ 2021-10-08 15:25:08 檢舉

例如用< p >、< span >、< style >等等的語法去寫不知道該怎麼寫..
setInterval(function(){blink.color='#0000ff'?'red':'blue'},100)

毛毛 iT邦新手 3 級 ‧ 2021-10-08 15:36:08 檢舉

setInterval 那個也不是 HTML 的語法呀 = =
那個是 JS 語法,
這樣講我上面的程式碼範例也符合你說的 <style> 標籤
本身是 HTML 檔案

BeEvil_Y iT邦新手 5 級 ‧ 2021-10-08 15:47:36 檢舉

毛毛,他應該不是系統工程師。
我猜他只是一般文書人員,只有WEB後台權限。
但老闆要求他切換字體顏色。
所以你要求他用CSS改色「難度很高」。

如果他沒辦法動到根目錄去改CSS。
那你不如教他寫<style></style>
因為那是包在html裡面。

@shuo0301
你可以指定< p >、< span >、< style >的ID去命名
再利用<style></style>裡面寫CSS

如果是<p class="我是王小明"></p>
你CSS可以下
.我是王小明 { 隨便你改; }
如果是<p ID="我是王小明">
你CSS可以下
#我是王小明 { 隨便你改; }

以毛毛的例子
<h1>一段文字要一秒顯示</h1>
他的CSS是設在h1。

你說< p >、< span >
你不可能直接用P、Span全部去套,你只能命名他。

<p class="我是王小明"></p>
<span class="我是王小明"></span>

我是王小明,就是你給他的名稱。

原本毛毛的語法。

h1 <{
  font-size: 60px;
  /*  使用動畫  */
  animation: flash 2s infinite steps(1, end);
}

h1::after {
  content: '';
  animation: flash 2s infinite steps(1, end);
}

CSS 可以改成

.我是王小明 {
  font-size: 60px;
  /*  使用動畫  */
  animation: flash 2s infinite steps(1, end);
}

.我是王小明 ::after {
  content: '';
  animation: flash 2s infinite steps(1, end);
}
毛毛 iT邦新手 3 級 ‧ 2021-10-08 16:50:32 檢舉

那就跟我上面程式碼範例一樣使用 <style> 標籤,
也許你不太會用 <styel> 標籤,
那我改成你說的 setInterval JavaScript 語法
也把 Codepen 示範 用的簡單一點,全都放在 HTML 上面
這樣應該就沒有你說的 CSS 語法了

<p class="flash">一段文字要,一秒顯示紅色,一秒顯示藍色。</p>
<script>
  const flash = document.querySelector('.flash');
  flash.style.color = "red";
  setInterval( function() {
    flash.style.color === "red" ? 
      flash.style.color = "blue" : 
      flash.style.color = "red";
  }, 1000)
</script>
邊緣人 iT邦新手 5 級 ‧ 2021-10-08 17:08:48 檢舉

那一段是我在網上找到的,想說貼出來看是不是可以從中修改,感謝你們的協助。

0
qaws890
iT邦見習生 ‧ 2021-10-08 21:46:19

用CSS/SCSS~

我要發表回答

立即登入回答