1. 首页
  2. 问答
  3. 是否有可能具有恒定的旋转DIV或图像？

是否有可能具有恒定的旋转DIV或图像？

2011-11-20 76 views

回答

1

你必须在CSS3中进行轮换。

@keyframes rotate 
{ 
    0% { transform: rotate(0); } 
    25% { transform: rotate(90); } 
    50% { transform: rotate(180); } 
    75% { transform: rotate(270); } 
    100% { transform: rotate(360); } 
} 

#rotating_div 
{ 
    animation-name: rotate; 
    animation-duration: 4s; 
    animation-iteration-count: infinite; 
    animation-play-state: paused; 
}

这里的JavaScript的：

function rotate(id) { 
    div = getElementById['id']; 
    div.style.animation-play-state = running; 
}

这里的HTML：

<div id="rotating_div" onclick="rotate("rotating_div")"></div>

使用前缀-moz-和-webkit-得到CSS3在FF和其他浏览器工作。看看这里：W3Schools.com

祝你好运！ :)

来源

2011-11-20 11:27:14

+0

谢谢！我怎么能做到这一点，而不是只是运行指定的时间，它会继续旋转。所以像这样：动画定时功能：易线性;但显然这是行不通的，哈哈。 –

+0

animation-iteration-count说明它应该重复多少次。（你可以使用无限） –

+0

@keyframes rotate { 0％{transform：rotate（0）; } 25％{transform：rotate（50）; } 50％{transform：rotate（120）; } 75％{transform：rotate（250）; } 100％{transform：rotate（360）; } } 如果你这样做，那么它会一直褪色 –

1

搜寻这对谷歌

做一个桶滚

应该给你一个想法:)

https://www.google.co.in/search?q=Do+a+barrel+roll

来源

2011-11-20 09:06:55 Pheonix

+0

可爱（在“阻止它并给我我的搜索结果”的意义上）尽管这是支持浏览器，但它根本没有帮助实现该效果。 – Quentin

+0

谢谢！但是，我将如何保持它持续运动？ –

1

您需要使用window.setInterval来控制动画。更多信息here

来源

2011-11-20 09:50:44

0

我的第一个想法是结合JS定时器和CSS3转换，但看着w3schools.com，我看到实际上在CSS3中有动画支持。

我认为这将被执行如下;

@keyframes rotate 
{ 
    0% { transform: rotate(0); } 
    25% { transform: rotate(90); } 
    50% { transform: rotate(180); } 
    75% { transform: rotate(270); } 
    100% { transform: rotate(360); } 
} 

div #lp 
{ 
    animation-name: rotate; 
    animation-duration: 4s; 
    animation-iteration-count: infinite; 
    animation-play-state: running; 
}

这是不是一个真正的JS解决方案，但是这是迄今为止最简单的解决方案，但如果你的目标浏览器不支持CSS3，那么你可能想使用动画GIF图像。

你将不得不使其在其他化网页浏览器工作太，但它只是添加-webkit-标签和这样的，关于这个问题的更多信息，请访问：http://www.w3schools.com/css3/css3_animations.asp这里：http://www.w3schools.com/css3/css3_2dtransforms.asp

（对不起给那些不喜欢w3schools.com的人）

来源

2011-11-20 09:57:26

+0

Thankyouuu！非常丰富和非常详细。谢谢你花时间把这些放在一起。我会做一个GIF，但图像是动态创建的，所以...尽管如此，它仍然可以很好地工作！ CSS3真的让所有的事情变得简单很多（而且还有很多fun​​ner！）你最好的！ –

相关问题

 相关问题