V2EX = way to explore
V2EX 是一个关于分享和探索的地方
Sign Up Now
For Existing Member  Sign In
爱意满满的作品展示区。
renzhn

纯 JS+CSS 实现 Windows 安装界面“请坐和放宽”

  •  5
     
  •   renzhn · Mar 31, 2016 · 9697 views
    This topic created in 3680 days ago, the information mentioned may be changed or developed.
    Supplement 1  ·  Mar 31, 2016
    2.0: 加入了一个 CSS 实现的 Metro Loading Icon
    79 replies    2017-07-14 11:17:20 +08:00
    VmuTargh
        1
    VmuTargh  
       Mar 31, 2016
    暴力膜蛤不可取, 无形膜蛤最续命!
    czmecho
        2
    czmecho  
       Mar 31, 2016 via Android
    原来是膜法师的教徒。
    Phariel
        3
    Phariel  
       Mar 31, 2016
    为了 url +1s
    jkjoke
        4
    jkjoke  
       Mar 31, 2016
    兹慈
    mogita
        5
    mogita  
       Mar 31, 2016 via iPhone
    这个命续得我给九分!
    fy
        6
    fy  
       Mar 31, 2016
    膜的飞起,+1s
    ericls
        7
    ericls  
       Mar 31, 2016
    OP 搞的这个东西啊 excited !
    xlvecle
        8
    xlvecle  
       Mar 31, 2016
    天若有情天亦老, 你这一弄又一秒
    Twinkle
        9
    Twinkle  
       Mar 31, 2016
    +1s
    BOYPT
        10
    BOYPT  
       Mar 31, 2016
    蛤蛤蛤 excited
    不过字体不像,可以引入 webfont 改改
    eastpiger
        11
    eastpiger  
       Mar 31, 2016
    打开之后先右键源代码、然后默默滚回去认真复习了一遍
    zhujinliang
        12
    zhujinliang  
       Mar 31, 2016
    看的我两腿不由自主地跑了起来
    v1024
        13
    v1024  
       Mar 31, 2016
    楼主 js 写的不错。
    pec
        14
    pec  
       Mar 31, 2016
    有花屏闪屏 bug
    hjc4869
        15
    hjc4869  
       Mar 31, 2016
    其实那个第一次登录的颜色渐变 UI 本来就是 HTML+js 写的(
    lution
        16
    lution  
       Mar 31, 2016
    @pec 我还以为是故意的
    renzhn
        17
    renzhn  
    OP
       Mar 31, 2016
    @BOYPT 中文 Webfont...?
    @pec patch welcome
    @hjc4869 消息来源?
    viator42
        18
    viator42  
       Mar 31, 2016
    现在的年轻人,说着说着就膜起来了
    irainsoft
        19
    irainsoft  
       Mar 31, 2016
    暴力膜蛤不可取
    iloveayu
        20
    iloveayu  
       Mar 31, 2016
    这都可以膜,也是醉了。。。
    hjc4869
        21
    hjc4869  
       Mar 31, 2016
    @renzhn C:\Windows\System32\oobe\FirstLoginAnim.html
    当然这个用浏览器是跑不动的……
    renzhn
        22
    renzhn  
    OP
       Mar 31, 2016
    @hjc4869 长姿势
    renzhn
        23
    renzhn  
    OP
       Mar 31, 2016
    @pec 你不会是硬件带不动导致的闪屏吧...我这边是由于切到别的页面过后脚本仍然会在跑导致的,我还不知道怎么解决
    Exin
        24
    Exin  
       Mar 31, 2016
    +1s

    有个 bug : Chrome 切换到别的标签页 1 分钟左右再切回去,页面底色就会闪烁
    sciooga
        25
    sciooga  
       Mar 31, 2016
    低级膜法师说闷声发大财,高级膜法师都知道原句是闷声大发财。
    lyragosa
        26
    lyragosa  
       Mar 31, 2016
    建议在进入之前弹出一个免责声明。
    不然可能会出人命的。

    “本应用运行中可能出现剧烈的色彩 /光线变化,请调亮屋内灯光,并与显示器保持一定距离,如有不适,请立刻关闭页面并咨询你当地的医疗机构。”
    cname
        27
    cname  
       Mar 31, 2016
    我也有点闪烁
    300
        28
    300  
       Mar 31, 2016
    这是你发的?
    300
        29
    300  
       Mar 31, 2016
    如果不是的话那就是被盗用了
    renzhn
        30
    renzhn  
    OP
       Mar 31, 2016
    @winterbells 这个人在源码里还好留了标记: view-source:http://www.bilifuli.com/451.html 第四行
    我要不要在源码里加个 LICENSE ,加了好像也没什么卵用...
    300
        31
    300  
       Mar 31, 2016
    @renzhn 需要删帖吗?我觉得他还有推广的嫌疑
    renzhn
        32
    renzhn  
    OP
       Mar 31, 2016
    @winterbells 资辞,他明明可以引用原 URL 呀
    jk2K
        33
    jk2K  
       Mar 31, 2016
    怎么会闪烁
    300
        34
    300  
       Mar 31, 2016
    @renzhn
    done !
    你这网页好像有 bug ,从别的标签页切过来的时候会一直闪
    renzhn
        35
    renzhn  
    OP
       Mar 31, 2016
    @winterbells 这个 bug 是由于切到别的页面过后脚本仍然会在跑导致的,我还不知道怎么解决
    SvenWong
        36
    SvenWong  
       Mar 31, 2016
    干嘛要学一个老者说话
    ipeony
        37
    ipeony  
       Mar 31, 2016
    那个闪的效果是故意的还是我的问题。。。
    oott123
        38
    oott123  
       Mar 31, 2016
    关于脚本运行的问题,我没有看楼主的脚本,不过我猜可能是浏览器在后台的时候会把 setTimeout / setInterval 的间隔降低到 1000ms 一次导致的问题…
    tees
        39
    tees  
       Mar 31, 2016
    切换之后的确会狂闪一下。
    renzhn
        40
    renzhn  
    OP
       Mar 31, 2016
    @Exin
    @winterbells
    @ipeony
    @tees
    谢谢反馈, bug 已修,并且改善了 iOS Safari 的兼容性
    mailunion
        41
    mailunion  
       Mar 31, 2016
    闷声大发财
    RqPS6rhmP3Nyn3Tm
        42
    RqPS6rhmP3Nyn3Tm  
       Mar 31, 2016 via Android
    中文 webfont 可以试试百度前端团队出的 fontmin ,静态静态界面很好用。字体我记得是等线吧,就这几个字子集肯定不会超出 40 kb 。
    Fedor
        43
    Fedor  
       Mar 31, 2016   ❤️ 1
    吓得我关了 Chrome
    jas0ndyq
        44
    jas0ndyq  
       Mar 31, 2016
    猝不及防
    wjself
        45
    wjself  
       Mar 31, 2016
    噗…樓主,我可以用的東西麼?
    renzhn
        46
    renzhn  
    OP
       Mar 31, 2016
    @wjself 可以直接引用 URL ,你要干嘛呀?
    wjself
        47
    wjself  
       Mar 31, 2016
    @renzhn 我可以抄袭么?(直接拿到自己的站点什么的…
    renzhn
        48
    renzhn  
    OP
       Mar 31, 2016
    @wjself I'M ANGRY !你这样子是不行的!
    wjself
        49
    wjself  
       Mar 31, 2016
    @renzhn 嗯,好吧…对不住咯…
    nayuxuohz
        50
    nayuxuohz  
       Mar 31, 2016
    丧心病狂点 背景色动画和文字动画都可以 css 做啦
    jinwyp
        51
    jinwyp  
       Mar 31, 2016
    那个 css loading 的动画怎么做的?
    renzhn
        52
    renzhn  
    OP
       Mar 31, 2016
    @jinwyp 无可奉告
    Garantion
        53
    Garantion  
       Mar 31, 2016
    Abrupt MO is not recommended!
    guoyida
        54
    guoyida  
       Mar 31, 2016
    字体太丑了啊
    wjself
        55
    wjself  
       Mar 31, 2016
    @jinwyp 那個的話是用貝塞爾曲線做的 css3animate ,技術上並不難
    wm5d8b
        56
    wm5d8b  
       Mar 31, 2016
    interesting !
    好想 fork 一下
    wsph123
        57
    wsph123  
       Mar 31, 2016
    坐到一半就摸上了!
    wbsdty331
        58
    wbsdty331  
       Mar 31, 2016 via Android
    猝不及防
    hggg
        59
    hggg  
       Apr 1, 2016
    显示的内容好,你们啊总想搞个大新闻~好评!
    philobscur
        60
    philobscur  
       Apr 1, 2016
    右键之后 chrome 挂了...
    ChiangDi
        61
    ChiangDi  
       Apr 1, 2016 via Android
    I'm angry
    murmur
        62
    murmur  
       Apr 1, 2016
    纯 css 实现是坠吼的
    aitaii
        63
    aitaii  
       Apr 1, 2016
    一言不合就+1s
    emlcj
        64
    emlcj  
       Apr 1, 2016
    you can use css animation instead of js to change background
    cayley
        65
    cayley  
       Apr 1, 2016
    好屌哦
    sakeven
        66
    sakeven  
       Apr 1, 2016
    膜蛤
    yhyy135
        67
    yhyy135  
       Apr 1, 2016
    成功续 1s
    haogefeifei
        68
    haogefeifei  
       Apr 1, 2016
    怒看源码。。结果 +1s
    Shangxin
        69
    Shangxin  
       Apr 1, 2016
    当然资瓷啦
    ebony0319
        70
    ebony0319  
       Apr 1, 2016
    那些话怎么吊。
    lackar
        71
    lackar  
       May 28, 2016
    怎样做成屏保呢? Mac 上
    lackar
        72
    lackar  
       May 28, 2016
    可以不自动跳转微博吗?就可以当屏保了,如果还能自定义文字就更好了
    renzhn
        73
    renzhn  
    OP
       May 29, 2016
    @lackar 把网页存下来稍作修改即可,把"window.location = http://" 改为 wordIndex == 0 可实现不跳转
    lackar
        74
    lackar  
       May 29, 2016
    @renzhn 搞定!哈哈,不亦乐乎
    lackar
        75
    lackar  
       May 29, 2016
    @renzhn 是不跳转了,但怎么能回到第一个循环播放呢?
    renzhn
        76
    renzhn  
    OP
       May 29, 2016
    165 行:
    switchWord = function () {
    if (wordIndex >= words.length) {
    wordIndex = 0;
    }
    setWord();
    setTimeout(function () {
    wordIndex++;
    switchWord();
    }, wordDuration);
    };
    chshch
        77
    chshch  
       Sep 24, 2016
    为了表示支持,我花了 59 秒钟看了这个网页..... 口.口
    qgb
        78
    qgb  
       May 23, 2017
    @wsph123 吴思澎
    wsph123
        79
    wsph123  
       Jul 14, 2017
    @qgb 咦?
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   3254 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 147ms · UTC 13:49 · PVG 21:49 · LAX 06:49 · JFK 09:49
    ♥ Do have faith in what you're doing.