PHƯƠNG PHÁP GẮN NÚT START VÀ STOP VÀO KEYFRAMES CSS
<html>
<head><style>
.block{
position:absolute; left:295; top:175; width : 130;
height:130;src="ball.gif";
}
.animate{
animation : rotation infinite 4s; }
@keyframes rotation {
from { transform : rotate(0deg);}
to { transform :
rotate(360deg);} }
</style>
<img src="ball.gif" class="block"
id="id"/>.
<button
onclick="start()">START</button>
<button
onclick="stop()">STOP</button>
</head>
<body>
<script>
function start(){
document.getElementById('id').classList.add('animate');}
function stop(){
document.getElementById('id').classList.remove('animate');}
</script>
</body>
</html>
-------------------
GHI CHÚ.
Xử dụng CSS HTML
1-Viết mốt class goị là .block{ } chưá src="ball.gif" của quả banh và vị trí cùng với kích thước của quả banh. Kh̀ông chứa src="ball.gif" cũng OK.
2-Viết thêm một class nữa gọi là .animate ( } chứa cách chuyển động và thời
gian chuyển động của quà banh.
Xử dụng JavaScript .
1-Viết một function
start(){ } để đưa animate vào block bằng cách dùng dùng classList.add
2-Viết một function
stop (){ } để lấy animate ra khỏỉ
block dùng classList.remove
3-Viết nút bấm
START và STOP.Muốn cho quả banh xoay tròn hay dừng lại tuỳ ý.
----------------------
MỘT HÌNH QUAY LIÊN
TỤC VÀ MỐT HÌNH QUAY CÓ NÚT START VÀ STOP.
----------------
<html>
<head>
<style>
.banh{ position:absolute; left:295; top:175; width
: 130; height:130;
animation : rotation
infinite Linear 1s;} // quay
liên tục.
.block{ position:absolute; left:295;
top:175; width : 130; height:130;
} // quay có nút Start và Stop.
.animate{ animation :
rotation infinite 4s; }
@keyframes rotation {
from { transform :
rotate(0deg);}
to { transform :
rotate(360deg);} }
</style>
<img src="ball.gif" class="banh"/>
<img src="tangclean.png" class="block" id="id"/>.
<button
onclick="start()">START</button>
<button
onclick="stop()">STOP</button>
</head>
<body>
<script>
function start(){
document.getElementById('id').classList.add('animate');}
function stop(){
document.getElementById('id').classList.remove('animate');}
</script>
</body>
</html>
Henry Dương
Apr-03-2022
