10. transform属性 box-shadow属性 text-shadow属性 animation属性

transform转换属性

transform:translate(100px,100px) scale(1.5) rotate(45deg);

translate(x,y) 定义平移 
translateX(x) / translateY(y) / translateZ(z) 定义在X / Y / Z轴上转换
scale(x,y) 定义缩放转换
rotate(45deg) 定义2D旋转, 规定角度 
rotateX(angle) / rotateY(angle) /  rotateZ(angle) 沿着X / Y / Z轴的3D旋转
perspective(n) 为3D转换元素定义透视视图 (近大远小效果) , 给需要呈现效果的父元素添加

• 形变中心点transform-origin: x-axis y-axis z-axis; 设置旋转元素的基点位置
  • 默认以自己的中心为旋转基点
  • 可以通过像素 / 百分比 / 方位单词来修改基点
    • transform转换练习:弹性练习 手风琴练习 开门模拟

box-shadow框阴影属性

box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow 必需, 水平阴影
x-shadow 必需, 垂直阴影
blur 可选, 模糊距离
spread 可选, 阴影尺寸
color 可选, 阴影的颜色-box颜色默认与内容颜色一致
inset 可选, 将外阴影(outset)转换成内阴影

text-shadow文本阴影属性

text-shadow: h-shadow v-shadow blur color;

h-shadow 必需, 水平阴影位置
v-shadow 必需, 垂直阴影位置
blur 可选. 模糊的距离
color 可选. 阴影颜色-文本阴影颜色默认与文字颜色一致

animation动画属性

简写: animation:name duration timing-function delay iteration-count direction;

   animation-name 必需. 规定需要绑定到选择器的keyframe名称
   animation-duration 必需. 动画执行的时长, 以秒或毫秒计算
   animation-timing-function 完成动画的速度曲线(取值与过渡属性一致, 参照上一章)
   animation-delay 动画开始之前的延迟, 值以秒或毫秒计(允许负值)
   animation-iteration-count 规定动画播放次数
                             取值: n | infinite 播放N次(默认1次)/ 无限次播放
   animation-direction 规定是否轮流反向播放动画
                       取值: normal | alternate 默认值, 正常播放/动画轮流反向播放

• 动画实现的三要素: 实现的动画 哪个选择器执行动画名 动画执行时长

• @keyframes规则

  @keyframes mymove{          //实现的动画 - 三要素之一
  from {top:0px;}
  to {top:200px;}
  }
  
  @keyframes mymove{
  0%   {top:0px;}
  25%  {top:200px;}
  50%  {top:100px;}
  75%  {top:200px;}
  100% {top:0px;}
   }
  

• animation-play-state 规定动画运行状态

  • 取值: running | paused 运行/暂停

• animation-fill-mode 规定动画时间之外的状态. 取值如下:

  • forwards 意思向前, 规定定格最后一帧动画图片
  • backwards 意思后退, 规定定格动画开始的第一帧动画图
  • both 向前和向后填充模式都被应用
  • none 默认值. 不改变默认行为