私はいくつかの単一ページのウェブサイトの例を調べていて、これを見つけました: http://alwayscreative.net/ . 背景の円盤が無限に回転するのには驚かされます。私はいくつかの例を見てきましたが、そのように機能するものはありませんでした。誰がそれがどのように実装されたのか教えてもらえますか? ありがとう。
質問する
27453 次
5 に答える
25
CSS3:
@keyframes rotate360 {
to { transform: rotate(360deg); }
}
img { animation: 2s rotate360 infinite linear; }
/* TODO: Add -vendor-prefixes for different browsers */
<img src="https://i.stack.imgur.com/qCWYU.jpg?s=64&g=1" />
于 2012-08-18T14:12:38.390 に答える
3
この例では、無限回転が非常にうまく行われます。
div{
-moz-border-radius: 50px/50px;
-webkit-border-radius: 50px 50px;
border-radius: 80px/80px;;
border:solid 21px #f00;
width:100px;
height:100px;
-webkit-animation: rotation 2s linear infinite;
-moz-animation: rotation 2s linear infinite;
-ms-animation: rotation 2s linear infinite;
}
@-webkit-keyframes rotation {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes rotation {
0% { -moz-transform: rotate(0deg); }
100% { -moz-transform: rotate(360deg); }
}
@-ms-keyframes rotation {
0% { -ms-transform: rotate(0deg); }
100% { -ms-transform: rotate(360deg); }
}
ここでテストできます: http://jsfiddle.net/HS68a/2/
于 2014-07-22T14:25:16.283 に答える
2
これがあなたの例でどのように実装されているかです:
@-webkit-keyframes rotation1{
from{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg)}
to{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}
@-moz-keyframes rotation1{
from{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg)}
to{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}
@-o-keyframes rotation1{
from{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg)}
to{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}
.vector1{-moz-animation:rotation1 30s linear infinite;-o-animation:rotation1 30s linear infinite;-webkit-animation:rotation1 30s linear infinite;animation:rotation1 30s linear infinite}
しかし、ブラウザの接頭辞付き変換を他のブラウザ固有のキーフレームに配置することには、何の関心もありません(少し奇妙に思えるかもしれません...)。
また、一般的なキーフレームと IE10 のサポートがないため、次のように実装しました。
@-webkit-keyframes rotation1{
from{-webkit-transform:rotate(0deg);}
to{-webkit-transform:rotate(360deg);}
}
@-moz-keyframes rotation1{
from{-moz-transform:rotate(0deg);}
to{-moz-transform:rotate(360deg);}
}
@-o-keyframes rotation1{
from{-o-transform:rotate(0deg);}
to{-o-transform:rotate(360deg);}
}
@keyframes rotation1{
from{transform:rotate(0deg);}
to{transform:rotate(360deg);}
}
.vector1{-moz-animation:rotation1 30s linear infinite;-o-animation:rotation1 30s linear infinite;-webkit-animation:rotation1 30s linear infinite;animation:rotation1 30s linear infinite}
于 2013-07-27T09:23:46.213 に答える
2
この行を確認してください。css3 を使用して画像を回転できます。そして私はクロムでテストされます http://jsfiddle.net/sUHKh/
于 2012-08-18T14:18:55.083 に答える
1
Chromeで「要素の検査」を行いました。これがCSSです。
.vector1 {
-moz-animation: rotation1 30s linear infinite;
-o-animation: rotation1 30s linear infinite;
-webkit-animation: rotation1 30s linear infinite;
animation: rotation1 30s linear infinite;
}
于 2012-08-18T14:06:01.023 に答える