Web前端——HTML5与CSS3新增内容

Web前端笔记

第四部分：HTML5与CSS3

1. 圆角border-radius

• 各种圆角实例
  /左上角60的圆弧/
  /border-top-left-radius: 60px;/
  /四个角设置相同的圆弧/
  /border-radius: 60px;/
  /四个角用边长的做圆弧/
  /border-radius: 30%;/
  /正方形画成一个正圆/
  /border-radius: 50%;/
  /*同时分别设置四个角： */
  /border-radius:30px 60px 120px 150px;/

2. rgba（新的颜色值表示法）

• 1、盒子透明度表示法：
  .box
  {
  opacity:0.3;
  filter:alpha(opacity=10); /* 兼容IE */
  }
  /上面写法，盒子整体都透明了，文字也变透明了/

• 2、rgba(0,0,0,0.1) 前三个数值表示颜色，第四个数值表示颜色的透明度
  /只设置背景色和背景色透明度/
  /不会影响文字其它内容的透明度/

3. transition过渡动画

• 属性设置
  1、transition-property 设置过渡的属性，比如：width height background-color
  2、transition-duration 设置过渡的时间，比如：1s 500ms
  3、transition-timing-function 设置过渡的运动方式，常用有 linear(匀速)|ease(缓冲运动)
  4、transition-delay 设置动画的延迟
  5、transition: property duration timing-function delay 同时设置四个属性

  一般和hover同时使用，鼠标放在上面后动画开始：

  /宽和高同时变化的动画/
  transition: width 1s ease, height 1s ease;
  .box:hover{
  width: 500px;
  height: 500px;
  }

  /最后一个2s是延时2s后颜色变化，变化耗时3s/
  transition: width 1s linear, height 1s ease, background-color 3s linear 2s;
  /所有属性同时动画，不写延时，过渡时间设置相同就可以/
  /多个属性同时动画可以合并为以下一句/
  transition: all 1s ease;

• transition总结：
  transition是为了配合transform使用，transform设置变形前后的状态，transition显示过渡的动画
  一般都是通用下面一句，显示所有动画，时间和形式可以调整
  transition: all 1s ease;

4. transform变换（盒子变形）

• transform和transition设置的是一个变形动画，不会影响整体的盒子布局，因此性能较好

• 盒子变形动画，变形后鼠标拿开后效果消失，对布局不会产生影响

• 下层盒子变形时不会影响上层的盒子（变大重合的部分会在上层盒子底部，不会覆盖上层的盒子，类似于图层一样）

• 注意:transform设置都是静态的变化（起点和终点的状态）

