自定义双层旋转logo 组件
评分: +2+x

这是什么?

这是一个可以在你的页面中添加一至多个不停旋转的大logo1作为装饰的有趣小组件。


使用方法

把以下代码单独成行放置于你的页面源代码中以使用本组件:

[[include :area-cn-02:component:spinning-logos
|outer-url=外圈图片网址
|outer-speed=外圈旋转速度(转一圈所用的秒数)
|inner-url=内圈图片网址
|inner-speed=内圈旋转速度(转一圈所用的秒数)
]]

一个logo分为外圈和内圈两层,外圈位于下层,逆时针旋转;内圈位于上层,顺时针旋转。

如果只想用一张图片,可以留空或者删掉几个参数,对组件正常运行没有影响。如果用了一个图片,而速度一项不填、删除或者填0,则图片会静止。

logo默认大小是500*500像素(在小于500像素的屏幕上会自动缩小),不是此尺寸的图片会被缩放。推荐使用透明底图片。


示例

[[include :area-cn-02:component:spinning-logos
|outer-url=https://scp-sandbox-3.wikidot.com/local--files/paranoma/scpf-logo-b.png
|outer-speed=5
|inner-url=https://scp-sandbox-3.wikidot.com/local--files/paranoma/scpf-logo-a.png
|inner-speed=1
]]

效果:


删除部分属性,只使用逆时针旋转的“外圈”:

[[include :area-cn-02:component:spinning-logos
|outer-url=https://area-cn-02.wikidot.com/local--files/main/area-cn-02-logo.png
|outer-speed=5
]]

效果:


每个旋转logo互相独立,一个页面内可以有多个不同样式和速度的旋转logo。

现在的bug

  • div在旋转,虽然加了overflow: hidden,但页面高度仍然一直变化,在编辑模式下,编辑框的位置总是会抽风乱动(移动端)
除非特别注明,本页内容采用以下授权方式: Creative Commons Attribution-ShareAlike 3.0 License