首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
V2EX  ›  分享创造

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

  •  5
     
  •   renzhn · 2016-03-31 12:23:24 +08:00 · 6182 次点击
    这是一个创建于 810 天前的主题,其中的信息可能已经有所发展或是发生改变。
    第 1 条附言  ·  2016-03-31 15:09:51 +08:00
    2.0: 加入了一个 CSS 实现的 Metro Loading Icon
    79 回复  |  直到 2017-07-14 11:17:20 +08:00
        1
    VmuTargh   2016-03-31 12:27:29 +08:00
    暴力膜蛤不可取, 无形膜蛤最续命!
        2
    czmecho   2016-03-31 12:30:03 +08:00 via Android
    原来是膜法师的教徒。
        3
    Phariel   2016-03-31 12:32:40 +08:00
    为了 url +1s
        4
    jkjoke   2016-03-31 12:33:51 +08:00
    兹慈
        5
    ck65   2016-03-31 12:43:32 +08:00 via iPhone
    这个命续得我给九分!
        6
    fy   2016-03-31 12:55:22 +08:00
    膜的飞起,+1s
        7
    ericls   2016-03-31 13:04:02 +08:00
    OP 搞的这个东西啊 excited !
        8
    xlvecle   2016-03-31 13:40:07 +08:00
    天若有情天亦老, 你这一弄又一秒
        9
    Twinkle   2016-03-31 13:45:40 +08:00
    +1s
        10
    BOYPT   2016-03-31 13:46:17 +08:00
    蛤蛤蛤 excited
    不过字体不像,可以引入 webfont 改改
        11
    eastpiger   2016-03-31 13:47:45 +08:00
    打开之后先右键源代码、然后默默滚回去认真复习了一遍
        12
    zhujinliang   2016-03-31 13:56:50 +08:00
    看的我两腿不由自主地跑了起来
        13
    v1024   2016-03-31 14:21:14 +08:00
    楼主 js 写的不错。
        14
    pec   2016-03-31 14:25:37 +08:00
    有花屏闪屏 bug
        15
    hjc4869   2016-03-31 14:33:24 +08:00
    其实那个第一次登录的颜色渐变 UI 本来就是 HTML+js 写的(
        16
    lution   2016-03-31 14:57:03 +08:00
    @pec 我还以为是故意的
        17
    renzhn   2016-03-31 15:00:23 +08:00
    @BOYPT 中文 Webfont...?
    @pec patch welcome
    @hjc4869 消息来源?
        18
    viator42   2016-03-31 15:05:25 +08:00
    现在的年轻人,说着说着就膜起来了
        19
    irainsoft   2016-03-31 15:11:01 +08:00
    暴力膜蛤不可取
        20
    iloveayu   2016-03-31 15:21:22 +08:00
    这都可以膜,也是醉了。。。
        21
    hjc4869   2016-03-31 15:22:25 +08:00
    @renzhn C:\Windows\System32\oobe\FirstLoginAnim.html
    当然这个用浏览器是跑不动的……
        22
    renzhn   2016-03-31 15:24:42 +08:00
    @hjc4869 长姿势
        23
    renzhn   2016-03-31 15:25:49 +08:00
    @pec 你不会是硬件带不动导致的闪屏吧...我这边是由于切到别的页面过后脚本仍然会在跑导致的,我还不知道怎么解决
        24
    Exin   2016-03-31 15:36:09 +08:00
    +1s

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

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