Midterm Excercise 4
✨ PRATYA DOKBUA
<html> <head> <title> </title> <style> body{ background:black; } img{ height:40vh; margin:auto; position:absolute; top:0px; bottom:0px; right:0px; left:0px; border-radius:50%; box-shadow:0px 0px 100px hsl(180,700%,50%); } img:hover{ box-shadow:0px 0px 1000px hsl(180,700%,50%); transition:10s; } </style> </head> <body> <img src="https://media.giphy.com/media/OPU6wzx8JrHna/giphy.gif "> </body> </html> <!-- 1. ใส่ภาพ https://media.giphy.com/media/OPU6wzx8JrHna/giphy.gif สูง 40vh 2. ทำให้ภาพอยู่กึ่งกลางหน้าจอ ทั้งแนวตั้งและแนวนอน และให้พื้นหลังเว็บเป็นสีดำ 3. ทำให้ภาพเป็นวงรี ตามสัดส่วนดั้งเดิมของรูปต้นฉบับ 4. ใส่แสงเรืองๆ สีใกล้เคียงกับพื้นหลังภาพที่สุด (สีฟ้าอมเขียว ด้วย hsl) โดยกำหนดค่าสีและค่า alpah ตามความเหมาะสม ให้คล้ายเรืองแสง 5. เมื่อเอาเมาส์ไปชี้ภาพ ให้ "ค่อยๆ" เรืองแสงมากกว่าเดิม -->