我可以用 CSS 画出像命运之轮这样的东西吗？

Posted 2023-03-06

【中文标题】我可以用 CSS 画出像命运之轮这样的东西吗？

【英文标题】：Can I draw something like Wheel of Fortune using CSS?

【发布时间】：2012-06-23 07:21:48

【问题描述】：

我希望只使用 CSS 和 jQuery 来绘制命运之轮。我不想使用任何图像。

另外，我希望圆圈中至少有 8 个片段，并在每个片段中正确垂直对齐每个文本单词。这是一张照片来说明：

一旦我有了这个工作，我就可以使用CSS3 rotate 属性。

知道我该怎么做吗？

【问题讨论】：

这是一个基于 html5 Canvas 的方法。 LINK

【参考方案1】：

这是一个使用 Canvas 在 HTML5 中完成的纺车演示：LINK

直接下载到项目演示文件：ZIP

---

编辑：这是一个不同的教程演示：Creating a roulette wheel using html5 canvas

【讨论】：

这个绝对完美..正是我想要的..谢谢 :)

但我实际上是在尝试使用 CSS3 动画属性来旋转***。而且电源选项只能再次改变使用 CSS3 旋转的速度，这是肯定的

这两个演示不是我的作品，由这些作者提供，按需要使用。一个很好的用于旋转的 jQuery 插件是 jqueryrotate.

好的..现在我已经尝试了一些 CSS 代码..你可以在这里看到它link.. 那么我如何在单击停止按钮时缓解滚轮的缓慢移动..

我不确定。考虑提出一个新的 *** 问题。

【参考方案2】：

这是另一个使用 Canvas 的 spinning wheel 示例

【参考方案3】：

我使用 Raphael 创建了一个轮盘赌：http://www.guesttime.com/members/ledlogic/roulette/index.html

它像你一样旋转文本，但你必须处理每个字母的居中。

【参考方案4】：

查看此链接 -> http://joelb.me/blog/2011/css-mask-tutorial-rotating-image-gallery/

它包含一些您需要的介绍性教程。检查 github 上的 JS 2d Transformation 库代码。

【讨论】：

css-mask 使用图像..我只想用颜色代替，还必须在上面写文字..它还有用吗？

@Jigar 是的，为什么不呢，你需要设置文本 div 来代替这篇文章如何管理图像及其所有关于一个想法..你可以通过这个 tut 让我知道你是否面对任何问题:)

我现在已经使用了图像..你可以在这里看到它link 但我有一个问题..单击停止按钮时，*** shd\udnt 突然停止..相反它慢点。。