当前位置：首页 → 问答吧 → Fireworks制作动感旋风按钮。[教程和源文件]

Fireworks制作动感旋风按钮。[教程和源文件]

时间：2006-11-13

来源：互联网

很多时候大家可以看到FLASH里面的按钮可以是动画的,而大部分HTML作出来的按钮都是单帧切换的.其实做成动画也是可行的.
先看看下面的预览图片

鼠标移动上去,鼠标点击,鼠标移开

下面是代码框运行看看效果,亲自体验一下

再看看第二个例子

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

首先看看这个图片,似曾相识把.原理是一样的,
我们用 LINK对象的伪类 HOVER 和ACTIVE来模拟FLASH里面的onRollOver 和onPress(实际上是有区别的)效果

原理其实很简单,第二个例子里面有三个图片,
图1 从 [鼠标点我]->[谢谢惠顾]

图2 从 [谢谢惠顾]->[鼠标点我]

图3 点击效果

鼠标移动上去的时候播放图片2 那么动画自动滚动到[鼠标点我]
鼠标移开的时候播放图片1 那么动画自动滚动到[谢谢惠顾]
鼠标点击的时候播放图片3.

tips:代码只是简单的HTML制作.所以效果不是特别完美,如果采用HTML配合javascript的一些行为来制作,可以完全模拟出flash的按钮的四个状态
导出的GIF动画时候记得在帧面板选择[不循环]。秘诀记心中.....

[ 本帖最后由 feng4ever 于 2006-11-13 01:58 编辑 ]

附件

2-1.gif (1.73 KB)

2006-11-13 00:50

2-2.gif (1.95 KB)

2006-11-13 00:50

2-3.gif (869 Bytes)

2006-11-13 00:50

未命名-1.gif (4.68 KB)

2006-11-13 01:26

作者: feng4ever 发布时间: 2006-11-13

例子打包

[ 本帖最后由 feng4ever 于 2006-11-13 01:25 编辑 ]

附件

source.rar (25.63 KB)

2006-11-13 01:03, 下载次数: 322

作者: feng4ever 发布时间: 2006-11-13

鼠标移动上去和移开的动画源文件

附件

未命名-1.png (26.89 KB)

2006-11-13 01:04

未命名-2.png (26.34 KB)

2006-11-13 01:04

作者: feng4ever 发布时间: 2006-11-13

已经收藏~

作者: xxcn2006 发布时间: 2006-11-13

留下来慢慢学.

作者: godstar 发布时间: 2006-11-13

很强,用HTML代替FLASH动画确实很实用

作者: dwcon 发布时间: 2006-11-13

和我刚看到标题后想的“旋风”不太一样啊，想像中的旋风应该是可以把房子卷走那种。。

PS：小可爱版主，你的GIF动画的体积怎么弄的那么小啊。

作者: jsuper 发布时间: 2006-11-13

创意无限阿！！！！
图片翻转+gif动画效果实现Flash的体验。

作者: greengnn 发布时间: 2006-11-13

SO COOL
value it

作者: colinivy 发布时间: 2006-11-13

要注意预载，否则会出现加载时的空白。

作者: citywill 发布时间: 2006-11-13

我只是用纯CSS实现这个例子,技巧在图片,不在代码本身
如果要用javascript的话还不如用flash呢.
绿色年代,纯CSS无污染

我高亮了一下..

作者: feng4ever 发布时间: 2006-11-13

创意不错～～

作者: Torix 发布时间: 2006-11-13

已收藏了，谢谢！！！！！

作者: wrqi 发布时间: 2006-11-14

思路还不错,但是实际应用中,还不如用flash来的实在

作者: everq 发布时间: 2006-11-14

收藏，提出更多的思路。

作者: wanjvk2 发布时间: 2006-11-14

还不错!顶一哈!!

作者: 820119 发布时间: 2006-11-14

可以的..只要用到ONLOAD...我觉得用少少代码没有什么不对的啊..我发现CSS站点几乎都用这种问题,没有事先加载背景图片,会造成空白也...

作者: laijguo 发布时间: 2006-11-14

经典，学习了

作者: cs99619 发布时间: 2006-11-17

很棒咧~学习了

作者: gracemm 发布时间: 2006-11-21

对我来说，比较高级的东西，谢谢了！

作者: MRainbowWJ 发布时间: 2006-11-21

学习了

作者: deepseafish 发布时间: 2006-11-22

升级.....

作者: oiclover1 发布时间: 2006-11-23

斑竹的帖子就是经典

作者: kmlxk 发布时间: 2006-11-23

很不错,经典...还没试过来!!

作者: 52ejia 发布时间: 2006-11-24

我顶~~ 老猛了这小可爱

作者: chaosdragon 发布时间: 2006-11-27

刚会滑动门(最开始接触CSS的时候)就想过用GIF做这类东西了,不过载入时间有点长
与flash比相对要少一些,问题在于图片要分2次才能下完,经常是鼠标移动过去一片空白...有可能是我做的GIF动画复杂了点体积过大...最后还是放弃了

作者: spritefire 发布时间: 2006-12-03

创意不错的！学习……

作者: sgpy 发布时间: 2006-12-04

复制内容到剪贴板

代码:

就可以应用在多个按钮。

作者: bonefish 发布时间: 2006-12-08

引用:

原帖由 bonefish 于 2006-12-8 14:35 发表
<style>
a.ceshi1{height:31px;width:88px;background-image:url(2-1.gif)}
a.ceshi1:hover{background-image:url(2-2.gif)}
a.ceshi1:active{background-image:url(2-3.gif)}
</style>
<a ...

实现的方法还是很多的.
我的方法主要是针对那些喜欢纯绿色(css)的用户

作者: feng4ever 发布时间: 2007-01-08

引用:

原帖由 spritefire 于 2006-12-3 17:55 发表
刚会滑动门(最开始接触CSS的时候)就想过用GIF做这类东西了,不过载入时间有点长
与flash比相对要少一些,问题在于图片要分2次才能下完,经常是鼠标移动过去一片空白...有可能是我做的GIF动画复杂了点体积过大... ...

可以设定body标签中预先下载要翻转的图像的.
我常把按钮中涉及到的图像预先加载到网页中防止显示延迟.
代码不熟悉,一般都在DW中使用预先载入图像的行为来做.

作者: 凌志发布时间: 2007-01-08

已经收藏，留来慢慢学，good....

作者: alexlanse 发布时间: 2007-01-09

提醒:最后回贴距现在126天，请不要无意义回复

为什么我做的只能加空连接,做成网络连接就什么都显示不出来了.

作者: xzi01 发布时间: 2007-05-14

很不错~~~

作者: zyy6201972 发布时间: 2007-05-14

不错
学习了