用CSS/SCSS
這裡有一堆範本
https://freefrontend.com/css-text-effects/
(學HTML動畫不學CSS，學再多也枉然)
使用 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>
請問可以不使用CSS嗎？單純HTML的語法，想簡化一點。
沒辦法，現在瀏覽器支援 HTML5，已經不太支援舊的 HTML 標籤。animation 語法已經算是最簡化的語法了。
想利用這樣去寫有辦法嗎？
純 HTML 以我目前的知識量是無法達成，
多半都是透過 CSS 實作（效能效果兼備）
或
Canvas 搭配 JavaScript 實作。（有點小題大作）
例如用< p >、< span >、< style >等等的語法去寫不知道該怎麼寫..
setInterval(function(){blink.color='#0000ff'?'red':'blue'},100)
setInterval 那個也不是 HTML 的語法呀 = =
那個是 JS 語法，
這樣講我上面的程式碼範例也符合你說的 <style> 標籤
本身是 HTML 檔案
毛毛，他應該不是系統工程師。
我猜他只是一般文書人員，只有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);
}
那就跟我上面程式碼範例一樣使用 <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>
那一段是我在網上找到的，想說貼出來看是不是可以從中修改，感謝你們的協助。
iThome鐵人賽
看影片追技術