h5优劣 c3属性选择器 滤镜效果 c3过渡transition 转换transform

滤镜效果 c3过渡transition 转换transform"/>

h5优劣 c3属性选择器 滤镜效果 c3过渡transition 转换transform

2021/01/02

html5 劣势
兼容问题 低版本ie浏览器 对h5新增语义化标签不支持

html5 优势

• h5新增多媒体标签：

  • audio 音频
  • video 视频 （支持格式ogg mpeg4 文本）
    -h5新增input标签属性

• css3属性选择器（了解）

• • 例子
  • 记得中括号是 【属性选择符】 就行。
  • 做一些框架封装的人员会使用得比较多。

• 滤镜效果（了解）

  • 前端不是专业搞图片的，一般有专业的人员设置
  • 如何书写 .class{filter:}

• css3过渡： transition

  • 控制标签从一种或多种状态过渡到另外一种状态(写给自身)
  • display:none; visibility:hidden; 没有中间状态（没有过渡效果）
  • 过渡transition 复合属性 有四个小属性
    • transition-property： //设置标签要有过渡效果的属性； 必要
    • transition-duration： //设置过渡的持续时间 ；必要
    • transition-timing-function: //设置过渡的速度曲线；(linear匀速【重要】 ease先快后慢 )；
    • transition-delay : //设置过渡的延迟时间；（使用场景不多）
  • 多个属性不同过渡时间写法：
    transiton:color 2s,border-radius 3s;
  • 过渡添加到：hover上，会造成鼠标移出时没有过渡效果（分析过渡效果给谁）

• css3转换：transform

  • transform translate位移
    • transform : translate(水平，处置)； //跟margin top left 类似 都可以控制元素位置 互不影响；
      • 布局时 大的位置效果使用定位position;
      • 小的效果微调时 使用margin或者translate;
        • margin做移动： 会挤开相邻元素，百分比是相对父元素的宽度
        • translate做移动： 不会挤开相邻元素，百分比是相对自身的宽度
  • transform rotate旋转
    • transform : rotale(角度deg);
  • transform scale缩放
    • transform：scale（倍数，倍数）：宽高都放大一倍
      • 值大于1时，为放大效果
      • 值小于1时，为缩小效果

tip:

1. 复合属性transform写法使用空格
2. 先平移再旋转 先旋转再平移 效果不一样
3. css3旋转中心点 transform-origin
   • transform-origin :
   • 方向 left right top bottom
   • xy值