网页渐变效果

2009/10/11 Add 63 comments |

  用IE进出小博时有种渐变效果,这两天连续有同学问到这个问题,我就顺便介绍一下,免得我每次都要贴代码解释,虽然我很喜欢解释,我喜欢别人从我这里获得满足感。 ;-)

  在meta标签里用 blendTrans 和 RevealTrans 这两种滤镜可以产生渐变效果。滤镜嘛,IE专用,所以其他浏览器现在都可以回家吃饭去了。把下面其中一段代码放到网页的<body></body>之间,WordPress的话放 header.php 就好:

No.1

<meta http-equiv="Page-Enter" Content="blendTrans(Duration=0.2)"></meta>
<meta http-equiv="Page-Exit" Content="blendTrans(Duration=0.2)"> </meta>

No.2

<Meta http-equiv="Page-Enter" Content="revealTrans(duration=x, transition=y)">
<Meta http-equiv="Page-Exit" Content="revealTrans(duration=x, transition=y)">

  其中,Page-Enter和Page-Exit分别表示进入和离开网页。用No.2的同学把x和y换成你的参数。

  Duration   表示滤镜特效的持续时间(单位:秒)
  Transition 滤镜类型。表示使用哪种特效,取值为0-23。

0 矩形缩小
1 矩形扩大
2 圆形缩小
3 圆形扩大
4 下到上刷新
5 上到下刷新
6 左到右刷新
7 右到左刷新
8 竖百叶窗
9 横百叶窗
10 错位横百叶窗
11 错位竖百叶窗
12 点扩散
13 左右到中间刷新
14 中间到左右刷新
15 中间到上下
16 上下到中间
17 右下到左上
18 右上到左下
19 左上到右下
20 左下到右上
21 横条
22 竖条
23 以上22种随机选择一种

  我比较低调,所以用的是No.1 ;-)    感兴趣的同学可以回去自己试试No.2的效果。

PS:

  今天把顶部的面板去掉了,原因是我觉得它有些影响整体的美观。呃,和功能相比,我更加重视外观。而且貌似除了我之外,几乎没人会用到那个地方。

  去掉面板之后把订阅按钮安排在了导航栏的右侧,正宗的E7的订阅图标位置,呵呵。没订阅的同学可以顺便点点 ;-)

PS1:

  最近增加了两个页面,不知道有同学发现没有,Joke  和 Video

  Joke,其实是安装的另外一个WordPress,新的模板,用来收集一些好玩儿的文字,成人内容居多,小朋友请自行绕道。

  Video,是我的视频收集页面,一些只看一遍觉得不过瘾的视频。

PS2:

  应该也同学有这样的感受,时不时会有人来问“你这里、这里和这里怎么实现的啊”之类的问题。我是一个小小菜鸟,不懂什么php、js,甚至连css、html都没真正学过。可恨的是,我对别人的新奇功能还特别感兴趣,这时我会首先翻翻他的文章,看看有没有相关的介绍教程,或者查看下他js、css,找点相关线索,实在没办法才会请教。

  从上篇文章列出我的使用的插件后,加上我陆陆续续介绍过的功能,现在我的博客已经没有秘密了。另外如果你对这个主题的功能感兴趣的话,请参考iNove,如果你喜欢它的外观的话,请移步E7  :razz:

  当然了,有问题还可以随时问我,只要我知道的,保证也会让你知道。话说,我喜欢别人从我这里获得满足感。


呃,其实这篇文章好水。

