您还没有专辑

开始创建自己的专辑吧

创建
您可在个人中心-我的专辑处查看
当前位置:首页 > 软件入门 > DW-动画案例之旋转动画

DW-动画案例之旋转动画

手机观看

扫一扫下载虎课app

支持离线缓存,随时随地学习

VIP优惠升级 21大分类,畅享48000+设计教程特权!

为自己充值升华学习
今日剩余学习次数:1

按住画面移动小窗

DW-动画案例之旋转动画

播放卡顿?建议切换线路

宽屏取消宽屏

学设计上虎课网

学习意犹未尽?成为VIP,继续提升

免费学习即将结束

关闭继续学习>

发表评论
收起宽屏
分享给朋友:
手机观看

扫一扫下载虎课app

支持离线缓存,随时随地学习

添加到专辑收藏已收藏收藏成功,可进入个人中心-课程收藏 查看!
目录信息笔记
课后练习学员评价 (54条评论)视频字幕查看优秀作品>

课后练习在紧急制作中。。。

课程综合评分:9.7
课程难易程度:太简单(2)简单(8)适中(39)有点难(3)太难了(1)
您需要学习后才可以评价,立即学习
评论列表
仅显示有内容的评论
仅显示带图评论
排序方式:

Hello,大家好我是M ,上节课呢,我们已经完成了我们这个动画案例的第一个 ,平移动画 ,那么这节课呢 ,我们将要做的呢就是第二个 ,旋转动画 ,好,我们来看一下这个旋转动画,我们要怎么做啊 ,首先,还是来到我们的这个HTML ,这个呢,是我们前面第一个,平移 ,M呢在这里,给一个注释 ,好,然后 ,这就是我们的旋转动画 ,然后我们把标题也改一下,改成旋转 ,和我们平移动动画盒子一样呢,我们旋转动画盒子呢 ,也要新加一个Class命名 ,就叫,旋转好了 ,好,我们来到CSS里面去,看我们要怎么去设置这个旋转 ,首先,和第一个平移盒子一样 ,我们鼠标移入之后呢,我们的图片 ,还是会有一个变暗的一个效果 ,这里呢,我们要给一个 ,给我们旋转这个DIV,一个背景颜色了 ,Background-color ,也是给一个深色 ,那么就给一个深红色好了 ,其次呢 ,和平移盒子一样,我们鼠标移入之后呢,我们要让图片 ,透明度降低,然后透出我们 ,背景的深色对不对 ,那我们是不是应该 ,像,这里一样 ,鼠标移入,然后我们的图片 ,透明度降低,并且给一个过度动画 ,是不是,我们是不是应该这样写,然后加平移 ,变成一个旋转 ,来,我们看一下 ,对不对,颜色变深了 ,

但是我们会发现一个问题啊 ,旋转和平移 ,它们其实是不是都有另外一个Class叫做Box ,它们都是Box底下的Img标签,Box底下的Img标签 ,当我们鼠标移入Box的时候,我们的Img标签 ,透明度降低,并且有一个过度的效果 ,对不对 ,那其实呢,我们可以为了保证我们代码的简洁 ,我们将这里的平移,改成Box ,是不是就可以做到 ,这两个它们共用了一个 ,CSS样式 ,当然,其实不止这两个,后面的 ,也是一样,只是因为它们 ,DIV没有背景色,所以呢透明度降低之后,泛出了白色 ,这样呢我们就可以做到什么,我们这一个样式 ,用到了四个地方 ,是不是?好,注意啊,这里呢,我们 ,就可以把我们这个代码给优化一下了 ,好,完成了我们这个背景色变深的动画之后呢 ,我们来看一下旋转 ,鼠标移入之后呢,多了一个方框,然后呢我们的说明文字 ,由下至上 ,出现 ,那么这个方框怎么办 ,是不就是一个DIV,给一个边框 ,对吧,好我们来看一下 ,首先呢,我们要在旋转盒子里面呢 ,增加一个DIV ,这个DIV我们就写在文字的里面好了 ,这个DIV名字我们就叫它框 ,当然了它就是一个空的,对不对 ,然后我们来看一下 ,点,文字 ,我们先来设置文字样式吧 ,现在现在的文字,保存一下,现在的文字还是在 ,

最右上方,对不对 ,然后呢,点 ,文字里面的,框 ,文字有什么样式的,我们直接把 ,刚刚的 ,平移里面的文字样式给 ,复制过来好了 ,好,我们的字下来了 ,然后呢,我们的框是什么样的 ,首先呢我们要给这个DIV,一个长和宽对不对 ,

登录后查看更多
换一批

为你推荐

每周一练

立即参与
虎课网为您推荐DW-动画案例之旋转动画视频教程、图文教程、素材源文件下载,学员课后练习、作品以及评价等内容。DW-动画案例之旋转动画教程讲师:M,使用软件:DW(CC2017),难度等级:新手入门,视频时长:12分24秒 查看全部

同学,小虎知道你非常努力的想学习!

老师录制课程真的也很辛苦

赞助一下吧

确定学习吗?

您每天可免费学习一个教程。

成为VIP可无限学习 !

成为VIP吧!

成为VIP吧!

您已经免费学习 1 个教程 !

我们录制教程很努力的,赞助下吧 !

升级VIP吧!

您已经学习 5 个教程啦!

我们录制教程很努力的,赞助升级下吧 !

您已经累计下载5个源文件


您在当前分类下不是VIP,赞助VIP享受无限下载


您已经累计下载5个素材文件


您在当前分类下不是VIP,赞助VIP享受无限下载


您已经累计下载5个源文件


您在当前分类下不是VIP,赞助VIP享受无限下载


您已经累计观看5个图文教程


您在当前分类下不是VIP,赞助VIP享受无限观看


学习后才能评价哦!

学习后才能提问哦!

获得30虎课币

评论提交成功,将在审核通过后显示

×

下载素材/源文件:

收藏成功
取消成功
特惠
充值
客户端
虎课桌面客户端
置顶播放器,边看边学习
虎课移动APP
支持离线缓存,随时随地学习
我的排行
建议意见
官方客服

官方客服

您可以与在线客服进行沟通或者拨打客服热线获得帮助

客服热线:021-80344319工作日:9:30-18:30

在线咨询:联系客服工作日:9:00-22:00

节假日:9:00-18:00

虎课积分
免费学习48000+个教程!
配套素材、源文件一键下载!
昨日学员已学习了121,690
并提交了1,449份作业!
登录后立即学习!
loading
微信扫码关注即可登录
登录后立即学习!
手机号
验证码
立即登录
您需要同意协议才可以进行登录
已连续签到0
第一天
5个虎课币
第二天
10个虎课币
第三天
15个虎课币
第四天
20个虎课币
第五天
40个虎课币
第六天
20个虎课币
第七天
20个虎课币
立即签到
已签到
每周一重置签到奖励
已连续签到0
本周斩获110个虎课币,下周也要来哦
我知道了
已连续签到0
哎呀,签到失败了!
再次签到
哎呀,系统出现错误,请稍后重试!
上上签 · 今日宜学习
恭喜!签到成功,获得 10 个虎课币
.
书山有路勤为径,学海无涯苦作舟
— 唐代文学家 韩愈
虎课网 · 每天进步一点点
分享到
全站48000+课程免费学!昨日已有26682位学员免费领取~点我领取