[译] CSS3 Transitions, Transforms 和 Animation 详解

原文地址：http://css3.bradshawenterprises.com/

转载自：http://sev7n.net/index.php/473.html

 

简介

本文 demo 主要演示了 CSS transitions, transforms (2D and 3D) 和 animations 属性，在当前(2010年11月)，包括IE9在内的所有浏览器都支持了 2D transforms，transitions 也在除了IE内核外的所有浏览器（甚至在在开发版本）都可以使用了，而 3D transforms 和 animations 只有 Safari 和 Chrome 才支持。当然，大部分 demo 的浏览器降级都很优雅，即使还在用骨灰级浏览器你也可以在你的网站里使用 demo 里的代码，不过当然，动画你就没办法看到了。但是 3D transforms 一般没办法很好的优雅降级，不支持就是不支持，如果你要用还是注意点吧。

虽然我在 demo 里用 jQuery 添加和删除 class 来做了一些交互，但是所有的动画都不是用 javascript 实现的。而且在有些情况下你也可以用 :target 伪类选择器来代替 javascript，但是为了代码简洁我这里并没有使用。

如果你是用 iPhone OS，把 hover 出现的地方用 touch 和 hold 替换就可以了。（想知道怎么做类似的效果就仔细看下头部的 script ）

为了使例子简单，在大部分的 transitions 中我只是用了两张图片来做效果演示，大部分 demo 都可以把图片换成更多好玩的内容(视频、文字等等)

值得注意的是这些动画在 iPhone OS 里都做了硬件加速，如果你正在开发一个手机站点建议你果断使用这些动画。

为了更方便的查看和复制源代码，我把 style 和 script 标签放在了每个 demo 前面的 section 里。这虽然是规范很不建议的，但是相信这会给你带来更多直接的好处，方便多了吧~（果然是用户第一啊）

点击 demos 页面 你可以找到更多demo，不过注释相对会少点。

目录

1. 怎么使用 transitions
2. 怎么使用 transforms
3. 怎么使用 animations
4. 图片切换
   1. hover 切换
   2. 点击切换
   3. 定时切换
   4. 不只是渐隐了
5. 内容轮播
   1. transitions 轮播
   2. transitions + translations 轮播
6. 内容翻转
7. 手风琴
8. 参考

怎么使用 transition

如果你以前没有用过 transition, 简短介绍下先

如果你想在一个节点有动画，添加下面的CSS:

1. #id_of_element {  
2.     -webkit-transition: all 1s ease-in-out;  
3.     -moz-transition: all 1s ease-in-out;  
4.     -o-transition: all 1s ease-in-out;  
5.     transition: all 1s ease-in-out;  
6. } 

因为浏览器厂商不一样，这里会有很多除了前缀外重复的东西 – 直到规范定稿前应该一直都会这样。如果你不想写这么多麻烦的东西，有很多工具可以帮你解决， 比如用 CSS Scaffold 你只要写一种混合东西就可以避免写这么多重复内容了.

transition 的语法很简单 – 动画属性, all 或者 border-radius 或者 color 或者其他东西, 动画时间, 然后是动画定时函数. 下面会说到动画定时函数的选项.

Demo

Ease

Ease In

Ease Out

Ease In Out

Linear

鼠标移上来

实际上不管在任何时间通过 hover 或者 javascript 设置新 class 来改变动画的不同属性，它都会平稳的从一个动画转换到另外一个。

你可以从这里找到更详细的资料 W3C specification.

怎么使用 transform

transform 共有两种分类 – 2D transforms 和 3D transforms.在2010年5月以前, 3D transforms 只有 Safari 才支持(包括 PC端和手机端). 而 2D transforms 已经被广泛支持了.

2D 例子

这个 div 被扭曲了 – 但是文本仍然可以选择.这个 div 被缩放了 – 同样, 文本仍然是原来的文本.这个 div 被旋转了 – 但是你仍然可以看懂!这个 div 做了 10px 向下 translated 和 20px across.这个 div 做了上面4种全部的效果!

在去掉不同浏览器的前缀后这些效果的代码大概就是这样了:

1. #skew {  
2.     transform:skew(35deg);    
3. }  
4. #scale {  
5.     transform:scale(1,0.5);   
6. }  
7. #rotate {  
8.     transform:rotate(45deg);      
9. }  
10. #translate {  
11.     transform:translate(10px,20px);  
12. }  
13. #rotate-skew-scale-translate {  
14.     transform:skew(30deg) scale(1.1,1.1) rotate(40deg) translate(10px,20px);  
15. } 

当然这些效果你也可以用transitions来实现动画 – 把鼠标移到下面的 div 看看.

鼠标一上来我就要旋转着变大了!

3D 例子

3D transforms 你只有在 Safari 和 Chrome 下才看的到效果.

1

2

3

4

5

6

X rotation (23 deg)

Y rotation (53 deg)

Z rotation (12 deg)

Perspective (43)

玩玩这个控制器 – 这里没有运用 transition , 只是做了滑动条来控制它. 请仔细看我只是用 javascript 来更新 css 的值 – 所有效果需要的数据全是浏览器自己算出来的.

怎么使用 animations

在2010年5月以前, 只有Webkit内核的浏览器才支持animations.

CSS animations 在2007年被Webkit浏览器引入，直到写这篇文章的时候仍然没有其他任何的浏览器来支持. Firefox 在执行起来有一个 bug, 但是它没有分配给任何人.

在 2009 年 animations 被写进了W3C网站上的 工作草案 .

在使用 CSS animation 前, 你首先得为动画指定一些关键帧 – 在一定时间时节点应该是什么样的效果，然后浏览器将会帮你做渐变来实现这个动画.

Demo

鼠标来吧

Code

这段代码的有意思之处就在于下面这段CSS:

1. @-webkit-keyframes resize {  
2.     0% {  
3.         padding: 0;  
4.     }  
5.     50% {  
6.         padding: 0 20px;  
7.         background-color:rgba(255,0,0,0.2);       
8.     }  
9.     100% {  
10.         padding: 0 100px;  
11.         background-color:rgba(255,0,0,0.9);  
12.     }  
13. }  
14.       
15. #box {  
16.     -webkit-animation-name: resize;  
17.     -webkit-animation-duration: 1s;  
18.     -webkit-animation-iteration-count: 4;  
19.     -webkit-animation-direction: alternate;  
20.     -webkit-animation-timing-function: ease-in-out;  
21. }    

请注意，4个迭代（-webkit-animation-iteration-count: 4;）就可以让这个框转变2次 – 动画从前往后，然后再从后往前，周而复始就实现了这个动画效果

只要你喜欢你可以定义无数个关键帧和任何关键帧之间的时间间隔.

只要将 animation-iteration-count 设置成 infinite, 动画就可以永远执行下去了.

Demo

hover 发光

实现这个动画的关键在于小的细节，不像上面框动那么大幅度!

图片切换

这个功能一般主要用于画廊的一部分，或者显示产品的详细内容. 传统的方法一般是用javascript控制内容的透明度 – 用 CSS transitions 就很简单了，你也很容易拿到自己的站点里去.

Demo 1 – 鼠标移上去切换图片 (transitions)

方案

1. 把一张图片放到另一张的上面
2. 当鼠标移上去的时候改变最上面图片的透明度

Demo

Code

首先写HTML结构. 没有调用CSS的时候你只能看到两张图片. 记得给使用的图片添加alt替换文字.

1. <divid=“cf”> 
2.     <imgclass=“bottom”src=“http://sev7n.net/demo/css3/images/Stones.jpg”/> 
3.     <imgclass=“top”src=“http://sev7n.net/demo/css3/images/Summit.jpg”/> 
4. </div> 

然后 CSS:

1. #cf {  
2.     position:relative;  
3.     height:281px;  
4.     width:450px;  
5.     margin:0 auto;    
6. }  
7. #cf img {  
8.     position:absolute;  
9.     left:0;  
10.     -webkit-transition: opacity 1s ease-in-out;  
11.     -moz-transition: opacity 1s ease-in-out;  
12.     -o-transition: opacity 1s ease-in-out;  
13.     transition: opacity 1s ease-in-out;  
14. }  
15.    
16. #cf img.top:hover {  
17.     opacity:0;  
18. }    

Demo 2 – 点击按钮的时候切换图片(transitions)

方案

同样以前我们可能会用 :hover 来实现样式变化. 但是这里我用 jQuery 来添加和删除class，只是方便大家理解, 当然你也可以用源生的javascript.

Demo

点我就可以切换图片了

Code

首先HTML，同样没有CSS你只能看到两张图片

1. <divid=“cf2″class=“shadow”> 
2.     <imgclass=“bottom”src=“http://sev7n.net/demo/css3/images/Stones.jpg”/> 
3.     <imgclass=“top”src=“http://sev7n.net/demo/css3/images/Summit.jpg”/> 
4. </div> 
5. <pid=“cf_onclick”>Click me to toggle</p> 

然后写 CSS. 添加一个透明的class.

1. #cf2 {  
2.     position:relative;  
3.     height:281px;  
4.     width:450px;  
5.     margin:0 auto;  
6. }  
7. #cf2 img {  
8.     position:absolute;  
9.     left:0;  
10.     -webkit-transition: opacity 1s ease-in-out;  
11.     -moz-transition: opacity 1s ease-in-out;  
12.     -o-transition: opacity 1s ease-in-out;  
13.     transition: opacity 1s ease-in-out;  
14. }  
15.    
16. #cf2 img.transparent {  
17.     opacity:0;  
18. }  
19. #cf_onclick {  
20.     cursor:pointer;  
21. }    

然后是简短的JS. 请注意浏览器已经足够智能，它可以用新的属性来实现这个动画, 我并没有用javascript来实现(虽然同样也可以实现).

1. $(document).ready(function() {  
2.     $(“#cf_onclick”).click(function() {  
3.         $(“#cf2 img.top”).toggleClass(“transparent”);  
4.     });  
5. }); 

你可以在 更多图片 demo 里看到怎么用这个方法实现更多图片切换的方法.

Demo 3 – 用定时器来实现图片切换 (transitions 和 animations，只支持 Webkit)

又是2010年5月以前, 只有 webkit 内核浏览器才支持 – 我只写了在webkit内核浏览器下实现的代码,如果你用其他浏览器，你就会看不到这个效果。

方案

你也可以用Javascript定时切换class来实现效果 – 在老的浏览器里也可以看到图片切换的效果. 但是既然我们在往前看，我们就用CSS 关键帧来做做看.

1. 借用下 demo 1的代码
2. 用 CSS 关键帧定义最顶部图片的两种状态, 透明和不透明.
3. 设置动画的关键帧的参数.

Demo

每张图片显示9S之后就会切换到另外一张.

Code

所有的代码跟 Demo 1 一样, 我只是添加了一点 CSS

1. @-webkit-keyframes cf3FadeInOut {  
2.     0% {  
3.         opacity:1;  
4.     }  
5.     45% {  
6.         opacity:1;  
7.     }  
8.     55% {  
9.         opacity:0;  
10.     }  
11.     100% {  
12.         opacity:0;  
13.     }  
14. }  
15.    
16. #cf3 img.top {  
17.     -webkit-animation-name: cf3FadeInOut;  
18.     -webkit-animation-timing-function: ease-in-out;  
19.     -webkit-animation-iteration-count: infinite;  
20.     -webkit-animation-duration: 10s;  
21.     -webkit-animation-direction: alternate;  
22. } 

为了实现这个效果，我定义了4个关键帧，特别定义不管动画怎么样在开始的45%时间内都保持不透明，在最后的45%时间内保持透明。动画会周而复始一直循环下去，每个过程持续10S。简单点说，图片1先保持4.5S的不透明，然后在1S内变成透明, 在接下来的4.5S内图片2将会一直显示. 反复、循环，这样图片1和图片2就会交替下去显示，每次显示9S(4.5 x 2).

Demo 4 – 不只是渐隐了

这项技术不止是局限于渐隐，你几乎可以让所有的属性动起来。这里还有2个例子.

放大和缩小

Safari 不怎么支持，但是在 Chrome & Webkit 下效果很不错。

鼠标移上来吧

旋转

鼠标思密达

内容滑动

在画廊和显示更多内容的时候我们经常可以看到滑动门，一般也是用javascript逐步改变关键迭代的padding值来实现。 但是用javascript来实现的在手机端看起来可能会有点卡，在动画太快的时候可能还会丢失一些帧。CSS transitions 加 transforms 就可以很简单的做这样的效果.

在 demos 页面你可以看到一个更完整的例子 .

Demo 1 – 通过增加padding 来实现滑动 (transitions)

在这篇文章里你可以看到: 跨浏览器实现滑动门.

方案

1. 定义一个超出隐藏的容器.
2. 在容器里定义另外一个跟所有图片大小一样的容器（容器2）.
3. 在容器2里,清除所有图片的padding和margin然后浮动
4. 点击控制按钮的时候，改变容器2的left定位来显示需要的图片.

Demo

图片 1图片 2图片 3图片 4

Code

首先, HTML:

1. <div id=“slide1_container”>  
2.     <div id=“slide1_images”>  
3.         <img src=“http://sev7n.net/demo/css3/images/Cirques.jpg” />  
4.         <img src=“http://sev7n.net/demo/css3/images/Clown-Fish.jpg” />  
5.         <img src=“http://sev7n.net/demo/css3/images/Stones.jpg” />  
6.         <img src=“http://sev7n.net/demo/css3/images/Summit.jpg” />        
7.     </div>  
8. </div>  
9. <p id=“slide1_controls”>  
10.     <span id=“slide1-1″>Image 1</span>  
11.     <span id=“slide1-2″>Image 2</span>  
12.     <span id=“slide1-3″>Image 3</span>  
13.     <span id=“slide1-4″>Image 4</span>  
14. </p>     

然后 CSS:

1. #slide1_controls span {  
2.     padding-right:2em;  
3.     cursor:pointer;  
4. }
5. #slide1_container {  
6.     width:450px;  
7.     height:281px;  
8.     overflow:hidden;  
9.     position:relative;  
10. }
11. #slide1_images {  
12.     position:absolute;  
13.     left:0px;  
14.     width:1800px;  
15.     -webkit-transition:all 1.0s ease-in-out;  
16.     -moz-transition:all 1.0s ease-in-out;  
17.     -o-transition:all 1.0s ease-in-out;  
18.     -transition:all 1.0s ease-in-out;  
19. }
20. #slide1_images img {  
21.     padding:0;  
22.     margin:0;  
23.     float:left;  
24. } 

同样，我用javascript给控制按钮绑定事件，我这里通过JS直接给容器添加了需要偏移的像素，当然也可以通过改变class来实现.

1. $(document).ready(function() {  
2.     $(“#slide1-1″).click(function() {  
3.         $(“#slide1_images”).css(“left”,“0″);  
4.     });  
5.     $(“#slide1-2″).click(function() {  
6.         $(“#slide1_images”).css(“left”,“-450px”);  
7.     });  
8.     $(“#slide1-3″).click(function() {  
9.         $(“#slide1_images”).css(“left”,“-900px”);  
10.     });  
11.     $(“#slide1-4″).click(function() {  
12.         $(“#slide1_images”).css(“left”,“-1350px”);  
13.     });  
14. }); 

这段JS可以写的更优化也可以面向对象，为了保持代码简单就先这样吧.

Demo 2 – 通过 translate (transitions 和 transforms)来实现滑动

提示: iphone OS给转换过渡动画做了硬件加速,translate 也成了一个很好实现滑动的选择.

方案

1. 跟demo 1一样，定义容器、超出隐藏
2. 在容器里定义另外一个跟所有图片大小一样的容器（容器2）.
3. 在容器2里,清除所有图片的padding和margin然后浮动
4. 就这里不同，点击控制按钮的时候不是改变容器2的left来显示需要的图片,而是 translate容器2.

