VẼ QUẠT CỜ VANG VÀ LÀM QUAYTRÒN.
Phần 1-
Vẽ riêng quạt Cơ Vàng và vẽ
riêng Trụ Cờ. Chụp hai hình quạt thành
dạng gif hay png.
Mỗi hình có một tên riêng tự
mình chọn.
Dùng sofware free online làm cho back
ground của hai hình đã chụp thành trong suốt không có dấu vết.
Cả hai hình phải được tồn trử
trong document của computer.
Phần 2- Viết một Javscript Program như
sau nếu chúng ta không cần nút ON và OFF.
Trong program nầy, chúng ta dùng @keyframes rotation để cho quạt quay nhanh chậm
tùy ý thích.
Muốn cho quạt quay nhanh hay chậm
thì chỉ thay đổi thời gian tính băng seconds.
------
<html>
<head>
<style>
.Image{ position:absolute; left:250; top:140;
width : 120; height:130;
animation : rotation infinite 0.5s; }
@keyframes rotation {
from {
transform : rotate(0deg);}
to {
transform : rotate(360deg);} }
</style>
</head>
<body>
<img
id="baxao"; // phải đật một tên
tủy ý thì trụ cờ sẽ hiện ra hình đưng yên.
style="position:absolute;left:250;top:220;width:125;height:425;"src="tru
covang.gif">
<img src="covang moi.gif" Class="Image"/>
</body>
</html>
-------------------------------------------------------------------------------------
MUỐN TẠO NÚT START, STOP THÌ VIẾT
NHƯ SAU
Phương
pháp đơn giản dễ nhớ.
Gồm 3 phần là viết rrong head, trong body và trong script chứa trong body.
-------------------------------------
<html>
<head>
<style>
.block{ position:absolute; left:230; top:170;
width:160; height:130;
}
.animate{ animation : rotation infinite 1s; }
@keyframes rotation {
from
{ transform : rotate(0deg);}
to {
transform : rotate(360deg);} }
</style>
</head>
<body>
<img id= "ba xao";
// phải đặt một tên tủy ý thì trụ cờ mới xuất hiện và đưng yên.
style="position:absolute;left:250;top:220;width:125;height:425;"src="tru covang.gif">
<img src="covang moi.gif" class="block" id="id"/>;
<button
onclick="start()">START</button>
<button
onclick="stop()">STOP</button>
<script>
function
start(){
document.getElementById('id').classList.add('animate');}
function
stop(){
document.getElementById('id').classList.remove('animate');}
</script>
</body>
</html>
--------------------
Xử dụng CSS HTML
1-Viết mốt class goị là .block{ } chưá vị trí của cái quạt cùng với kích thước của nó.
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
cái quạt.
Trong body viết
tên của quạt
cờ vàng va tên của trụ cờ .Rồi viết hai nút Start và Stop.
Trong script viết hai nút bấm Start , Stop như sau.
function start(){ } để đưa animate vào block bằng cách dùng dùng classList.add. Khi animate vào block thi
quạt sẽ quay.
function stop
(){ } để lấy animate ra khỏỉ block bằng cãch dùng classList.remove thì quạt sẽ stop
3-Viết nút bấm START và STOP. Muốn cho cái quạt xoay tròn hay dừng
lại tuỳ ý.
-----------------------------------------
<html><head>
<style>
.block{
position:absolute; left:200; top:155; width:250; height:180;
}
.animate{ animation : rotation infinite 0.5s;
}
@keyframes rotation {
from { transform : rotate(0deg);}
to { transform :
rotate(360deg);} }
</style>
</head>
<body>
<img id= "ba xao";
// phải đặt một tên tủy ý thì trụ cờ mới xuất hiện và đưng yên.
style="position:absolute;left:255;top:220;width:125;height:300;"src="tru covang.gif">
<img src="tangclean.png" class="block" id="id"/>;
<button
onclick="start()">START</button>
<button
onclick="stop()">STOP</button>
<script>
function
start(){
document.getElementById('id').classList.add('animate');}
function stop(){ document.getElementById('id').classList.remove('animate');}
</script>
</body></html>
