h5中简单的运动

transform:改变
translate(200px,0)  平移
        x   y

scale(2,2)              缩放
      x y   
    可缩放倍数,可以实现水平垂直翻转

rotate(45deg)       旋转
       角度

skew(45deg,45deg)   斜切  
      角度 角度 

修改旋转中心
transform-origin:center bottom
          位置   位置

perspective(800px)  视距（透视）

transform-style:preserve-3d;  真正的3D
给父级添加
注意：
1.  transform-style: preserve-3d; 不能继承
    
2.初始值哪怕是0也要加

transition:1s       all/属性值       ease
过度     时间    要变换的样式    运动形式

backface-visibility: hidden;
隐藏被旋转的 div 元素的背面：

滤镜
-webkit-filter:blur(px);
1.图像高斯模糊
-webkit-filter:blur(4px);
范围随便写就行，记得加px

图片进行棕褐色处理
-webkit-filter:sepia(1);
处理范围是0-1或者0%-100%
图片灰色处理
-webkit-filter:grayscale(1);
范围是 0-1或者0%-100%
图片反色处理
-webkit-filter:invert(1);
范围是 0-1或者0%-100%
图像饱和度调节
-webkit-filter:saturate(30);
范围是取值范围>=0数字或百分比 1为无效果，0为灰度图
图像对比度调节
-webkit-filter:contrast(90);
取值范围>=0数字或百分比 1为无效果
图像亮度调节
-webkit-filter:brightness(3);
取值范围>=0数字或百分比 1为无效果
图像色相旋转
-webkit-filter:hue-rotate(300deg);
取值范围0deg-365deg, 0默认值，为无效果
阴影滤镜
-webkit-filter:drop-shadow(5px 5px 3px #333);

animation***重点
定义动画
@keyframes 动画名{
    0% {
        //要变化的样式
    }
    54%{
    }
    100%{
    }
}
调用
animation:动画执行时间 4s/4000ms  动画名  动画形式 ease linear 动画次数 infinite/356

省略号：
单行省略
width:200px
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
多行省略
-webkit-line-clamp
文字对齐方向
unicode-bidi: bidi-override;
direction: rtl;/ltr

h5中简单的运动

推荐阅读更多精彩内容