应个景，iOS7 theme for V2EX

动画

iOS7

效果

67 条回复 • 2014-05-01 10:30:57 +08:00

1

Livid

MOD

2013-09-22 19:07:53 +08:00 via iPhone

:-) 不错！

2

wang2191195

2013-09-22 19:09:00 +08:00

我喜欢这样的风格

3

loading

2013-09-22 19:11:23 +08:00

动画不错，赞

4

P233

OP

2013-09-22 19:11:24 +08:00

感谢各位支持 :)

5

alexrezit

2013-09-22 19:19:04 +08:00

做得很棒, 就是颜色太亮, 还是换回来了.

6

fangzhzh

2013-09-22 19:31:56 +08:00

1

真是很厉害赞!

7

megaforce

2013-09-22 20:09:58 +08:00 via Android

要怎么才能用？说超过4K了

8

Leo

2013-09-22 20:19:44 +08:00

赞一个

9

itommy

2013-09-22 20:20:45 +08:00

稍微有点刺眼但还是很赞

10

fangzhzh

2013-09-22 20:22:38 +08:00

1

@megaforce 压缩, gist上貌似有说明

11

P233

OP

2013-09-22 20:28:51 +08:00

1

@alexrezit
@itommy 平时只开 3-4 格亮度，常年成习惯了，所以... XD

@megaforce 要压缩 CSS， gist 页面给出了地址，方便自定义，比如 75 行载入 retina 图片，或者直接去掉 188 行后面的动画效果

一个 downside 是，像 http://v2ex.com/go/nodejs 这个节点的自定义样式就被覆盖了

@fangzhzh :)

12

xmbaozi

2013-09-22 20:31:03 +08:00

用上了，特地回来赞一个

13

ushuz

2013-09-22 20:32:47 +08:00 via iPhone

看起来很不错〜

14

egen

2013-09-22 20:49:46 +08:00

动态效果很赞

15

megaforce

2013-09-22 20:56:23 +08:00

@P233
@fangzhzh

谢谢。已经用上了。不错

16

mille

2013-09-22 21:00:50 +08:00

已使用，灰常不错

17

iZr

2013-09-22 21:29:33 +08:00

不错啊.~~~~

18

devon

2013-09-22 22:20:12 +08:00

Safari下效果很好，赞一个

19

aerolqr

2013-09-22 22:32:27 +08:00

很赞

20

SoberZhou

2013-09-22 22:38:08 +08:00

赞！

21

anson0370

2013-09-22 22:38:36 +08:00

2

fork 了一发楼主的 gist ，改了下 header 和 search ，顺便去掉了货币的渐变背景

https://gist.github.com/anson0370/6660431

22

anson0370

2013-09-22 22:39:22 +08:00

oh shit…… 忘了 gist 会被转换出来…… 好长啊……

23

Hysteria

2013-09-22 22:43:10 +08:00

用上了确实很漂亮，还有动画效果，赞!

24

JoyNeop

2013-09-22 22:45:02 +08:00

我的狗眼……

25

underone

2013-09-22 22:46:31 +08:00

不错挺好玩的:)

26

ouankou

2013-09-22 23:15:52 +08:00

用上了，很漂亮！不过把动画效果去掉了，有点晃眼。

27

Divil

2013-09-22 23:24:01 +08:00

正在使用。
很漂亮，很喜欢！

28

Livid

MOD

2013-09-22 23:24:15 +08:00

固定背景的一个问题就是在有些机器上会卡。

29

xiaoye5200

2013-09-23 00:45:57 +08:00

@Livid 可以加个主题按钮，大家投稿的主题随意切换

30

wzxjohn

2013-09-23 02:58:01 +08:00

确实很赞。但是动画实在有点晃眼。。。

31

P233

OP

2013-09-23 05:02:38 +08:00

@anson0370 参考一下，多谢

@Livid 固定背景卡顿的情况遇到的不太多，去掉 fixed 会不会有改善？

@JoyNeop
@ouankou
@wzxjohn 动画会有一段延时，因为是覆盖默认的样式，玩一下再把那节删了吧 :)

感谢各位 :)

32

ivanlw

2013-09-23 05:15:56 +08:00

求怎么压缩…………

33

P233

OP

2013-09-23 05:21:44 +08:00

@ivanlw 我找到了这个工具，还不错 http://cssminifier.com

34

laskuma

2013-09-23 08:00:51 +08:00

很棒！比上次发的那个为扁平而扁平的好太多了！

35

romotc

2013-09-23 08:09:13 +08:00

thinkpad r61表示先固定显示，再出个动画效果比较怪异。

36

evanchang

2013-09-23 09:08:16 +08:00

