page contents

CSS3动画和HTML5新特性有哪些？

CSS3动画和HTML5新特性有哪些？

attachments-2021-08-oCg0b32f612072de4b1fc.jpg

CSS3动画和HTML5新特性有哪些？

一、css3动画

☺css3动画相对于通过JavaScript动态改变元素样式性能更好，更加容易。CSS3中有三个关于动画的属性：transform、transition和animation。
1、transform
transform主要用来改变元素形状：rotate（旋转）、scale（缩放）、skew（扭曲）、translate（移动）和matrix（矩阵变形）。
例：

1
2
3
.transform-class {
    transform ： rotate(30deg) scale(2,3);
}

1.1、transform-origin基点
所有变形都基于基点，基点默认为元素的中心点。用法：transform-origin:(x,y)，X、Y可以是百分比、px、rem，也可以是left、right、center（X）和top、center、bottom（Y）。
例：

1
2
3
.transform-class {
    transform-origin: (left, bottom);
}

1.2、rotate旋转
通过指定的角度对元素进行旋转变形，若正数则为顺时针旋转，若负数则为逆时针旋转。
例：

1
2
3
.transform-rotate {
    transform: rotate(30deg);
}

1.3、scale缩放
scale有三种用法：scale(x,y)、scaleX(x)、scale(Y)。缩放比例如果大于1则放大，等于1 为原始大小，小于1则缩小。
例：

1
2
3
4
5
6
7
8
9
10
11
.transform-scale {
    transform: scale(2,1.5);
}
 
.transform-scaleX {
    transform: scaleX(2);
}
 
.transform-scaleY {
    transform: scaleY(1.5);
}

1.4、translate移动
translate有三种情况：translate(x,y)、translateX(x)、translateY(y)。
例：

1
2
3
4
5
6
7
8
9
10
11
.transform-translate {
    transform: translate(400px, 20px);
}
 
.transform-translateX {
    transform: translateX(300px);
}
 
.transform-translateY {
    transform: translateY(20px);
}

1.5、skew扭曲
skew有三种写法：skew(xdeg,ydeg)、skewX(xdeg)、skewY(ydeg)，单位deg为角度。
例：

1
2
3
4
5
6
7
8
9
10
11
.transform-skew {
    transform: skew(30deg, 10deg);
}
 
.transform-skewX {
    transform: skewX(30deg);
}
 
.transform-skewY {
    transform: skewY(10deg);
}

1.6、matrix
2、transition
transition是用来设置元素是如何从一种状态平滑到另外一种状态：

  • transition-property（变换的属性）
  • transition-duration（变换延续的时间）
  • transition-timing-function（变换的速率）
  • transition-delay（变换的延迟）

3、animation
animation比较类似于flash中的逐帧动画，就像电影的播放一样，表现非常细腻并且有非常大的灵活性。而transition只指定了开始和结束状态。逐帧动画由关键帧组成，很多个关键帧的连续播放就组成了动画，在CSS3中是由属性keyframes来完成逐帧动画的。
@keyframes

  • animationName：动画名称（自己命名）
  • percentage：百分比值 [pəˈsentɪdʒ]
  • properties：样式属性名称（color、left等）
     

例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
@keyframes animationName {
   from {
       properties: value;
   }
   percentage {
       properties: value;
   }
   to {
       properties: value;
   }
}
//or
@keyframes animationName {
   0% {
       properties: value;
   }
   percentage {
       properties: value;
   }
   100% {
       properties: value;
   }
}

二、H5新特性

  1. 用于绘画 canvas 元素。
  2. 用于媒介回放的 video 和 audio 元素。
  3. 本地离线存储至localStorage 长期存储数据，浏览器关闭后数据不丢失；sessionStorage 的数据在浏览器关闭后自动删除。
  4. （新标签）语意化更好的内容元素

在这里插入图片描述

表单控件：calendar、date、time、email、url、search。

（选择器）
 

在这里插入图片描述
在这里插入图片描述

更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。

程序员编程交流QQ群：805358732

如果你想用Python开辟副业赚钱，但不熟悉爬虫与反爬虫技术，没有接单途径，也缺乏兼职经验
关注下方微信公众号：Python编程学习圈，获取价值999元全套Python入门到进阶的学习资料以及教程，还有Python技术交流群一起交流学习哦。

attachments-2022-06-S3ExJVpv62afc8ec80d5c.jpeg

你可能感兴趣的文章

相关问题

0 条评论

请先 登录 后评论
轩辕小不懂
轩辕小不懂

2403 篇文章

作家榜 »

  1. 轩辕小不懂 2403 文章
  2. 小柒 1470 文章
  3. Pack 1135 文章
  4. Nen 576 文章
  5. 王昭君 209 文章
  6. 文双 71 文章
  7. 小威 64 文章
  8. Cara 36 文章

轩辕小不懂

如果觉得我的文章对您有用，请随意打赏。你的支持将鼓励我继续创作！