HTML5中的旋转轮图像（例如轮盘赌轮）？ [英] Spin wheel image in HTML5 (e.g., roulette wheel)?

问题描述

在HTML5中模拟旋转轮盘的最佳方法是什么？

轮子旋转应该可以通过一些输入来控制（即基于某些用户的旋转速度输入）。车轮标签应该模糊，因为车轮快速旋转，但随着旋转变慢，车轮上的标签变得越来越可读。

是否有HTML5库支持此功能，还是动画需要手工编程？

这也需要在iOS设备上支持。

解决方案

可以在几行CSS中完成。

• http://jsfiddle.net/YNBxz/1/ - 仅限CSS（请参阅Chrome或Safari）。
>

• http://jsfiddle.net/YNBxz/2/ - with一些JavaScript，演示如何自定义动画。

模糊是一种光学效果，不需要模拟。 / p>

What's the best way to emulate a spinning roulette wheel in HTML5?

The wheel spinning should be controllable by some input (i.e., speed of spinning based on some user input). The wheel labels should blur as the wheel spins fast, but as the spinning slows, the labels on the wheel become more and more readable.

Are there HTML5 libraries that support this, or do the animations need to be programmed by hand?

This also needs to be supported on iOS devices.

解决方案

It can be done in a few lines of CSS.

• http://jsfiddle.net/YNBxz/1/ – CSS-only (see in Chrome or Safari).
• http://jsfiddle.net/YNBxz/2/ – with some JavaScript, to demonstrate how to customize the animation.

Blurring is an optical effect, it doesn't need to be simulated.

这篇关于HTML5中的旋转轮图像（例如轮盘赌轮）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！