CSS3动画和HTML5新特性详解


Posted in HTML / CSS onAugust 31, 2020

一、css3动画

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

.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)。
例:

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

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

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

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

.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)
例:

.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为角度。
例:

.transform-skew {
    transform: skew(30deg, 10deg);
}

.transform-skewX {
    transform: skewX(30deg);
}

.transform-skewY {
    transform: skewY(10deg);
}

1.6、matrix
略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等)
     

例:

@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. 新标签)语意化更好的内容元素

CSS3动画和HTML5新特性详解

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

选择器
 

CSS3动画和HTML5新特性详解
CSS3动画和HTML5新特性详解

到此这篇关于CSS3动画和HTML5新特性详解的文章就介绍到这了,更多相关css3动画 html5新特性内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
详解CSS的border边框属性及其在CSS3中的新特性
May 10 HTML / CSS
纯CSS实现预加载动画效果
Sep 06 HTML / CSS
用纯CSS3实现网页中常见的小箭头
Oct 16 HTML / CSS
使用css实现android系统的loading加载动画
Jul 25 HTML / CSS
移动端适配 使px自动转换rem
Aug 26 HTML / CSS
html5组织文档结构_动力节点Java学院整理
Jul 11 HTML / CSS
HTML5 video 事件应用示例
Sep 11 HTML / CSS
canvas里面如何基于随机点绘制一个多边形的方法
Jun 13 HTML / CSS
Html5在手机端调用相机的方法实现
May 13 HTML / CSS
在HTML中引入CSS的几种方式介绍
Dec 06 HTML / CSS
table设置超出部分隐藏,鼠标移上去显示全部内容的方法
Dec 24 HTML / CSS
Li list-style-image 图片垂直居中实现方法
May 21 HTML / CSS
详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用
Aug 24 #HTML / CSS
css3实现动画的三种方式
Aug 24 #HTML / CSS
使用CSS3实现字体颜色渐变的实现
Aug 10 #HTML / CSS
CSS3实现线性渐变用法示例代码详解
Aug 07 #HTML / CSS
CSS3 input框的实现代码类似Google登录的动画效果
Aug 04 #HTML / CSS
纯CSS3+DIV实现小三角形边框效果的示例代码
Aug 03 #HTML / CSS
纯CSS3实现鼠标滑过按钮动画第二节
Jul 16 #HTML / CSS
You might like
PHP Class&Object -- 解析PHP实现二叉树
2013/06/25 PHP
php使用fopen创建utf8编码文件的方法
2014/10/31 PHP
在Mac OS上自行编译安装Apache服务器和PHP解释器
2015/12/24 PHP
php单链表实现代码分享
2016/07/04 PHP
Apache PHP MySql安装配置图文教程
2016/08/27 PHP
js对列表中第一个值处理与jsp页面对列表中第一个值处理的区别详解
2013/11/05 Javascript
原创jQuery弹出层插件分享
2015/04/02 Javascript
JavaScript按值删除数组元素的方法
2015/04/24 Javascript
jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码
2015/10/30 Javascript
Jquery ajax加载等待执行结束再继续执行下面代码操作
2015/11/24 Javascript
一种新的javascript对象创建方式Object.create()
2015/12/28 Javascript
浅谈jQuery添加的HTML,JS失效的问题
2016/10/05 Javascript
javascript容错处理代码(屏蔽js错误)
2017/01/20 Javascript
Bootstrap按钮组简单实现代码
2017/03/06 Javascript
react配合antd组件实现的管理系统示例代码
2018/04/24 Javascript
JS中‘hello’与new String(‘hello’)引出的问题详解
2018/08/14 Javascript
vue 表单之通过v-model绑定单选按钮radio
2019/05/13 Javascript
DWR内存兼容及无法调用问题解决方案
2020/10/16 Javascript
用webAPI实现图片放大镜效果
2020/11/23 Javascript
[00:32]2018DOTA2亚洲邀请赛出场——LGD
2018/04/04 DOTA
python去掉 unicode 字符串前面的u方法
2018/10/21 Python
pandas 转换成行列表进行读取与Nan处理的方法
2018/10/30 Python
10个Python面试常问的问题(小结)
2019/11/20 Python
利用python实现.dcm格式图像转为.jpg格式
2020/01/13 Python
python 线程的五个状态
2020/09/22 Python
如何利用Python 进行边缘检测
2020/10/14 Python
Python根据URL地址下载文件并保存至对应目录的实现
2020/11/15 Python
Mountain Warehouse德国官网:英国户外零售商
2019/08/11 全球购物
师范毕业生自荐信
2013/10/17 职场文书
一年级家长会邀请函
2014/01/25 职场文书
园艺师求职信
2014/04/27 职场文书
成事在人观后感
2015/06/16 职场文书
《秋天的图画》教学反思
2016/02/19 职场文书
2019年教师节:送给所有老师的祝福语
2019/09/05 职场文书
网络安全倡议书(3篇)
2019/09/18 职场文书
python模拟浏览器 使用selenium进入好友QQ空间并留言
2022/04/12 Python