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

CSS

Windows

放宽

界面

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

OP

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

OP

2016-03-31 15:24:42 +08:00

@hjc4869 长姿势

23

renzhn

OP

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

OP

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

OP

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

OP

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

OP

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

RqPS6rhmP3Nyn3Tm

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

OP

2016-03-31 17:30:01 +08:00

@wjself 可以直接引用 URL ，你要干嘛呀？

47

wjself

2016-03-31 17:32:01 +08:00

@renzhn 我可以抄袭么？(直接拿到自己的站点什么的…

48

renzhn

OP

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

OP

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

OP

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

OP

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

2017-07-14 11:17:20 +08:00

@qgb 咦？