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 相关文章推荐
CSS3弹性布局内容对齐(justify-content)属性使用详解
Jul 31 HTML / CSS
CSS3 实现侧边栏展开收起动画
Dec 22 HTML / CSS
巧用CSS3的calc()宽度计算做响应模式布局的方法
Mar 22 HTML / CSS
CSS3实现图片抽屉式效果的示例代码
Nov 06 HTML / CSS
前端canvas动画如何转成mp4视频的方法
Jun 17 HTML / CSS
HTML5的hidden属性兼容老浏览器的方法
Apr 23 HTML / CSS
详解html2canvas截图不能截取圆角图片的解决方案
Jan 30 HTML / CSS
canvas环形倒计时组件的示例代码
Jun 14 HTML / CSS
html5手机键盘弹出收起的处理
Jan 20 HTML / CSS
html5关于外链嵌入页面通信问题(postMessage解决跨域通信)
Jul 20 HTML / CSS
HTML5 video进入全屏和退出全屏的实现方法
Jul 28 HTML / CSS
详解如何将 Canvas 绘制过程转为视频
Jan 25 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
实现“上一页”和“下一页按钮
2006/10/09 PHP
打造计数器DIY三步曲(上)
2006/10/09 PHP
PHP登录验证码的实现与使用方法
2016/07/07 PHP
PHP解决中文乱码
2017/04/28 PHP
在Z-Blog中运行代码[html][/html](纯JS版)
2007/03/25 Javascript
ExtJS判断IE浏览器类型的方法
2014/02/10 Javascript
jquery实现将获取的颜色值转换为十六进制形式的方法
2014/12/20 Javascript
js实现宇宙星空背景效果的方法
2015/03/03 Javascript
JavaScript关联数组用法分析【概念、定义、遍历】
2017/03/15 Javascript
解决webpack -p压缩打包react报语法错误的方法
2017/07/03 Javascript
Bootstrap与Angularjs的模态框实例代码
2017/08/03 Javascript
javascript数据结构之多叉树经典操作示例【创建、添加、遍历、移除等】
2018/08/01 Javascript
JavaScript惰性载入函数实例分析
2019/03/27 Javascript
Vue开发Html5微信公众号的步骤
2019/04/11 Javascript
node.js 基于 STMP 协议和 EWS 协议发送邮件
2021/02/14 Javascript
[03:31]DOTA2英雄基础教程 大地之灵
2013/12/17 DOTA
[01:02:06]LGD vs Mineski Supermajor 胜者组 BO3 第二场 6.5
2018/06/06 DOTA
[59:42]Secret vs Alliacne 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
在Python程序中进行文件读取和写入操作的教程
2015/04/28 Python
通过python爬虫赚钱的方法
2019/01/29 Python
Python3.5以上版本lxml导入etree报错的解决方案
2019/06/26 Python
python调用其他文件函数或类的示例
2019/07/16 Python
python实现按首字母分类查找功能
2019/10/31 Python
Pytorch之保存读取模型实例
2019/12/30 Python
nginx搭建基于python的web环境的实现步骤
2020/01/03 Python
Tensorflow获取张量Tensor的具体维数实例
2020/01/19 Python
Python2.7:使用Pyhook模块监听鼠标键盘事件-获取坐标实例
2020/03/14 Python
python图片合成的示例
2020/11/09 Python
python数据抓取3种方法总结
2021/02/07 Python
香港最新科技与优质家居产品购物网站:J SELECT
2018/08/21 全球购物
vue+django实现下载文件的示例
2021/03/24 Vue.js
洗煤厂厂长岗位职责
2014/01/03 职场文书
优秀团队获奖感言
2014/02/19 职场文书
高级工程师英文求职信
2014/03/19 职场文书
简历中的自我评价怎么写呢?
2019/04/30 职场文书
python3 实现mysql数据库连接池的示例代码
2021/04/17 Python