你的位置:首页 > 网页设计

[网页设计]01.CSS动画

 

transform:  

  translate(参数1,参数2);让元素在X轴与Y轴方向发生偏移-->参数1:X;参数2:Y

  rotate(参数1);让元素进行旋转;单位(deg)

  scale(参数1,参数2);让元素在X轴与Y轴放大或缩小多少倍-->参数1:X;参数2:Y

  skew(参数1,参数2);skew(30deg,20deg)-->围绕 X 轴把元素翻转 30 度,围绕 Y 轴翻转 20 度

transition:过渡效果

  transition: all 1s linear 3s;

  *过渡效果

  参数1:用来指定对那些属性使用过渡效果  参数2:过渡效果的持续时间  参数3:过渡效果的显示速度变化  参数4:用来指定过渡效果的延迟时间*/
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <style>  #div1{   width: 100px;   height: 100px;   /*过渡效果    参数1:用来指定对那些属性使用过渡效果    参数2:过渡效果的持续时间    参数3:过渡效果的显示速度变化    参数4:用来指定过渡效果的延迟时间*/   transition: all 1s linear 3s;   border: 1px solid red;   margin: auto;   background-image: url("../../../img/f3_Android1.png");   background-size: 100% 100%;  }  #div1:hover{   /*translate:让元素在X和Y轴发生偏移 参数1:X轴方向偏移 参数2:Y轴方向偏移    translatex:让元素在X轴方向发生偏移    translatey:让元素在Y轴方向发生偏移*/   /*transform: translate(50px,0);*/   /*scale:让元素在X轴和Y轴都发生缩放 参数1:X轴方向的方法倍数 参数2:Y轴方向的放大倍数    scaleX:让元素在X轴方向发生缩放    scaleY:让元素在Y轴方向发生缩放*/   transform: scaleX(1.5);   /*rotate:让你的元素按照指定的中心点进行旋转    rotateX:让元素沿着X轴旋转    rotateY:让元素沿着Y轴旋转   */   /*transform: rotateY(180deg);*/   /*transform: skewY(-90deg);*/   /*transform-origin:用来设置旋转的中心点*/   /*transform-origin: left;*/  } </style> <title>变形效果</title></head><body><div id="div1"></div></body></html>