HTML5新特性+css新特性

zwt菇凉
1,317 阅读4分钟

HTML5新特性？

  1. 新增的语义化元素

    header、footer、section、nav、aside、article 合适的标签做合适的事情!

  1. 新增input输入类型，这些新特性提供了更好的输入控制和验证：

例如：date、color、number、email

  1. HTML5新增表单元素:

  1. 新增的表单属性：

例如：placehoder

  1. 音频视频：audio、video
  2. canvas ：画图形的，（柱状图、统计图）
  3. 新增的事件：

onresize(当屏幕尺寸发生改变的时候)、ondrag（拖拽）、onscroll（在元素滚动条在滚动时触发）、onmousewheel（滚轮滚动）、onerror（资源加载失败）、onplay（开始播放）、onpause（暂停播放）

CSS3新特性？

  1. 选择器

:last-child /* 选择元素最后一个孩子 / :first-child / 选择元素第一个孩子 / :nth-child(1) / 按照第几个孩子给它设置样式 / :nth-child(even) / 按照偶数 / :nth-child(odd) / 按照奇数 / :disabled / 选择每个禁用的E元素 / :checked / 选择每个被选中的E元素 / :not(selector) / 选择非 selector 元素的每个元素 / ::selection / 选择被用户选取的元素部分

伪元素： ::before {} 选择器在被选元素的前面插入内容和定义css，使用 content 属性来指定要插入的内容。 ::after {} 选择器在被选元素的后面插入内容和定义css，使用 content 属性来指定要插入的内容。 :first-letter 选择该元素内容的首字母 :first-line 选择该元素内容的首行 ::selection 选择被用户选取的元素部分 2. 背景和边框

background-size：规定背景图片的尺寸（cover：填充；100% 100%：拉伸） background-origin：规定背景图片的定位区域 对于 background-origin 属性，有如下属性 背景图片可以放置于 content-box、padding-box 或 border-box 区域

边框： border-radius：圆角 box-shadow / text-shadow：阴影 border-image：边框图片

  1. 文本效果

4.2D/3D 转换 2D 转换（transform）

  • translate()：元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数。 + transform: translate(50px, 100px);
  • rotate()：元素顺时针旋转给定的角度。若为负值，元素将逆时针旋转。transform: rotate(30deg);
  • scale()·：元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数，也可以一个值（宽高）。transform: scale(2,4);
  • skew()：元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数。transform: skew(30deg, 20deg);
  • matrix()： 把所有 2D 转换方法组合在一起，需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。transform:matrix(0.866,0.5,-0.5,0.866,0,0);

3D转换: rotateX()：元素围绕其 X 轴以给定的度数进行旋转。transform: rotateX(120deg); rotateY()：元素围绕其 Y 轴以给定的度数进行旋转。transform: rotateY(130deg); perspective：规定 3D 元素的透视效果

5.动画、过渡 过渡效果( transition) ,使页面变化更平滑,以下参数可直接写在transition后面

  1. transition-property :执行动画对应的属性,例如color , background等,可以使用all来指定所有的属性。
  2. transition-duration :过渡动画的一个持续时间。
  3. transition-timing-function :在延续时间段,动画变化的速率,常见的有: ease | linear | ease-in | ease-out| ease-in-out | cubic-bezier
  4. transition-delay :延迟多久后开始动画

动画( animation ) 先定义@keyframes规则( 0% , 100% |from, to ) 然后定义animation ,以下参数可直接写在animation后面

  1. animation-name:定义动画名称
  2. animation-duration: 指定元素播放动画所持续的时间长
  3. animationtiming-function: ease| linear | ease-in | ease-out | ease-in-out | cubic-bezier(,..):指元素根据时间 的推进来改变属性值的变换速率,即动画的播放方式
  4. animation-delay: 指定元素动画开始时间
  5. animation-iteration-count: infinite | number :指定元素播放动画的循环次数
  6. animation-direction: normal | alternate :指定元素动画播放的方向,其只有两个值,默认值为normal ,如果设 置为normal时,动画的每次循环都是向前播放;另-个值是alternate ,规定动画在下一-周期逆向地播放(来去 播放)
  7. animation-play-state: running | paused : 控制元素动画的播放状态

6.多列布局 通过CSS3 ,能够创建多个列来对文本进行布局

  1. column-count:规定元素应该被分隔的列数
  2. column-gap:规定列之间的间隔
  3. column-rule: 设置列之间的宽度、样式和颜色规则

7.用户界面

8.渐变，CSS3新增了渐变效果，包括

linear-gradient(线性渐变)radial-gradient(径向渐变)

avatar
文章
阅读
粉丝