Demo

图片 1图片 2图片 3图片 4

Code

几乎跟 Demo 1 一样, 只是JS有一点小区别: (不写那么多浏览器前缀了哈~)

1. $(document).ready(function() {  
2.     $(“#slide2-1″).click(function() {  
3.         $(“#slide2_images”).css(“-webkit-transform”,“translate(0, 0)”);  
4.     });  
5.     $(“#slide2-2″).click(function() {  
6.         $(“#slide2_images”).css(“-webkit-transform”,“translate(-450px, 0)”);  
7.     });  
8.     $(“#slide2-3″).click(function() {  
9.         $(“#slide2_images”).css(“-webkit-transform”,“translate(-900px, 0)”);  
10.     });  
11.     $(“#slide2-4″).click(function() {  
12.         $(“#slide2_images”).css(“-webkit-transform”,“translate(-1350px, 0)”);  
13.     });  
14. }); 

内容翻转

良好的翻转需要浏览器支持 3D Transform – 目前只有 Safari. 但是你仍然可以看到翻转的效果，只是效果没有在Safari里那么绚!（比如chrome下面翻转的时候边缘会有锯齿）

Demo 1 – 翻转图片到内容节点 (transitions 和 3d transforms)

还是2010年5月以前, 这个属性只有 Webkit 和 Safari 才支持, 桌面端和手机端都可以，其他所有的浏览器都没法看到效果.

方案

1. 在一个容器里把一张图片放到内容节点的上面.
2. 把这个容器放在一个定义了perspective的容器里.
3. 当鼠标移到外面容器的时候，让里面容器绕Y轴翻转.

Demo

这个属性对于显示图片详细内容很不错.

你可以放随便什么东西在这里.

Code

惯例, 结构先.

1. <divid=“f1_container”> 
2.     <divid=“f1_card”class=“shadow”> 
3.         <divclass=“front face”> 
4.             <imgsrc=“http://sev7n.net/demo/css3/images/Stones.jpg”/> 
5.         </div> 
6.         <divclass=“back face center”> 
7.             <p>This is nice for exposing more information about an image.</p> 
8.             <p>Any content can go here.</p> 
9.         </div> 
10.     </div> 
11. </div> 

然后 CSS

1. #f1_container {  
2.     position: relative;  
3.     margin: 10px auto;  
4.     width: 450px;  
5.     height: 281px;  
6.     z-index: 1;  
7. }  
8. .face.back {  
9.     display: none;  
10. }  
11.  
12. #f1_container {  
13.     -webkit-perspective: 1000;  
14. }  
15. #f1_card {  
16.     width: 100%;  
17.     height: 100%;  
18.     -webkit-transform-style: preserve-3d;  
19.     -webkit-transition: all 1.0s linear;  
20. }  
21. #f1_container:hover #f1_card {  
22.     -webkit-transform: rotateY(180deg);  
23.     -webkit-box-shadow: -5px5px 5px#aaa;  
24.     -moz-box-shadow: -5px 5px 5px#aaa;  
25.     box-shadow: -5px5px 5px#aaa;  
26. }  
27. .face {  
28.     position: absolute;  
29.     width: 100%;  
30.     height: 100%;  
31.     -webkit-backface-visibility:hidden;  
32. }  
33. .face.back {  
34.     display: block;  
35.     -webkit-transform: rotateY(180deg);  
36.     -webkit-box-sizing: border-box;  
37.     padding: 10px;  
38.     color: white;  
39.     text-align: center;  
40.     background-color: #aaa;  
41. } 

当然你也可以绕X轴或者Z轴旋转:

这里我必须改变阴影才能看起来是正常翻转.

这个属性对于显示图片详细内容很不错.

你可以放随便什么东西在这里.

手风琴

方案

1. 定义几个有标题和内容的 section
2. 给所有的section设置高度然后超出隐藏，除了第一个其他有内容的高度其他都只有标题的高度
3. 给所有的标题绑定click事件来改变内容的高度