署名-非商业性使用-相同方式共享
  1. MuMu'S #comment-1698
    2009/10/11 15:53  #1

    抢了沙发再看。

  2. MuMu'S #comment-1699
    2009/10/11 15:55  #2

    这个文章把你博客最后一层纱也揭开了啊

  3. whisperer #comment-1700
    2009/10/11 15:59  #3

    @MuMu'S
    我这儿沙发不用抢 :cry:

    @MuMu'S
    应该是了 以后就不折腾这些了 :idea:

  4. Louis Han #comment-1701
    2009/10/11 16:01  #4

    我回家吃饭了。。
    顺便去看看joke

  5. whisperer #comment-1702
    2009/10/11 16:04  #5

    @Louis Han
    对了 我好几天没更新了 更新几条去 ;-)

  6. 万戈 #comment-1703
    2009/10/11 16:12  #6

    我也加了这个效果,遗憾的是FF不支持滤镜。。。

  7. 超人 #comment-1704
    2009/10/11 16:20  #7

    我用的也是. FF好像要用js :twisted:

  8. whisperer #comment-1706
    2009/10/11 16:26  #8

    @万戈
    这个也就玩玩儿而已 没什么实际用途,呵呵。

  9. whisperer #comment-1707
    2009/10/11 16:27  #9

    @超人
    嗯 js还是算了,对吧

  10. wuleilei #comment-1710
    2009/10/11 16:39  #10

    呵呵,没用过,有机会一定试试~~

  11. whisperer #comment-1714
    2009/10/11 16:59  #11

    @wuleilei
    还以为你们技术人员超级不屑于这种…… :oops:

  12. accecc #comment-1715
    2009/10/11 17:14  #12

    我很羡慕你啊

  13. 久酷 #comment-1717
    2009/10/11 17:34  #13

    以前加过......好像只有IE下有效..............

  14. feicun #comment-1718
    2009/10/11 17:58  #14

    我用IE6没看出效果……你那个PS2里面的joke和video挺有意思的 ;-)

  15. A.shun #comment-1719
    2009/10/11 18:03  #15

    你主题已经玩得很好了,
    话说我很久没折腾wp了

  16. 左岸读书 #comment-1720
    2009/10/11 18:37  #16

    IE终于强大的一次~
    好多的PS,因为热心~

  17. canaan #comment-1727
    2009/10/11 22:32  #17

    试试去

  18. whisperer #comment-1731
    2009/10/11 23:56  #18

    @accecc
    也没什么 :oops:

    @久酷
    是的,IE下才行,其他浏览器回家吃饭去了 :mrgreen:

    @feicun
    IE6应该也没什么问题呀。可能是我设的时间比较短,也可能你的IE6抽风了,换IE8吧 ;-)

    @A.shun
    我比较无聊,经常会突然看哪儿不顺眼,然后就不改不行,呵呵。我以后也不折腾wp了,差不多了。

    @左岸读书
    呵呵 其实如果不是想说PS里的内容,这篇文章我也就不会写了 :smile:

    @canaan
    嗯 虽然只有IE下有效果,不过还是能给看到的同学一些惊喜的, 用IE的还是挺多的

  19. feicun #comment-1733
    2009/10/12 00:03  #19

    我的IE 6不是为了用的,是为了做测试用的……

  20. whisperer #comment-1735
    2009/10/12 00:06  #20

    @feicun
    噢 我用的IETester来测试效果,也还可以 基本能模拟出IE6来

  21. 游侠 #comment-1736
    2009/10/12 00:08  #21

    whisperer 的精神很伟大。。 :lol:

    话说 我那也折腾差不多了。

  22. 游侠 #comment-1737
    2009/10/12 00:10  #22

    噢,对了 现在还有你右下角的那个返回顶部的三角。。。。。

    这个能说下么 :grin:

  23. whisperer #comment-1738
    2009/10/12 00:35  #23

    @游侠
    哈哈。这就伟大了 ;-)

    嗯,右下角就是iNove普通的返回顶部,css控制一下位置就可以了
    http://www.whisperer.name/2009/09/improve-the-google-custom-search-results-of-inove/comment-page-1/#comment-694

    你怎么不留链接?

  24. 游侠 #comment-1739
    2009/10/12 00:38  #24

    @whisperer

    只顾打字忘记留链接了。。 哈哈

    这就去折腾下。。 :grin:

  25. 游侠 #comment-1740
    2009/10/12 00:41  #25

    @whisperer

    右下角的那个图片共享下吧 :grin:

  26. whisperer #comment-1741
    2009/10/12 00:42  #26

    @游侠
    你可以右键保存啊。。 :!:

  27. 游侠 #comment-1742
    2009/10/12 00:44  #27

    :twisted: 保存的不是图片。。。是个txt文本。。。

  28. keelii #comment-1745
    2009/10/12 06:56  #28

    嗯。IE的滤镜实在是令人兴奋,不过相当占系统资源学习一下可以不可常用。

  29. SMILE #comment-1747
    2009/10/12 07:35  #29

    :lol: 我不问你什么,只要你把FTP账号密码告诉我就可以

  30. 菠萝 #comment-1749
    2009/10/12 07:56  #30

    看着IE外的浏览器没有效果。

  31. an9 #comment-1750
    2009/10/12 08:46  #31

    效果虽然很好,但是很不实用啊。

  32. Mr.坏 #comment-1751
    2009/10/12 10:03  #32

    既然我问过这个问题,现在就来顶一下。其实当初在学html的时候有接触过这种淡入淡出的代码,可现在就感觉你这里的效果不一样,呵呵。加上现在使用WP,什么都插件,X啊X的,插晕了还以为这种效果也是用了什么插件,病根啊!

  33. sleepy #comment-1752
    2009/10/12 10:14  #33

    不怎么用IE,没看到效果

  34. 小新说 #comment-1753
    2009/10/12 10:17  #34

    服务器终于转移完成,网站也可正常访问了! :|

  35. joe #comment-1754
    2009/10/12 10:19  #35

    怕怕,我怕折腾!!好高深! :o

  36. joe #comment-1755
    2009/10/12 10:30  #36

    我懒到看都不想看代码。为什么呢现在我成这样了! :x

  37. whisperer #comment-1757
    2009/10/12 13:07  #37

    @keelii
    嗯 我基本不用,也就是这儿用了下,影响不大~ :grin:

    @SMILE
    这是为什么呐 :o

    @菠萝
    保证不会有效果 :razz:

    @an9
    效果很好就够了 本来就是额外的特效,当然没什么实用价值,不过对用IE的同学来说,用户体验非常不错。

    @Mr.坏
    对 现在插件实在是太多了 各种功能, 有人统计过wp的插件数量么?在wordpress.org上提交的就已经将近7,000了。

    @sleepy
    其实我感觉IE的滤镜是一个很不错的东西诶,如果能开发出其他浏览器也支持的类似功能就好了。

    @小新说
    嗯 正常访问了 快更新呐 ;-)

    @joe
    没什么高深的,你这样的技术流,不看代码怎么行 :lol: 我不看还可以 :evil:

  38. Lc. #comment-1764
    2009/10/12 14:50  #38

    其实我对你博客的渐变效果一直都很感兴趣的. 没问而已. 没想到你放了出来. 哈哈. ;-)

  39. whisperer #comment-1765
    2009/10/12 14:59  #39

    @Lc.
    哈哈 我的博客高清无码了现在

  40. 要饭的 #comment-1769
    2009/10/12 16:33  #40

    这个效果不错,等需要的时候也弄一个

  41. lonelytraveler #comment-1777
    2009/10/12 18:55  #41

    我用优智的北京四线主机,安装WordPress时就没收到注册邮件,现在评论也收不到邮件。。。。晕了。。。。mail to commmenter 也没用,但是这个插件后台有个测试发送却可以 :smile:

  42. lonelytraveler #comment-1778
    2009/10/12 18:56  #42

    @lonelytraveler
    测试一下你的。。。。 :grin:

  43. whisperer #comment-1779
    2009/10/12 18:56  #43

    @lonelytraveler
    我用的也是这个主机 没任何问题呀。

  44. 老饕 #comment-1806
    2009/10/12 22:21  #44

    一直用的Foxfire~~没注意到啊~呵呵

  45. whisperer #comment-1809
    2009/10/12 22:25  #45

    @老饕
    话说 fire不能在fox后面,不然烧着尾巴啦。

  46. 亦歌 #comment-1830
    2009/10/12 23:47  #46

    不错,果然很有效果。

  47. lonelytraveler #comment-1840
    2009/10/13 01:30  #47

    @whisperer
    。。。。果然,我没收到你的邮件。。。。原因我已找到,因为我用了QQ的域名邮箱。。。换个邮箱即可正常收到。。。

  48. wuleilei #comment-1849
    2009/10/13 14:40  #48

    @whisperer
    怎么会呢,只要是自己不懂得东西都会感兴趣,O(∩_∩)O~

  49. whisperer #comment-1852
    2009/10/13 19:46  #49

    @亦歌
    这时候应该kiss下ie,呵呵

    @lonelytraveler
    QQ邮箱有时候能收到,有时候收不到,不知道为什么

  50. Konecy #comment-1856
    2009/10/13 20:47  #50

    @whisperer
    呵呵,今天我让同学Mail给我了,已经用上了,嘿嘿,不过还是谢谢你哈·~~~~~~

1 2 64
  1. 2009/10/30 14:47 | #1
  2. 2011/11/14 16:45 | #2
  3. 2012/01/07 09:04 | #3
  4. 2012/01/15 16:34 | #4