配色很赞，动画效果怪异+1

37

ameba

2013-09-23 09:15:49 +08:00

回来赞一个

38

qiuai

2013-09-23 09:21:17 +08:00

不错.用了..只是不喜欢哪个动画效果.

39

linchanx

2013-09-23 09:38:52 +08:00

不错哦赞一个谢谢

40

gangsta

2013-09-23 10:13:24 +08:00

屌!炸!天！

就是Win下略卡~

41

ivanlw

2013-09-23 10:20:28 +08:00

去掉动画效果，我简直爱上它了……比原来的好看多了~

42

gdzdb

2013-09-23 10:45:48 +08:00

已用上。

就是每次刷新页面都要先看到旧的皮肤，然后才能变，不过这不是css的问题了。

43

asca

2013-09-23 10:46:17 +08:00

超赞！

44

mopig

2013-09-23 10:56:29 +08:00

顶部的导航栏，每次都是先加载黑色，再变成白色～有没有办法把又黑又硬的给去掉？

45

cxshun

2013-09-23 10:59:14 +08:00

漂亮，顶一下楼主。
确实有上面其他朋友说的问题，无刷原来的CSS，再刷新一次。
@Livid 估计要瞧瞧，看是不是能搞到直接加载自定义CSS。

46

sobigfish

2013-09-23 11:11:38 +08:00

1

@cxshun Stylish这类的插件优先度要高些，可以试试

47

loryyang

2013-09-23 11:17:41 +08:00

赞的！动画特别好看

48

fork3rt

2013-09-23 11:34:00 +08:00

- - 换了之后好晕。。

49

akn8

2013-09-23 14:22:20 +08:00

赞~~

50

passluo

2013-09-23 14:25:59 +08:00

用上了，然后把动画去掉了。动画多了好累赘的感觉~

51

enson110

2013-09-23 14:57:36 +08:00

一开始有动画虽然很炫，但是也很卡，也许和机器网速等有关，去掉动画后，效果非常不错，感谢LZ。

52

chainkhoo

2013-09-23 15:03:47 +08:00

1

压缩后的CSS如下：

