• 课程介绍
  • 学习目标
  • 课程详情
  • 此视频送给所有关注妙味的朋友们,感谢大家的一路陪伴。值此国庆节举国欢庆之际以此赠送大家一次国庆活动抽奖机会,聊表心意。祝大家玩得开心,中大奖!也祝大家国庆节快乐!技术成长之路顺利,走向人生巅峰!
  • 视频中是一些特效小案例,技术没有多高深,重点是想法,想法很重要哦!
  • 幸运大抽奖,国庆 High 翻天:100% 中奖,幸运好礼转到手~

    国庆节期间(9月26日-10月26日),在妙味平台购买线上产品,如:VIP 会员、续费、尊享视频、拼团(购买微币除外)等,即可参加抽奖。中奖率 100%,奖品设置如下:

    奖品设置:

    • 一等奖:999 枚微币;
    • 二等奖:下笔消费,返还 50% 现金;
    • 三等奖:赠送一年会员;
    • 四等奖:下笔消费,返还 30% 现金;
    • 五等奖:赠送 3 个月 VIP 会员;
    • 六等奖:88 枚微币;
    • 七等奖:下笔消费,返还 20% 现金;
    • 八等奖:10 枚微币;

    抽奖活动参加方式:

    >> 购买 VIP 会员、续费 VIP 会员参加抽奖

    >> 购买 尊享视频 参加抽奖

     

    “下笔消费,返还现金” 的说明:

    • 获得 “下笔消费返还现金” 奖品后,在妙味官网购买线上任一款产品,付款成功后,联系客服进行现金返还;
    • 该类型奖品不能用于购买微币;
    • 返还比例按真实消费金额进行计算;
    • 兑换有效期至 2018 年 11 月 16 日;

    注:本活动最终解释权归妙味课堂;

    抽奖方式:

    1. 购买妙味任意线上产品,即可参加抽奖,每个订单可抽奖 1 次;
    2. 同个账号购买多个产品,生成多个订单,即可参加多次抽奖;
    3. 购买多次商品所获得的抽奖,兑换奖品只可按时间顺序依次兑换;

    奖品发放及兑换:

    1、联系客服,提供账号信息;
    2、客服核实信息后,3 个工作日发放;

    咨询QQ:2852509867 QQ:2852509868

    微信咨询:miaov-class(小美)

    微信咨询:miaov-study(大宝)

     

    第一章:登录框

    案例配图:

    第0集内容讲解:课程介绍

         1、学前基础介绍

         2、案例介绍

    第1集内容讲解:案例介绍及初步框架搭建

         1、分析登陆状态,小男孩头像的交互变化

         2、分析密码可见和不可见下,小男孩头像的交互状态

         3、分析布局结构

         4、初期搭建结构

         5、背景实现

    第2集内容讲解:小男孩主体及眉毛

         1、圆角 border-radius

         2、小男孩身体

         3、设置容器 - 存放需要动的内容

         4、眉毛

             公用样式提取,精简代码

    第3集内容讲解:小男孩眼睛鼻子嘴巴

         1、眼睛

             公用样式提取

             眼睛 - 圆角 border-radius

             眼珠 - before/border-radius

         2、鼻子

             图片 background

         3、嘴巴

             background-color

             border

    第4集内容讲解:小男孩结构完成开发剩余模块

         1、书本

             图片 background

             溢出部分隐藏:overflow:hidden

         2、输入框

             输入框 input

             border-radius

             输入框文字

             输入框小图标

             输入框默认文字:placehold

    第5集内容讲解:交互思路分析及输入状态开发

         1、新建JS文件、分析交互状态

              Email输入框获取焦点、输入时状态

              密码框获取焦点、输入时状态

              密码错误时状态

              密码错误时状态

              密码在可见与不可见两种状态切换

         2、Email输入框

              输入框获取焦点时 - 眉毛变化

              transform:rotate()

              transition

              输入框获取焦点时 - 眼珠变化

              眼珠位置

              transform:origin

              transform:rotate()

              transition

              输入框获取焦点时 - 嘴巴变化

              border-radius

    第6集内容讲解:输入状态开发

         1、引入JS文件

         2、获取焦点时,眉毛眼睛嘴巴变化

              获取元素

              通过JS控制眉毛眼睛嘴巴的位置

         3、通过JS控制输入框内容长度,实现眼珠转动的效果

    第二章:各种 Loading

    案例配图:

    第1集内容讲解:第1-2个loading

    1、新建目录结构

    2、第一个loading:方块翻转

         清除默认样式

         设置方块宽高、颜色

         分析翻转步骤:

    3、@keyframes rotating-plane

         transfrom

         perspective 

         animation

    4、第一个loading:两个圆

         border-radius

         透明度

         两个圆缩放

    5、关键帧 @keyframes double-bounce

         队列:animation-delay(动画延迟)

    第2集内容讲解:第3-4个loading

         1、第三个loading:5个长条队列

         2、关键帧 @keyframes wave-rect

              transfrom:scaleY(.4)

              animation:

              队列:animation-delay(动画延迟)

    3、第四个loading:2个正方形方块

         移动

         位移

         旋转

         缩放

    4、关键帧 @keyframes cubes

         transfrom:

         缩放 scaleY(0deg)

         旋转:rotate(-90deg)

         位移:translateX/translateY

         队列:animation-delay(动画延迟)

    第3集内容讲解:第5-7个loading

         1、第五个loading:一个圆

         2、关键帧 @keyframes spinner

              transfrom:

              旋转 scale(0)

         3、第六个loading:两个圆围绕一个点旋转

              边旋转,边缩放

              父级旋转,子级缩放

         4、动画形式

              匀速:animation:linear

         5、第七个loading:3个圆

         6、关键帧 @keyframes three-bounce

              transfrom:

              旋转 scale

              队列:animation-delay(动画延迟)

    第4集内容讲解:第8个loading

         1、第8个loading:环形(scale实现)

              12个小圆结构

         2、伪类before

         3、调整12个小圆角度

              transfrom:

              缩放 scale()

              旋转:rotate()

              队列:animation-delay(动画延迟)

    第5集内容讲解:第9-11个loading

         1、第9个loading:9个小方块

              transfrom:

              scale3D()

              队列:animation-delay(动画延迟)

         2、第10个loading:环形(opacity实现)

              12个小圆结构,通过修改opacity实现

         3、第11个loading:4个方块

              伪类before 实现

              transfrom:

              旋转:rotateZ()

              关键帧 @keyframes folding-cube

                   transfrom:

              景深:perspective()

              旋转:rotateX()

              透明度:opacity

              队列:animation-delay(动画延迟)


    咨询方式:

    • 咨询QQ:2852509866、2852509867、2852509868
    • 微信:miaov-class
    • 电话:010-57269690

    想要了解妙味课堂最新开课消息吗?长按二维码关注吧!

     

