在禁止使用 @keyframe 的情况下,纯 CSS 制作一个背景轮播图?

2020-03-27 18:20:13 +08:00
 Archeb

其实事情是这样的,我发现了 Discuz 一个可以自定义个人空间 CSS 的接口。 过滤了引号、分号、 @和 > ,想着怎么能在这些限制的情况下做一个最骚的个人空间

方案一,transition delay 这是目前我在用的 见 https://www.hostloc.com/space-uid-27573.html,缺点是轮播数量受限...不过只要找多几个元素其实上限可以很高

方案二,引入 SVG + Animation SVG 作为外链被插入的时候不能再用内部 image 引用外链图片,但可以用 Data URI 绕过。 这个方法不太好,主要是图片大小不好控制,就抛弃了

不知道大家还有啥奇思妙想可以做到呢 (关于 Discuz 论坛如何自定义 CSS,见 https://www.hostloc.com/thread-663348-1-1.html

2444 次点击
所在节点    奇思妙想
7 条回复
alphardex
2020-03-27 18:28:42 +08:00
之前做过 ken-burns 背景轮播效果 https://codepen.io/alphardex/pen/wvBovww,不用 @keyframes 感觉有点难
ClarkAbe
2020-03-27 22:44:58 +08:00
GIF
Archeb
2020-03-28 00:24:32 +08:00
@ClarkAbe 这个可以有,还可以配合服务端动态生成
dyxang
2020-03-29 12:07:27 +08:00
个性化 nice
hzlzh
2020-03-29 13:17:12 +08:00
@Archeb 服务端动态生成的思路有点意思
dyxang
2020-03-29 18:57:20 +08:00
额……没成功,粘贴了 css 结果没成功(在别的 discuz 网站试的)
dyxang
2020-03-29 19:41:36 +08:00
是必须要个人空间自定义,好吧……

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/656888

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX