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

feng4ever 楼主

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

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


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

<style> a{display:block;height:31px;width:88px;background-image:url(http://bbs.blueidea.com/attachments/2006/11/13/2-1_76pmxHW9So5C.gif)} a:hover{background-image:url(http://bbs.blueidea.com/attachments/2006/11/13/2-2_onWYN8QsLPwU.gif)} a:active{background-image:url(http://bbs.blueidea.com/attachments/2006/11/13/2-3_88fP7C5q54Bf.gif)} </style> <a href="#"></a>

运行代码 复制代码 另存代码  提示：您可以先修改部分代码再运行

再看看第二个例子

<style> a{display:block;height:31px;width:88px;background-image:url(http://bbs.blueidea.com/attachments/2006/11/13/1-1_4dlRfd22yNs8.gif)} a:hover{background-image:url(http://bbs.blueidea.com/attachments/2006/11/13/1-2_e892Of1EQonf.gif)} a:active{http://bbs.blueidea.com/attachments/2006/11/13/1-3_5r9O3XCmueci.gif)} </style> <a href="#"></a>

运行代码 复制代码 另存代码  提示：您可以先修改部分代码再运行

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


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


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

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

图3 点击效果


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


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

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

feng4ever 楼主

例子打包

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

feng4ever 楼主

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

xxcn2006

已经收藏~

godstar

留下来慢慢学.

dwcon

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

jsuper

和我刚看到标题后想的“旋风”不太一样啊，想像中的旋风应该是可以把房子卷走那种。。
PS：小可爱版主，你的GIF动画的体积怎么弄的那么小啊。

greengnn

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

colinivy

SO COOL
value it

citywill

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

feng4ever 楼主

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

我高亮了一下..

Torix

创意不错～～

wrqi

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

everq

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

wanjvk2

收藏，提出更多的思路。

820119

还不错!顶一哈!!

laijguo

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

cs99619

经典，学习了

gracemm

很棒咧~学习了

MRainbowWJ

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

deepseafish

学习  了

oiclover1

升级.....

kmlxk

斑竹的帖子就是经典

52ejia

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

chaosdragon

我顶~~     老猛了  这小可爱

spritefire

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

sgpy

创意不错的！学习……

bonefish

1. <style>
   
2. a.ceshi1{height:31px;width:88px;background-image:url(2-1.gif)}
   
3. a.ceshi1:hover{background-image:url(2-2.gif)}
   
4. a.ceshi1:active{background-image:url(2-3.gif)}
   
5. </style>
   
6. <a href="####" onFocus="this.blur()" class="ceshi1"></a>

复制代码

就可以应用在多个按钮。

feng4ever 楼主

原帖由 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)的用户

凌志

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

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