用户名: 密码: 免费注册 忘记密码? 加入收藏 | 设为首页
图片和CSS制作动画按钮
学院首页 | 资讯中心 | 服务器软件 | 系统工具 | 系统软件 | 办公软件 | 聊天软件 | 多 媒 体 | 网页制作 | 网站运营 | 平面设计
艺术欣赏 | 数据库软件 | 程序开发 | 网络组建 | 源码下载 | 驱动下载 | 软件下载 | 电脑安全 | IT创业 | IT博客 | IT社区
硬件数码导航 | 硬件频道 | 本本频道 | MP3频道 | 相机频道 | 手机频道 | 显卡频道 | LCD 频道 | 音箱音频 | 行情 | 评测 | 导购
学院专题 软件 - 系统 - 办公 - 聊天 - 多媒体 - 网页制作 - IT创业 - 运营 - 平面 - 设计欣赏 - 数据库 - 程序 - 服务器 - 组网

 当前位置: 首页>>技术频道>>网页>>Fireworks教程>>正文

图片和CSS制作动画按钮

日期:2007-1-21 4:32:05     来源:feng4ever   编辑:   

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

先看看下面的预览图片

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

下面是实际效果,亲自体验一下

a{display:block;height:31px;width:88px;background-image:url(图1)}
a:hover{background-image:url(图2)}
a:active{background-image:url(图3)}

其实最重要的是在动画图片本身

首先看看这个图片,似曾相识把.原理是一样的

我们用 LINK对象的伪类 HOVERACTIVE来模拟FLASH里面的指针经过按下效果,实事上还是有些差别的,另外弹起的按钮 就是 link的普通状态了.

理解这些了再来看动画本身,第二个例子里面有三个图片

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

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

图3 文字下沉一下,模拟点击效果

鼠标移动上去的时候 播放图片2 那么动画自动滚动到[鼠标点我]

鼠标移开的时候 播放图片1 那么动画自动滚动到[谢谢惠顾]

鼠标点击的时候 播放图片3.

下面是Fireworks制作按钮的动画的一些描述 。 这两个图片是鼠标经过和移开的源文件

打开看看,其实和普通的动画一样,不过要注意一个小细节

导出的GIF动画之前记得在帧面板选择[不循环] 。 秘诀记心中.....

tips:代码只是简单的HTML和CSS制作.所以效果不是特别完美,如果采用HTML配合javascript的一些行为来制作,可以完全模拟出flash的按钮的四个状态.不过同时也要看到这个方法的弊端,图片大,载入慢,第一次鼠标移动上去的时候会出现缺失效果.

例子打包:source.rar 彭毅

  ▼ 下一篇新闻 用Fireworks绘制飞利浦手机
  ▲ 上一篇新闻 Fireworks 打造逼真M4A1        网友发表观点请进入=>



我要纠错】【进入论坛交流】【关闭此页

文章搜索
   
最新文章

 
·千名爱好者参与首届PHP调查
·腾讯称QQ通讯信息密钥加密 不会被
·雅虎反超Google排名搜索第二
·中搜等十余家IT企业因流氓软件被
·盛大前员工克隆网游装备获暴利被
·凤凰网将向迅雷提供娱乐及宽带内
·信产部出手规范 新浪式企业法律架
·雅虎中国称旗下软件早已没有流氓
·中搜停止划词搜索与流氓软件决裂

广告赞助
相关文章 相关教程下载
焦点信息
·腾讯称QQ通讯信息密钥加密 不会被监听
·信产部出手规范 新浪式企业法律架构不得不改
·盛大前员工克隆网游装备获暴利被追刑责
·凤凰网将向迅雷提供娱乐及宽带内容
·雅虎中国称旗下软件早已没有流氓问题
·雅虎反超Google排名搜索第二
网友评论:(评论内容只代表网友观点,与本站立场无关!)
发表评论     Hard168社区推荐帖子
姓 名: *
* 请网友遵纪守法并注意语言文明。
IT人物推荐

王江民
马云
柳传志



关于本站    联络方式    广告服务    意见信箱    加入收藏   设为首页    -
本站部分内容来自网上,如有侵权部分,敬请告知,我们会在24小时内给予处理
版权所有:Hard168.Com,如需转载文章请与我们取得联系
京ICP备05063857号 Designed by Hard168.Com
图片和CSS制作动画按钮