• 显示过渡动画还是需要结合transition动画(直接使用显示所有的过渡动画：transition: all 1s ease;)

  transform: translate(0px, 0px); 盒子变形前位置(初始值写上，不设置容易出现跳变的bug)
  transition: all 1s ease; 过渡动画
  .box:hover{transform: translate(50px, 50px); 盒子变形后位置

• 属性设置
  1、translate(x,y) 设置盒子位移
  translate位移比position的left和top位移性能高
  2、scale(x,y) 设置盒子缩放
  3、rotate(deg) 设置盒子旋转
  4、skew(x-angle,y-angle) 设置盒子斜切（用的较少）
  5、perspective 设置透视距离
  6、transform-style flat | preserve-3d 设置盒子是否按3d空间显示
  7、translateX、translateY、translateZ 设置三维移动
  8、rotateX、rotateY、rotateZ 设置三维旋转
  9、scaleX、scaleY、scaleZ 设置三维缩放
  10、transform-origin 设置变形的中心点
  11、backface-visibility 设置盒子背面是否可见

• transform变形总结：
  transform变形配合transition动画和hover使用
  transform设置变形前后的状态，transition显示过渡的动画
  样式里面写变形前的起点状态，hover里面写变形后的状态，鼠标放上去后就显示过渡动画
  鼠标拿走后恢复变形前的状态
  变形前的初始值写上，不设置容易出现跳变的bug

  • 参考实例

5. animation动画

• 动画样式需要单独写在样式前面
  -（动画书写使用 from（初始状态） to（终点状态），使用transform变换（盒子变形）里面的属性设置）

• 页面加载后，animation动画会自动播放（前面的transition过渡动画要配合hover鼠标放上去后播放）

• 属性设置
  1、@keyframes 定义关键帧动画
  在类样式之前单独设置动画
  2、animation-name 动画名称
  3、animation-duration 动画时间
  4、animation-timing-function 动画曲线 linear(匀速)|ease(缓冲)|steps(步数)（起点和终点状态通过多次达到，参考人物行走动画）
  5、animation-delay 动画延迟（延时0s可以省略不写）
  6、animation-iteration-count 动画播放次数 n|infinite（无限次，一直循环播放）
  7、animation-direction 动画结束后是否反向还原 normal|alternate
  一去一来算2次
  8、animation-play-state 动画状态 paused(停止)|running(运动)
  配合hover使用，鼠标放置在动画后停止（默认是运动的，也可以一开始设置暂停，hover设置运动）
  9、animation-fill-mode 动画前后的状态 none(缺省)|forwards(结束时停留在最后一帧)|backwards(开始时停留在定义的开始帧)|both(前后都应用)
  10、animation:name duration timing-function delay iteration-count direction;同时设置多个属性

• animation动画总结
  animation动画网页显示时候，动画自动播放，不需要使用hover伪类（也可以使用）
  动画设置：使用@keyframes的 from（变形状态）to（变形后状态）设置动画前后的状态，
  动画过渡设置：animation设置过渡动画的效果，相对于transition可以设置的属性更多
  前后状态可以使用transform变形，position定位等属性设置

  • 参考实例

6. CSS3 浏览器前缀

• 浏览器样式前缀
  为了让CSS3样式兼容，需要将某些样式加上浏览器前缀：
  -ms- 兼容IE浏览器
  -moz- 兼容firefox
  -o- 兼容opera
  -webkit- 兼容chrome 和 safari

  比如CSS3中的变形，旋转30deg
  div
  {
  -ms-transform: rotate(30deg);
  -webkit-transform: rotate(30deg);
  -o-transform: rotate(30deg);
  -moz-transform: rotate(30deg); (一般只需加这句就可以了，上面三句一般不用写)
  transform: rotate(30deg);
  }

• 自动添加浏览器前缀
  目前的状况是，有些CSS3属性需要加前缀，有些不需要加，
  有些只需要加一部分，这些加前缀的工作可以交给插件来完成，
  比如安装： autoprefixer

7. HTML5新增标签

• 一般实际开发并未使用，不利于SEO搜索排名

• 新增语义标签
  1、

  页面头部、页眉
  2、

  页面导航
  3、

  一篇文章
  4、

  文章中的章节
  5、

  侧边栏
  6、

  页面底部、页脚

• 音频视频
  1、
  2、

• PC端兼容h5的新标签的方法，在页面head标签中引入以下js文件:

8. HTML5 新增表单控件

• 实际开发不使用，新增的表单控件不同浏览器中显示样式不同，并且不好调整

• 实际开发还是使用form表单 label input type= name= value= 来单独设置，参考html表单实例

• 新增类型：网址 邮箱 日期 时间 星期 数量 范围 电话 颜色 搜索
  网址:
  
  
  邮箱:
  
  
  日期:
  
  
  时间:
  
  
  星期:
  
  
  数量:
  
  
  范围:
  
  
  电话:
  
  
  颜色:
  
  
  搜索:
  
  

• 新增常用表单控件属性：
  1、placeholder 设置文本框默认提示文字（表单中显示的提示文字，要输入的信息）
  2、autofocus 自动获得焦点（网页打开就可以直接表单输入信息，不用鼠标点击激活一下）
  3、autocomplete 联想关键词 （autocomplete=“off”关闭自动联想）

  • 参考010_html表单实例

9. CSS权重

• CSS权重指的是样式的优先级
  有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用,
  权重相同的，后写的样式会覆盖前面写的样式。

• 权重的等级
  可以把样式的应用方式分为几个等级，按照等级来计算权重
  1、!important，加在样式属性值后，权重值为 10000
  2、内联样式，如：style=””，权重值为1000
  3、ID选择器，如：#content，权重值为100
  4、类，伪类和属性选择器，如： content、:hover 权重值为10
  5、标签选择器和伪元素选择器，如：div、p、:before 权重值为1
  6、通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~）、权重值为0