Nếu bạn sử dụng Google, 'thực hiện cuộn thùng', toàn bộ trang sẽ thực hiện xoay vòng 360 độ. Có ai có bất kỳ dự đoán như thế nào Google đang làm điều này? Tôi bị vô hiệu hóa javascript, và nó vẫn xảy ra, vì vậy có lẽ một vòng quay css?Google làm việc như thế nào?
Nếu bạn nhìn vào đoạn code css:
body {
-moz-animation-duration: 4s;
-moz-animation-iteration-count: 1;
-moz-animation-name: roll;
}
nơi cuộn giống như @ -webkit-keyframes cuộn { \t từ {-webkit-transform: rotate (0); } \t để {-webkit-transform: xoay (360deg); } } – wave
Hoạt ảnh JavaScript đáng ghét đã chết! Tất cả các hình động CSS đáng ghét mưa đá! –
Đó là một quá trình chuyển đổi CSS: https://developer.mozilla.org/en/CSS/CSS_transitions
-moz-transform: rotate(360deg);
-moz-transition-property: all;
-moz-transition-duration: 5s;
Ví dụ cho Mozilla trên, sử dụng -o và -webkit để nhắm mục tiêu các trình duyệt khác.
nghe giống như một vòng xoay css3 transformation áp dụng cho cả hai cơ thể hoặc html tags
Nó sử dụng hình ảnh động CSS tùy chỉnh. Xem các quy tắc CSS áp dụng cho các <body> đây:
body {
-moz-animation-name: roll;
-moz-animation-duration: 4s;
-moz-animation-iteration-count: 1;
-o-animation-name: roll;
-o-animation-duration: 4s;
-o-animation-iteration-count: 1;
-webkit-animation-name: roll;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: 1;
}
Như đã nói ở trên, với hình ảnh động CSS3 và biến đổi.
Wesbo cho biết cách áp dụng hiệu ứng trên bất kỳ trang web nào. Bạn có thể xem bản trình diễn và hướng dẫn here.
@-webkit-keyframes roll {
from { -webkit-transform: rotate(0deg) }
to { -webkit-transform: rotate(360deg) }
}
@-moz-keyframes roll {
from { -moz-transform: rotate(0deg) }
to { -moz-transform: rotate(360deg) }
}
@keyframes roll {
from { transform: rotate(0deg) }
to { transform: rotate(360deg) }
}
body {
-moz-animation-name: roll;
-moz-animation-duration: 4s;
-moz-animation-iteration-count: 1;
-webkit-animation-name: roll;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: 1;
}
tiền tố css là một ý tưởng ngớ ngẩn. –
Thêm một liên kết với một cái gì đó như thế:
javascript:(function(){var s=document.createElement('style');s.innerHTML='%40-moz-keyframes roll { 100%25 { -moz-transform: rotate(360deg); } } %40-o-keyframes roll { 100%25 { -o-transform: rotate(360deg); } } %40-webkit-keyframes roll { 100%25 { -webkit-transform: rotate(360deg); } } body{ -moz-animation-name: roll; -moz-animation-duration: 4s; -moz-animation-iteration-count: 1; -o-animation-name: roll; -o-animation-duration: 4s; -o-animation-iteration-count: 1; -webkit-animation-name: roll; -webkit-animation-duration: 4s; -webkit-animation-iteration-count: 1; }';document.getElementsByTagName('head')[0].appendChild(s);}());
anh chàng này sẽ làm các trick trên bất kỳ trang web:
@-moz-keyframes roll {
from { -moz-transform: rotate(0deg) }
to { -moz-transform: rotate(360deg) }
}
body {
-moz-animation-name: roll;
-moz-animation-duration: 4s;
-moz-animation-iteration-count: 1;
}
Hãy nhớ rằng đây là dành cho firefox.
nếu bạn muốn vô hạn
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
body{-webkit-animation: spin 9.9s infinite linear;}
Nó rất có thể là xoay CSS. –