黑马程序员技术交流社区

标题: 2d模块学习 [打印本页]

---

作者: Allowclearance    时间: 2019-4-11 08:42
标题: 2d模块学习
2D转换 transfrom
特点：2D转换是改变标签在二维平面的位置和形状的一种形式
         1）移动
            transfrom:translafe (x,y)；
        特点：移动的百分百是以自身宽度的作为标准，对行内标签没有效果。
        2）旋转
        transfrom:rotate（deg）；
        特点：旋转指的是让元素在二维平面内顺时针或者逆时针旋转，
                  默认旋转的中心点是元素的中心点。
        3）改变旋转中心点
        transfrom：origin（top left right bottom);
        单位可以是像素和方位名词
        4）缩放
        transfrom-scale(1,1);
        里面写数字不跟单位，数字是是倍数的关系，数字越大倍数越大。
        缩小的范围0.1-0.9之间。
      综合性写法：位移放在最前面，位移，旋转，缩放。

CSS3动画 animation
       特点：动画序列，各个状态时的样式，形态
        1) 定义动画
        @keyfromes
           动画系列：0是动画开始，100是动画结束。
       2）元素使用动画
        animaion-name
       3）控制动画的实行
        animation-duration
             持续时间，单位为秒s
       4）无限循环
        animation-iteration-count：infinite；
       5）旋转方向
        animation-direction:normal 顺时针方向
                        alternate 反逆转方向
       6）停留在结束的状态
        animation-fill-mode：forwards
       7）鼠标经过时动画暂停
        animation-play-state：paused
       8）速度曲线细节
        animation-timing-function：linear 匀速
                                      steps()步长
       简写：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或动画结束的状态
        配合 opacity透明度使用
                 
               

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2