回答
你必须在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
祝你好运! :)
谢谢!我怎么能做到这一点,而不是只是运行指定的时间,它会继续旋转。所以像这样:动画定时功能:易线性;但显然这是行不通的,哈哈。 –
animation-iteration-count说明它应该重复多少次。(你可以使用无限) –
@keyframes rotate { 0%{transform:rotate(0); } 25%{transform:rotate(50); } 50%{transform:rotate(120); } 75%{transform:rotate(250); } 100%{transform:rotate(360); } } 如果你这样做,那么它会一直褪色 –
可爱(在“阻止它并给我我的搜索结果”的意义上)尽管这是支持浏览器,但它根本没有帮助实现该效果。 – Quentin
谢谢!但是,我将如何保持它持续运动? –
您需要使用window.setInterval
来控制动画。更多信息here
我的第一个想法是结合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的人)
Thankyouuu!非常丰富和非常详细。谢谢你花时间把这些放在一起。我会做一个GIF,但图像是动态创建的,所以...尽管如此,它仍然可以很好地工作! CSS3真的让所有的事情变得简单很多(而且还有很多funner!)你最好的! –
- 1. 可旋转的图像或div与javascript?
- 2. 是否有可能使用opencv将旋转的图像复制到另一个图像的旋转ROI?
- 3. 是否arr = [val] * N具有班轮或恒定时间?
- 4. 图像不旋转div内的旋转
- 5. 是否有可能知道DOM/JavaScript图像是否具有Alpha通道
- 6. 具有恒定高度可变宽度的Div
- 7. CSS3动画:是否有可能让一个div div与父div有相反的旋转?
- 8. 是否有可能宣布一个数组恒定
- 9. 是否有可能使图像居中?
- 10. 绘制具有特定位置,大小和旋转的图像
- 11. 具有恒定的LLVM
- 12. 是否有可能产生具有FPDF
- 13. 是否有可能在Altivec中旋转一个128位的值?
- 14. 是否有可能直接启动功能具有定时
- 15. 是否有可能具有无状态定时功能
- 16. AppleScript是否具有像AutoIt或AutoHotkey的图像识别
- 17. 旋转图像悬停div
- 18. 如何检查裁剪div是否覆盖旋转的图像?
- 19. 确定WebService是否可用或具有有效的url?
- 20. 没有图像处理工具箱旋转图像
- 21. 弧进度条具有恒定的图像内
- 22. PHP是否有可能直接将html转换为图像
- 23. 是否有可能将图像转换为PDF在android中
- 24. 是否有可能将UIView转换为圆形图像?
- 25. webrtc,是否有可能将图像转换为媒体流?
- 26. 具有恒定值型
- 27. 具有恒定数字和
- 28. SceneKit是否旋转(by:around:duration :)是否有效?
- 29. 是否有可能使用具有泛型绑定类的EJB?
- 30. 是否有可能知道JPEG图像是否仅从其原始字节进行旋转?
是的,这是可能的。 – JJJ
你能告诉我一个教程吗? Thankyou :) –