V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
这是一个专门讨论 idea 的地方。

每个人的时间,资源是有限的,有的时候你或许能够想到很多 idea,但是由于现实的限制,却并不是所有的 idea 都能够成为现实。

那这个时候,不妨可以把那些 idea 分享出来,启发别人。
Archeb
V2EX  ›  奇思妙想

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

  •  
  •   Archeb · 2020-03-27 18:20:13 +08:00 · 2444 次点击
    这是一个创建于 1702 天前的主题,其中的信息可能已经有所发展或是发生改变。

    其实事情是这样的,我发现了 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

    7 条回复    2020-03-29 19:41:36 +08:00
    alphardex
        1
    alphardex  
       2020-03-27 18:28:42 +08:00
    之前做过 ken-burns 背景轮播效果 https://codepen.io/alphardex/pen/wvBovww,不用 @keyframes 感觉有点难
    ClarkAbe
        2
    ClarkAbe  
       2020-03-27 22:44:58 +08:00 via iPhone
    GIF
    Archeb
        3
    Archeb  
    OP
       2020-03-28 00:24:32 +08:00
    @ClarkAbe 这个可以有,还可以配合服务端动态生成
    dyxang
        4
    dyxang  
       2020-03-29 12:07:27 +08:00
    个性化 nice
    hzlzh
        5
    hzlzh  
       2020-03-29 13:17:12 +08:00
    @Archeb 服务端动态生成的思路有点意思
    dyxang
        6
    dyxang  
       2020-03-29 18:57:20 +08:00
    额……没成功,粘贴了 css 结果没成功(在别的 discuz 网站试的)
    dyxang
        7
    dyxang  
       2020-03-29 19:41:36 +08:00 via Android
    是必须要个人空间自定义,好吧……
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1822 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 16:31 · PVG 00:31 · LAX 08:31 · JFK 11:31
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.