Demo

▶

一段长内容（打的乱七八糟内容）

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

▶

一段短点的内容

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

▶

两段短内容

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.

我不确定使用/滥用 Unicode 是不是一个好的办法, 但是你可以看到这样来实现手风琴确实相当简单.

这里我给不同的状态定义了不同的class,然后用jquery来添加或者删除这些class. 我们仍然可以用:target 伪类来做,这样就必须在点击的时候用 preventDefault() 阻止默认事件来防止页面上下跳转, 所以我干脆全用jQuery来写了.

The Code

HTML:

1. <divid=“accordion”> 
2.     <sectionid=“item1″> 
3.         <pclass=“pointer”>&#9654;</p><h1><ahref=“#”>A long paragraph</a></h1> 
4.  
5.         <p>Pellentesque habitant…</p> 
6.     </section> 
7.     <sectionid=“item2″class=“ac_hidden”> 
8.         <pclass=“pointer”>&#9654;</p><h1><ahref=“#”>A medium paragraph</a></h1> 
9.  
10.         <p>Pellentesque habitant…</p> 
11.     </section> 
12.     <sectionid=“item3″class=“ac_hidden”> 
13.         <pclass=“pointer”>&#9654;</p><h1><ahref=“#”>Two short paragraphs</a></h1> 
14.  
15.         <p>Pellentesque habitant…</p> 
16.         <p>Pellentesque habitant…</p> 
17.     </section> 
18. </div> 

CSS:

1. #accordion section, #accordion .pointer,#accordion h1, #accordion p {  
2.     -webkit-transition: all 0.5s ease-in-out;  
3.     -moz-transition: all 0.5s ease-in-out;  
4.     -o-transition: all 0.5s ease-in-out;  
5.     transition: all 0.5s ease-in-out;  
6. }  
7. #accordion {  
8.     margin-bottom:30px;  
9. }  
10. #accordion h1 {  
11.     font-size:20px;  
12.     background-color:rgba(255,0,0,0.3);  
13.     margin:0;  
14.     padding: 10px10px 10px30px;  
15. }  
16.  
17. #accordion h1 a {  
18.     color:black;  
19. }  
20. #accordion section {  
21.     overflow:hidden;  
22.     height:220px;  
23.     border:1px#333 solid;  
24. }  
25. #accordion p {  
26.     padding:0 10px;  
27.     color:black;  
28. }  
29. #accordion section.ac_hidden p:not(.pointer) {  
30.     color:#fff;  
31. }  
32.  
33. #accordion section.ac_hidden {  
34.     height:44px;  
35. }  
36. #accordion .pointer {  
37.     padding:0;  
38.     margin:10px 0 06px;  
39.     line-height:20px;  
40.     width:13px;  
41.     position:absolute;  
42. }  
43. #accordion section:not(.ac_hidden) h1 {  
44.     background-color:rgba(255,0,0,0.7);  
45. }  
46.  
47. #accordion section:not(.ac_hidden) .pointer {  
48.     display:block;  
49.     -webkit-transform:rotate(90deg);  
50.     -moz-transform:rotate(90deg);  
51.     -o-transform:rotate(90deg);  
52.     transform:rotate(90deg);  
53.     padding:0;  
54. } 

添加一点 javascript 来添加和删除class.

1. $(document).ready(function() {  
2.     $(“#accordion section h1″).click(function(e) {  
3.         $(this).parents().siblings(“section”).addClass(“ac_hidden”);  
4.         $(this).parents(“section”).removeClass(“ac_hidden”);  
5.         e.preventDefault();  
6.     });  
7. }); 

参考

从下面你可以看到更多相关内容：

• W3C: CSS Transitions Module Level 3
• W3C: CSS 2D Transforms Module Level 3
• W3C: CSS 3D Transforms Module Level 3
• W3C: CSS Animations Module Level 3
• Surfin’ Safari (check the archives)
• CSS3 Transitions support in Opera Presto 2.3

• Previous怪异的IE6/7下legend左偏移
• Next 智能手机Web开发笔记