课程目录

资料下载

购买课程后,可免费下载课件

讲师信息

妙味讲师

主讲教师:妙味讲师

讲师介绍:全职讲师,

相关课程

  • 移动端3D绚酷空间-VR 场景应用

    ¥520.00
    当前热度:4667
  • 移动端“事件交互篇-远程实战开发课程”

    ¥660.00
    当前热度:5169
  • 移动端原生技法精粹揭秘课程

    ¥199.00
    当前热度:12060
  • 邮件案例和场景切换实战案例

    ¥10.00
    当前热度:1877
  • 移动端体感交互实战开发

    ¥289.00
    当前热度:3221
“100%中奖,幸运好礼转到手”
幸运用户
用户 奖励方式
恭喜: 156468712 获得一等奖
恭喜: 156468712 获得一等奖
恭喜: 156468712 获得一等奖
恭喜: 156468712 获得一等奖
恭喜: 156468712 获得一等奖
恭喜: 156468712 获得一等奖
恭喜: 156468712 获得一等奖
恭喜: 156468712 获得一等奖
恭喜: 156468712 获得一等奖
1. 中奖后请联系客服,兑换奖品;
2. 兑奖有效期:2018 年 10 月 18 日 - 2018 年 12 月 31 日;
3. 本活动最终解释权归妙味课堂所有;
您还剩余1次抽奖机会
 
“100%中奖,幸运好礼转到手”
恭喜中奖
奖品名称
“下笔消费返还10%现金”
查看奖品详情
 
“100%中奖,幸运好礼转到手”
奖品名称
下笔消费返还10%现金
奖品描述:

1、赠送1年VIP会员视频权限

2、不能赠予,仅限中奖的用户使用

3、提供ID号+绑定的手机号

4、提供个人中心的中奖截图

兑换有效期: 2018年11月31日 - 17:00:00
兑换方式:联系客服兑换

客服联系方式:

QQ:2852509866、2852509868

微信:miaov-class、miaov-study

返回
官方微博
常见问题
手机观看
微信扫一扫
公众号内观看视频
咨询客服
点击咨询QQ客服
微信客服
返回顶部