A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 胖哒 初级黑马   /  2019-4-11 13:48  /  833 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

【2D转换:】
        1】位移 translate(x,y)           (百分比单位是相对于自身元素 类似定位,不会影响到其他元素的位置 对行内标签没有效果)
           
        2】旋转 transform:rotate(30deg)   (2d旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转  正数为顺时针,负数为逆时针)

           转换中心点  transform-origin:top left;


        3】缩放 transform: scale(宽的倍数,高的倍数)


【动画:】 animation
        盒子状态之间的切换,看上去盒子是在动,动画效果。
        1)动画使用步骤
                第1步,定义动画(动画序列,各个状态时--样式)
                      @keyframes move (开始状态0%  ——  结束状态100% )         
   
                第2步,使用动画   
                   (动画名称 animation-name: move; 持续时间 animation-duration: 2s;)

        2)动画的属性(控制动画执行)
                必须属性:
                        动画名称
                        动画执行时间
                可选属性:
                        速度曲线
                        延迟时间
                        执行次数:无限播放
                        逆向播放:倒车
                        结束状态:一去不复返【注意:这个属性跟无限播放和逆向播放是冲突】
                       
                以上属性都可以简写:
               
                        不包含暂停动画(鼠标悬停在盒子上时hover,设置这个属性)





【1】模拟三角图标
        第1步,使用伪元素添加1个正方形盒子
        第2步,设置盒子的两个边框,并且定到指定位置
        第3步,旋转45度

【2】旋转中心点案例
        结构:大盒子里有一个小盒子,小盒子跟大盒子一样大。
        第1步,小盒子已左下角为中心点,旋转180度
        第2步,大盒子溢出隐藏
        第3步,当鼠标放到大盒子上时,小盒子旋转0度
【3】图片放大案例
        结构:盒子里面有一个图片。
                第1步,鼠标放到图片上,图片放大1.2倍
                第2步,盒子溢出隐藏
                第3步,图片添加过渡
【4】热点城市案例
        结构:
                地图大盒子,大盒子设置地图背景图片。
                        城市盒子,通过定位放到指定的位置。
                                1个小圆点盒子(宽、高、背景色、圆角边框)
                                2-3波纹小盒子(通过定位摞在小圆点的上面,宽、高、圆角边框、盒子阴影)
        动画:
                波纹小盒子放大,每个盒子的动画都延迟执行。
【5】打字机案例
        结构:
                装文字的盒子默认宽度是0,通过动画变宽。
                让文字强制一行显示,并且溢出盒子隐藏。
        动画:
                通过速度曲线:steps(),分为几个步骤(文字个数)去变宽。
               
【6】奔跑的熊大
        结构:
                装熊的盒子(一个熊的大小)
                盒子有背景图(8个不同形态的熊图)
        动画:
                第1个动画熊跑起来:加给div盒子(笼子),使用动画改变背景图的位置(速度曲线为:steps步长)
                第2个动画笼子移动:加给div盒子(笼子),移动的位置,还要一去不复返。

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马