Embedded Files
📢นวัตกรรมการศึกษา 4 ชิ้น / เทคนิค วิธีการสอน 4 เทคนิค
เทคนิควิธีการสอน
นวัตกรรมการศึกษา
📢Workshop
Workshop ที่ 1
การทำตัวหนังสือวิ่ง คลิก!
ครั้งที่ 1
ครั้งที่ 2
ครั้งที่ 3
pormp จากโค้ดดังกล่าวข้างต้น ปรับแต่ง แก้ไข เพิ่มการแสดงผลให้ <marquee direct="right">โปรแกรมการประถมศึกษา </marquee> จากโค้ดที่ปรับแต่งและเพิ่มความสามารถในการให้ตัวอักษรมีฟ้า, ม่วง, ชมพู, ขาว, และแดง ในส่วนของตัวอักษร 40 สามารถเปลี่ยนสีแบบไล่สีได้
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<style>
body {
background: #f5f5f5;
}
/* พื้นที่วิ่งแบบ marquee */
.marquee {
width: 100%;
overflow: hidden;
white-space: nowrap;
}
/* ข้อความ */
.marquee-text {
font-size: 40px;
font-weight: bold;
display: inline-block;
padding-right: 100%;
/* ไล่สี ฟ้า ม่วง ชมพู ขาว แดง */
background: linear-gradient(
270deg,
#00bfff, /* ฟ้า */
#8a2be2, /* ม่วง */
#ff69b4, /* ชมพู */
#ffffff, /* ขาว */
#ff0000, /* แดง */
#00bfff
);
background-size: 400% 400%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
/* แอนิเมชัน */
animation:
moveRight 10s linear infinite,
gradient 5s ease infinite,
bounce 1s ease-in-out infinite alternate;
}
/* วิ่งจากซ้ายไปขวา (เหมือน marquee direction="right") */
@keyframes moveRight {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
/* ไล่สี */
@keyframes gradient {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* เด้งเบา ๆ */
@keyframes bounce {
0% { transform: translateY(0); }
100% { transform: translateY(-15px); }
}
</style>
</head>
<body>
<div class="marquee">
<span class="marquee-text">
🎒📚 โปรแกรมการประถมศึกษา ✏️🌈
</span>
</div>
</body>
</html>
Page updated
Google Sites
Report abuse