a:link,a:visited,a:active{color:#8e8d93;-webkit-transition:all .15s;-moz-transition:all .15s;-ms-transition:all .15s;-o-transition:all .15s;transition:all .15s}a.top:link,a.top:visited,a.top:active{color:#000;text-shadow:none}a.top:hover{color:#8e8d93;text-shadow:none}a.tab_current:link,a.tab_current:visited,a.tab_current:active{background-color:#f63b30}a.tab_current:hover{background-color:#f63b30}a.count_livid:link,a.count_livid:active{padding:0;width:30px;height:16px;border:2px solid #0c63ff;border-radius:16px;background:inherit;color:#0c63ff;text-align:center;font-size:12px;line-height:16px}a.count_livid:hover{background:#0c63ff;color:#fff}a.count_livid:visited{border-color:#8e8d93;color:#8e8d93}a.count_livid:visited:hover{border-color:#8e8d93;background-color:#8e8d93;color:#fff}a.tb:hover{background-color:#f63b30;color:#fff;text-shadow:none}.item_title a{color:#222}.gray a{color:#8e8d93!important}.header a{color:#f63b30}#Top{border-bottom:1px solid #cfcfcf;background-color:#f7f7f7;background-image:none;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}#Wrapper{background:url(http://p233.github.com/assets/codepen/v2ex-theme-bg/diamond.png) fixed}.box{overflow:hidden;border-bottom:0;border-radius:6px;background:rgba(255,255,255,.85);box-shadow:none;color:#222!important;text-shadow:none}.topic_content,.reply_content{color:#222!important}.cell{border-bottom:1px solid #eaeaea}.item{background:0}.topic_buttons{border-radius:0 0 5px 5px;background:0}.super.button,.normal.button{padding:5px 15px;border:0;background:#4ed34a;box-shadow:none;color:#fff;text-shadow:none;font-weight:400;-webkit-transition:all .15s;-moz-transition:all .15s;-ms-transition:all .15s;-o-transition:all .15s;transition:all .15s;-webkit-appearance:none}.super.button:hover,.normal.button:hover{border:0;background:#8e8d93;box-shadow:none;color:#fff;text-shadow:none;font-weight:400}.item_node{padding:5px 10px;border:0;border-radius:3px;background:#8e8d93;color:#fff!important}.item_node:hover{border:0;background:#4ed34a}.fade{color:#b5b5b5}.dock_area{background:#f7f7f7;background-image:none}.subtle{border-bottom:1px solid #eaeaea}.transparent{border:2px dashed rgba(0,0,0,.1)!important;background-color:transparent!important}.online{padding:2px 8px;background:#4ed34a;line-height:12px}img.avatar{-moz-border-radius:5px;border-radius:5px}.sl{padding:5px 8px;width:310px;border:0;background:#eee;box-shadow:none}.ml{width:316px;border:0;background:#eee;box-shadow:none}.sll,.mll,.mle{border:0;background:#eee;box-shadow:none}.sl:focus,.sll:focus,.ml:focus,.mll:focus,.mle:focus{outline:0;border:0;background:#fefefe;box-shadow:none;color:#353535}.topic_content .gist{width:660px!important}.reply_content .gist{width:610px!important}#Top,.box{opacity:0;-webkit-transform:scale(1.5,1.5);-moz-transform:scale(1.5,1.5);-ms-transform:scale(1.5,1.5);-o-transform:scale(1.5,1.5);transform:scale(1.5,1.5);-webkit-animation:zoom_out .5s ease forwards;-moz-animation:zoom_out .5s ease forwards;-ms-animation:zoom_out .5s ease forwards;-o-animation:zoom_out .5s ease forwards;animation:zoom_out .5s ease forwards}@-webkit-keyframes zoom_out{to{opacity:1;-webkit-transform:scale(1,1)}}@-moz-keyframes zoom_out{to{opacity:1;-moz-transform:scale(1,1)}}@-ms-keyframes zoom_out{to{opacity:1;-ms-transform:scale(1,1)}}@-o-keyframes zoom_out{to{opacity:1;-o-transform:scale(1,1)}}@keyframes zoom_out{to{opacity:1;transform:scale(1,1)}}

53

tension

2013-09-23 15:06:29 +08:00

删除动画很爽!

54

kenzi

2013-09-23 16:13:55 +08:00

用上了,来赞一个
不过有时候还是能看到原先的界面,然后刷新过来了..
@livid 能不能弄成个theme的功能,让大家制作,发布,选择?

55

loryyang

2013-09-23 17:19:54 +08:00

用了很久，依然感觉很爽，唯一的一个问题就是这个动画其实是刷新的，相当于重刷一次，不知道是不是有可能改进下。。

56

hewigovens

2013-09-23 17:28:05 +08:00

1

lz放一份到userstyles.org吧~

57

P233

OP

2013-09-23 17:36:04 +08:00

@romotc
@evanchang
@qiuai
@ivanlw
@mopig
@cxshun
@fork3rt
@passluo
@enson110
@tension
@kenzi
@loryyang
浏览器先应用默认 CSS 样式，然后再刷新自定义 CSS，所以看到的是先出默认主题再刷新自定义主题，以及先固定出现页面再更新动画效果的现象。如果 @Livid 能把自定义 CSS 写进 head 部分相信会改善这些问题，毕竟浏览器读 body 部分的 CSS 会 re-render page，这样对页面性能也是一点提升。

@sobigfish
@hewigovens
感谢推荐，刚刚知道这个网站，待会上传一份

@chainkhoo
多谢

58

P233

OP

2013-09-23 18:00:03 +08:00

@sobigfish
@hewigovens

已上传，去掉了动画效果

http://userstyles.org/styles/93279/ios7-theme-for-v2ex
如何将它指向给 V2EX 呢？点击 “Find more styles for this site” 时找不到这个样式

59

hewigovens

2013-09-23 18:01:35 +08:00

1

@P233 @-moz-document domain("v2ex.com") { /*你的css*/}

60

MingZhe

2014-04-30 10:15:17 +08:00

怎么去掉动画啊
@tension
@passluo
@enson110

61

P233

OP

2014-04-30 16:33:43 +08:00

@MingZhe 去掉 188 行后面的吧 https://gist.github.com/P233/6658661#file-ios7-theme-for-v2ex-L188

62

MingZhe

2014-04-30 17:27:02 +08:00

@P233 嗯，已经尝试出来了。。。感谢楼主分享

63

MingZhe

2014-04-30 17:58:11 +08:00

@P233 感觉上，背景加载有点慢。

64

P233

OP

2014-04-30 18:02:00 +08:00

@MingZhe 背景图片存放在 github pages 里，可以保存到其他地方，然后更改 CSS 中 url ，应该会比 github 快

65

MingZhe

2014-04-30 19:00:26 +08:00

@P233 Thanks，已经放到国内比较快的 CDN 上了。。。速度很好了。最近好多事情，真的有刺激到我好好学前端知识啊。。。

66

P233

OP

2014-04-30 19:44:11 +08:00

@MingZhe 当个乐趣学，挺有意思的:)

67

tension

2014-05-01 10:30:57 +08:00

@MingZhe ＝）