KEYFRAMES CSS LÀM CHUYỂN ĐỘNG HÌNH VẼ MẢY IN VẢI SỢI TỰ ĐỘNG
1-VẼ MÁY IN KHUNG VẢI XOAY TRÒN.
(ROTARY TEXILE SCREEN PRINTER)
Trước tiên phải vẽ máy
in vải sơi xoay tròn gồm có hai tẩng là tầng 1 và tầng 2 như hình
vẽ.
Chụp hình riêng hai tầng theo dạng gif hay png rồi tồn trử trong document của computer.
Riêng hình tầng 1 thỉ
chuyển đổi thanh hình có background color trong suốt gọi là (transparent
background color).
Hiện nay có 3 cách làm
cho tầng có khung vải chuyển động xoay tròn theo ý muốn.
Người viết bài nầy chọn cách xử dụng phương pháp xoay tròn đơn giản nhứt. Đó là phương pháp dùng KEYFRAMES CSS.Còn hai phương pháp khác sẽ có bài viết kế tiếp.
2-KEYFRAMES CSS LẢ GÌ ?
CSS LÀ VIẾT TẮC CỦA CHỬ CASCADING STYLE SHEET,
Keyframes lồng trong style của CSS
Thí du.
<html>
<head>
<style>
.Image{
position:absolute; left:295; top:175; width : 130; height:130;
animation : rotation infinite 4s; }
@keyframes
rotation {
from { transform : rotate(0deg);}
to { transform : rotate(360deg);} }
</style>
</head>
<body>
<img id="mama"; // phải có
mợi hiện hình.Đây là tầng dưới đưng yên.
style="position:absolute;left:250;top:220;width:225;height:125;"src="tang2.gif">
<img src="tangclean.png" Class="Image"/>
</body>
</html>
----------------------------------------
CLASS CỦA CSS LÀ GỈ? Trong CSS phải có class.
Class được
đặt bất cứ tên gì theo ý muốn. Ở đây đặt tên là Image và phải có dấu chấm đứng cạnh chử .Image. Dấu chấm là ký hiệu thay cho chữ
class .
Trong class phải chứa vị trí , kích thước, cách xoay tròn và thời gian xoay tròn của hình vẽ như sau.
.Image{ position:absolute; left:295; top:175;
width : 130; height:130;
animation : rotation infinite 4s;
}
rotation infinite 4s : khi xoay tròn xong trong 4 seconds , hình trở lại vị trí ban đầu rồi tiếp tục xoay tròn lại.Giảm bớt thời gian thì hình quay nhanh.
Dùng
những chử sau đây thay đổi cách xoay tròn.
Linear : hình
xoay liên tục không thay đổi và không dừng lại từ khi bắt đầu.,
Ease :hình bắt
đầu quay chậm, sau đó tăng nhanh; trước khi dừng thì chậm lại.
Ease-in :hình
bắt đầu quay châm nhưng dừng lại rất nhanh (will end quickly).
Ease-out :hình
bắt đầu quay nhanh nhưng sắp hết thì chậm.
Chì cần một keyframes, chúng
ta có thể làm xoay tròn nhiều class khác nhau.
Thí dụ sau đây làm xoay
tròn hai hình khác nhau trong hai class riêng rẻ với tốc độ khác nhau.
.animate{position:absolute;left:295; top:175; width : 100; height:100;animation:rotation 2s infinite Linear;}
.box{position:absolute;left:290;
top:170; width:120; height:120;animation:rotation 5s infinite;}
<Img
src="ball.gif" class="animate"/>
<Img src="tangclean.png" class="box"/>
Hình trên quay chậm.
3- NẾU KHÔNG DÙNG CHỬ FROM VÀ CHỬ TO THI PHẢI VIẾT NHƯ SAU THÌ HÌNH MỚI XOAY TRÒN.
<html><head>
<style>
.Image{ position:absolute; left:295;
top:175; width : 130; height:130;
animation : rotation infinite 4s;
}
@keyframes rotation {
0% {
transform: rotate(0deg) }
25%
{
transform: rotate(90deg ) }
50% {
transform:
rotate(180deg) }
75% {
transform: rotate(270deg) }
100% {
transform:
rotate(360deg) } }
</style></head>
<body>
<img id="mama"; // phải có
mợi hiện hình. Đây là tầng dưới đưng yên.
style="position:absolute;left:250;top:220;width:225;height:125;"src="tang2.gif">
<img src="tangclean.png"
Class="Image"/>
</body></html>
4- JAVASCRIPT QUERY METHOD.
<html><body>
<button
id="rotate">CLICK</button>
<img
id="mama"
style="position:absolute;left:250;top:210;width:225;height:125;"src="tang2.gif">
<img
id="papa"
style="position:absolute;left:285;top:150;width:155;height:145;"src="tangclean.png">
<script>
var rotation = 0;
document.querySelector("#rotate").addEventListener("click",
function() {
rotation +=290;
document.querySelector("#papa").style.transform = "rotate("+ rotation +
"deg)";})
</script>
</body></html>
Có
id=papa, id=mama, id=click và id=rotate cua function phải viết như sau mới
hoạt động:
“rotate("+ rotation + "deg)"
Mar /29/2022
