乐趣区

关于css:动画1

  transition   过渡
  transform    2D,3D
  挪动盒子的地位:定位 盒子的外边距  2d 转换挪动
  一、2D
   转换(transform)是 CSS3 中具备颠覆性的特色之一,能够实现元素的位移,旋转,缩放等成果
   
   旋转:rotate 挪动:translate
   缩放:scale
   1. 挪动:translate(可跟 px,%)(对行内元素是有效的比方 span)
    % 是盒子本身的宽高度
    语法:transform:translate(x,y); 合在一起写(上面是离开写)transform:translateX(n);
         transform:translateY(n);



   2. 旋转 rotateo
     语法:transform:rotate(度数(deg));
      重点
          1.rotate 外面跟度数,单位 deg 比方 rotate(45deg)
          2. 角度为正时,顺时针,负时,为逆时针
          3. 默认旋转的中心点是元素的中心点  
          
                  
   2.1. 设置转换中心点 transform-origin
      语法:transform-origin:(x,y)
      重点:1. 留神前面的参数 x 和 y 用空格隔开
          2.x y 默认转换的中心点是元素的中心点(50% 50%)3. 还能够给 x y 设置像素或者方位名词(top bottom left right center)3. 缩放:scale
      语法:transform:scale(x,y);
      留神:1. 留神其中的 x 和 y 用逗号分隔
          2.transform:acale(1,1):宽和高都放大一倍,绝对于没有放大
          3.transform:acale(2,2):宽和高都放大了 2 倍
          4.transform:acale(2):只写了一个参数,第二个参数则和第一个参数一样,相当于 scale(2,2)
          5.transform:acale(0.5,0.5):放大
          6.scale 缩放最大的劣势:能够设置转换中心点缩放,默认以中心点缩放的,而且不影响其余盒子
      
   综合写法
      位移要放在最后面
      transform:translate(10px,10px) rotate(180deg) scale(1.2) ;



  动画 animation
     制作动画应用步骤
     一. 先定义动画
     二. 在应用(调用)动画
    1. 先定义动画 - 应用 keyframes 定义动画(相似定义类选择器)@keyframes 动画名称 {0%{}
         100%{}}
    动画序列:1.0% 是动画的开始,100% 是动画的完结,这样的规定就是动画序列
      2. 在 @keyframes 中规定某项 css 款式,就能创立由以后款式逐步改为新款式的动画成果
      3. 动画是使元素从一种款式逐步变动为另一种款式的成果,您能够扭转任意多的款式任意多的次数
      4. 请用百分比来规定变动产生的工夫,或用关键词 "form" 和 "to",等同于 0% 和 100%

   二. 在应用(调用)动画
      div{
        width:150px;
        height:150px;
        background-color: pink;    
        调用动画
        animation-name: 动画名称;
        持续时间
        animation-auration: 持续时间;       
       }  
       div{
        width:150px;
        height:150px;
        background-color: pink;
        /* 动画名称   */
        animation-name:mycartoon; 
        /* 持续时间 */
        animation-duration: 3s;   
        /* 静止曲线 linear 匀速 */
        animation-timing-function: ease-in-out;  
        /* 何时开始 (1 秒后开始)*/
        animation-delay: 1s;
        /* 反复次数 iteration 反复的   conut 次数   infinite 有限 */
        /*animation-iteration-count: infinite;*/
        /* 是否反方向播放 默认 normal  如果想要反方向就写 alternate*/
        /*animation-direction:alternate; */
        /* 动画完结后的状态,默认是 backwards, 回到起始状态,咱们能够让他停留在完结状态 forwards*/
        animation-fill-mode: forwards;
       }  
       div:hover{
        /* 鼠标通过 div 让这个 div 进行动画,鼠标来到就持续动画 */
        animation-play-state:paused;
       }        

    animation 简写
    animation: 动画名称 持续时间 静止曲线 何时开始 播放次数 是否反方向 动画起始或者借完结状态  步数
    animation:mycartoon 3s     linear     0s    infinite alternate     forwards         steps() ;

    1. 简写属性外面不蕴含 animation-play-state
    2. 暂停动画:animation-play-state:paused; 常常和鼠标通过等其余配合应用
    3. 想要动画走回来,而不是间接跳回来 animation-direction:alternate;
    4. 盒子动画完结后,停在完结地位:animation-fill-mode: forwards;


  速度曲线
    animation-timing-function: 规定动画的速度曲线,默认是 ease
      值                             形容
    linear                      动画从头到尾的速度是雷同的,匀速
    ease                        默认,动画以低速开始,而后放慢,在完结前变慢
    ease-in                     动画以低速开始
    ease-out                    动画以低速完结
    ease-in-out                 动画以低速开始和完结
    steps()                     指定了工夫函数中的时隔数量(步长)
退出移动版