应个景,iOS7 theme for V2EX

2013-09-22 18:55:19 +08:00
 P233
大神们见笑了,折腾着玩

截图:


自定义 CSS :
https://gist.github.com/P233/6658661

最下面有节动画效果,写进 head 效果才好,另外 IE9 不要使用这段动画,会隐藏所有内容。有些地方没想好,过段时间再做修改。


顺道附上刚刚完成的 iOS7 动画效果: http://cdpn.io/Gluka
7223 次点击
所在节点    分享创造
67 条回复
ivanlw
2013-09-23 10:20:28 +08:00
去掉动画效果,我简直爱上它了……比原来的好看多了~
gdzdb
2013-09-23 10:45:48 +08:00
已用上。

就是每次刷新页面都要先看到旧的皮肤,然后才能变,不过这不是css的问题了。
asca
2013-09-23 10:46:17 +08:00
超赞!
mopig
2013-09-23 10:56:29 +08:00
顶部的导航栏,每次都是先加载黑色,再变成白色~ 有没有办法把又黑又硬的给去掉?
cxshun
2013-09-23 10:59:14 +08:00
漂亮,顶一下楼主。
确实有上面其他朋友说的问题,无刷原来的CSS,再刷新一次。
@Livid 估计要瞧瞧,看是不是能搞到直接加载自定义CSS。
sobigfish
2013-09-23 11:11:38 +08:00
@cxshun Stylish这类的插件优先度要高些,可以试试
loryyang
2013-09-23 11:17:41 +08:00
赞的!动画特别好看
fork3rt
2013-09-23 11:34:00 +08:00
- - 换了之后好晕。。
akn8
2013-09-23 14:22:20 +08:00
赞~~
passluo
2013-09-23 14:25:59 +08:00
用上了,然后把动画去掉了。动画多了好累赘的感觉~
enson110
2013-09-23 14:57:36 +08:00
一开始有动画虽然很炫,但是也很卡,也许和机器网速等有关,去掉动画后,效果非常不错,感谢LZ。
chainkhoo
2013-09-23 15:03:47 +08:00
压缩后的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)}}
tension
2013-09-23 15:06:29 +08:00
删除动画很爽!
kenzi
2013-09-23 16:13:55 +08:00
用上了,来赞一个
不过有时候还是能看到原先的界面,然后刷新过来了..
@livid 能不能弄成个theme的功能,让大家制作,发布,选择?
loryyang
2013-09-23 17:19:54 +08:00
用了很久,依然感觉很爽,唯一的一个问题就是这个动画其实是刷新的,相当于重刷一次,不知道是不是有可能改进下。。
hewigovens
2013-09-23 17:28:05 +08:00
lz放一份到userstyles.org吧~
P233
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
多谢
P233
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” 时找不到这个样式
hewigovens
2013-09-23 18:01:35 +08:00
@P233 @-moz-document domain("v2ex.com") { /*你的css*/}
MingZhe
2014-04-30 10:15:17 +08:00
怎么去掉动画啊
@tension
@passluo
@enson110

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/83271

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX