Tôi có trang web sau đó là trong Flash với xoay bánh răng ở chế độ nền:Làm cách nào để tạo một cog xoay với CSS3 và jQuery?
http://thedrivepartnership.com/index.html
Tôi muốn tạo ra một cái gì đó tương tự như sử dụng CSS và JavaScript - không ai biết của bất kỳ ví dụ out there?
Tôi cho rằng những gì bạn có thể làm là tạo một container mà lấp đầy cửa sổ, sau đó đặt bánh răng của bạn trong container đó. Ví dụ: bạn có thể đặt vùng chứa giữ hoạt ảnh ở đầu tệp với chỉ mục z rất thấp phù hợp với cửa sổ và có vị trí cố định. Bạn sẽ đặt nội dung của mình lên trên và giả vờ css4 chỉ xuất hiện với sự hỗ trợ cho nền .avi. Chỉ đùa thôi. Mã số:
<body>
<div id="cogs">
// Your awesome cog pictures
</div>
<div id="content">
// Your awesome content
</div>
</body>
Các css cho container hoạt hình có thể trông như thế này:
#cogs {
width: 100%;
height: 100%;
position: fixed;
text-align: center;
overflow: hidden;
z-index: -100;
}
Các css dựa hoạt hình làm việc như thế này, nhưng với tiền tố nhà cung cấp khác nhau:
@keyframes rotateCogOne {
0% {
-webkit-transform:rotate(0deg);
}
100% {
-webkit-transform:rotate(360deg);
}
}
Và sau đó bạn áp dụng hoạt ảnh như vậy:
#cogOne {
animation: rotateCogOne 60s infinite linear;'
// which means...
animation: [name], [duration], [repeat], [easing]
}
Nếu không có kịch bản một hoạt ảnh trong phần tử canvas, tôi nghĩ bạn sẽ khá hạn chế. Đặc biệt, việc chia tỷ lệ hình ảnh động để phù hợp với các độ phân giải khác nhau sẽ khó (Impossible?) Với css và html nghiêm ngặt. Nó vẫn có thể trông mát mẻ mặc dù, vì vậy có lẽ nó vẫn đáp ứng nhu cầu của bạn. Ngoài ra, khi hoạt ảnh không được hỗ trợ, bạn vẫn có thể có một loạt các bánh răng thú vị trong nền hoặc đơn giản là quay lại hoạt ảnh dựa trên javascript.
Tôi đã ghép cùng nhau một basic example cách bạn có thể làm điều đó với css và html. Here it is full screen. Có nhiều vấn đề hơn tôi nghĩ ... Điều này chắc chắn chưa hoàn thành ... Nhưng hy vọng một bước đi đúng hướng. Bạn có thể mở rộng các phương thức tương tự cho nhiều bánh răng để tiếp tục giống với trang hiện tại của bạn.
Nếu bạn đi tuyến đường này (Và tôi không chắc chắn nên giới thiệu nó), tốt nhất là nên thiết kế hình động ở độ phân giải có kích thước khoảng 800x600 đến 1400x100. Nếu bạn có số liệu thống kê, hãy đi theo kích thước cửa sổ phổ biến nhất của người dùng.
Tôi sợ rằng trước canvas-tag HTML5 của bạn sẽ cần phải sử dụng GIF của ..
EDIT: Cào người cuối cùng .. Xem: http://css-tricks.com/examples/CSS3Clock/ này có lẽ hầu hết sẽ giúp bạn.
Rotating là một 2D chuyển đổi, vì vậy cái gì đó như:
.cog {
height: 100px; width: 100px;
transform: rotate(180deg);
animation-duration: 10s;
}
Hãy thử điều này trong Chrome. Điều này dành riêng cho trình duyệt webkit, Chrome và Safari. Thay thế "-webkit" bằng "-moz" cho Mozilla và "-o" cho Opera. Hoặc chỉ cần xóa nó cho các phiên bản trình duyệt mới nhất.
.cog{
-webkit-animation-name: spin;
-webkit-animation-duration: 60000ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-timing-function: linear;
}
hoặc
.cog{
animation-name: spin;
animation-duration: 60000ms;
animation-iteration-count: infinite;
animation-direction: normal;
animation-timing-function: linear;
}
Bạn có thể sử dụng phông chữ tuyệt đẹp spinning cog icon, trừ khi bạn muốn sử dụng hình ảnh của riêng mình.
Biểu tượng phông chữ tuyệt vời có thể được triển khai với <i class="fa fa-cog"></i> sau khi bạn đã thêm phông chữ tuyệt vời vào dự án của mình.
[cờ] Có điều này là một mẹo vặt hay, một đồng hồ bấm lớn. Nhưng đó là một chặng đường dài từ một câu trả lời cho câu hỏi của OP. –