您还没有专辑

开始创建自己的专辑吧

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

DW-动画案例之平移动画

手机观看

扫一扫下载虎课app

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

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

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

按住画面移动小窗

DW-动画案例之平移动画

播放卡顿?建议切换线路

宽屏取消宽屏

学设计上虎课网

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

免费学习即将结束

关闭继续学习>

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

扫一扫下载虎课app

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

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

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

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

Hello大家好我是M ,?上着课呢,我们学习的过渡样式Transition ,那么呢,我们动画的两个主要的CSS的样式呢就已经学习完了 ,一个Transform一个Transition ,接下来呢,我们将通过实际的案例,来去学习怎么样去运用 ,这两个CSS样式 ,?去制作一个 ,?带有交互效果的网页出来 ,那么今天呢,我们就要学习其中之一,就是一个平移效果的 ,一个CSS动画了 ,?我们可以先来看一下我们,即将要做的一个案例 ,?首先呢就是一个平移 ,?啊,我可以看到我们的,文字说明部分呢是 ,平移进我们的画面的,然后第二个是一个旋转动画 ,第三个呢,是一个斜切 ,点击第四个是一个缩放的一个效果 ,?那么呢,我们将用四节课的时间 ,来去分别的去制作这个 ,效果 ,?首先呢我们,来看一下这几节的一个重点 ,?第一个呢,就是我们要学习个伪类Nth-of-type(n) ,?这个很像我们伪类当时学习的里面一个Nth-child ,Nth-child是选择该元素下的第几个子元素,那么我们这个伪类呢 ,?是选择该元素下的同类型的伪类 ,听下可能有点绕口,但是我们 ,?到实际案例里面制作的时候 ,M会给大家讲清楚 ,?那第二个重点呢,就是我们的重头戏 ,CSS的动画 ,?也就是Transfirm和Transition ,的一个使用 ,?那么呢我们还可能会用到一个其它的CSS的样式 ,Opacict,Opacict是什么呢,Opacict主要是设置 ,我们元素的一个透明度用的 ,?好,话不多说,我们进到DW里面 ,

来,正式开始我们这个案例 ,?首先呢,我们要新建一个站点 ,?毕竟是一个,新的案例了 ,这里M就建到桌面上好了 ,?然后起个名 ,OK ,?然后呢,新建一个HTML ,?然后标题呢,就叫动画案例好了 ,创建 ,?然后呢,保存 ,?保存到哪?保存到我们的站点里面 ,?选案例 ,其次呢,我们这个案例的 ,CSS样式比较多,所以我们决定制作一个 ,?外部样式表 ,?新建一个CSS文档 ,创建 ,?在这保存一下 ,这里呢,我们在站点里面 ,?养成一个好习惯,新建一个CSS文件夹 ,?好,然后怎么做 ,?不知道大家还记不记得,如何将我们的样式 ,调入进来,使用Link ,对不对 ,?然后找到我们这个CSS文件 ,?调进来之后呢,我们就OK了 ,?好,我们来看一眼我们的案例啊 ,?这张图片 ,然后每个图片,配有相应的文字 ,?那么就会把整个 ,图片加文字看成一个DIV ,?DIV里面呢 ,包了个就是我们的IMG ,?文件,以及 ,?另外一个DIV,我们的文字文件 ,?这就是大的一个HTML结构 ,?好,我们来 ,?具体看一下怎么写 ,首先DIV ,有四个,我们就叫它盒子好了,Box ,那么Box里面呢,有一个 ,

img,对,我们先把标签放到这,不动它 ,?然后呢,还有另外一个DIV ,?是文字对不对,我们就叫文字好了 ,我这里面有两种,一个是标题 ,然后呢,还有一个就是图片的说明 ,?标题呢,我们可以给H标签 ,H?12345都可以,123太大了,我们就H4好了 ,然后按这个文字的说明,然后给上 ,文字说明书 ,?这个呢,就是我们的一个 ,?基本的样式了 ,?当然了,这里我们就先不动它 ,?为什么呢?因为我们还没有插入图片,对不对 ,好,我们 ,我们先找到这四张图,复制一下 ,?我们退到我们的站点文件夹里面 ,?新建一个 ,?图片文件夹 ,?然后呢,把我们的图片导进去 ,?这个呢,我们的第一个文件夹里面呢 ,导入第一个吗,我们就顺着来好吧 ,?我们这节课学习的是平移动画 ,标题呢,就是平移动画 ,好,保存一下,我们去按下F3,看一下是个什么效果 ,?图片出来了,但是我们的文字呢在下面 ,是不是 ,好,这里我们开始来 ,?设置样式了 ,?首先呢 ,M教大家一个新的方法 ,?怎么样初始化我们的网页 ,?因为我们知道我们的每一个标签呢都会自带一些 ,?样式,包括我们的DIV,还有甚至是Body标签 ,Body标签自带了Margin和padding所以呢我们这里 ,用星号 ,去将所有标签的Padding ,变成0 ,Margin ,也变成0 ,好,保存一下 ,?当然,这是看不出什么效果的 ,

?好了,我们来开始写我们的样式 ,首先来写外部的这个容器Box ,?这个Box ,?怎么样 ,?我们来看一下,我们的案例 ,?一排有三个Box ,?那么这个宽度呢 ,?我们要写百分比了,33% ,?其次呢,我们要给一个高,因为我们发现每一个 ,盒子的 ,?高度是一致的 ,?那么这里呢,我们可以给一个300PX像素 ,?为什么我们的宽用百分比而高用像素呢 ,?首先因为 ,

登录后查看更多
换一批

为你推荐

每周一练

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

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

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

赞助一下吧

确定学习吗?

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

成为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位学员免费领取~点我领取