CSS3动画及3D初识

CSS3中动画:

animation：动画（通过在animation属性中设置关键帧属性值，用来实现一个更为复杂的动画效果。）（连写顺序为：animation: animation-name animation–duration animation-timing-function animation-delay animation-iteration-count animation-direction；）。

animation–duration： 过渡时间。

animation-timing-function： 过渡方式。（属性值与transition-timing-function属性值相同。）

animation-delay： 延迟时间。

animation-iteration-count： 动画的播放次数。（默认值为1，infinite表示无限次播放）

animation-direction： 动画的播放方向。（normal：动画每次都是循环向前播放、alternate：动画播放为偶数次则向前播放，为单数则为反向播放。）

@keyframes：关键帧（定义动画名称。各个浏览器有时需要进行单独的兼容设置。）

（谷歌、苹果浏览器：-webkit-、火狐浏览器：-moz-、IE浏览器：-ms-、欧朋浏览器：-o-）

animation-fill-mode：设置动画时间之外的状态。（none：不改变默认行为、forwards ：当动画完成后，保持最后一个关键帧、backwards：在延迟时间内，第一个关键帧、both：向前和向后填充模式都被应用。）

CSS3中3D:

用X、Y、Z分别表示空间的3个维度，三条轴互相垂直。注意+Y是向下的。

perspective：透视（通过perspective属性，可以定义3D 元素距视图的距离，单位是px。）

rotateX（）绕着x轴旋转、rotateY（）绕着y轴旋转、rotateZ（）绕着z轴旋转。（近大远小）

transform-style： 属性规定如何在 3D 空间中呈现被嵌套的元素。（注意：这个属性只能给父元素添加。）（属性值：flat:默认值，2d显示、preserve-3d: 3d显示）

transform-origin：x y; 设置元素转换的中心点。（默认为元素的中心点50% 50%，也可设置为top、bottom等方位名词。）

小动画体验：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;list-style: none;}@keyframes donghua {0% {position: absolute;top: 0;left: 0;transform: rotate(-30deg);}50% {position: absolute;top: 600px;left: 45%;}100% {position: absolute;top: 0;left: 90%;transform: rotate(30deg);}}div {width: 100vw;height: 100vh;background: linear-gradient(to bottom, blue, white);}img {animation: donghua 3s linear 0.5s infinite alternate;}</style>
</head><body><div><img src="./imgs/balloon.png"></div>
</body></html>

总结：望各位大佬指正。

CSS3动画及3D初识相关推荐

前端 css3动画2D|3D
css3动画&2D|3D 一.css3的transform属性 2d坐标轴(图示) x轴:水平,向右为正,向左为负 y轴:垂直,向下为正,向上为负 2d转换的方法 1.2D变形:平移.旋转.缩 ...
CSS3动画之3D动画
所有东西一跟3D扯上关系,复杂指数都是噌噌噌往上走.不过也正常,毕竟多了一个维度,要有三维应有的尊严. 3D Transforms要怎么写?能写翻牌效果吗?能写翻书效果吗?能写出立体书的效果吗?点进来 ...
CSS3动画(2D/3D转换、过渡、动画和多列)
[index.html] <!DOCTYPE html> <html lang="en"> <head><meta charset=&qu ...
CSS3动画和3D动画
动画属性 :animation 1.animation-name (必要的)检索或设置对象所应用的动画名,必须与规则@keyframes配合使用, 定义关键帧: @keyframes mymove{} ...
css3动画实现3d旋转效果
这个项目我只用了css3中的animation和transition配合使用,主要是把六个面全部根据旋转角度与偏移实现的. 下面直接上代码. <!DOCTYPE html> <htm ...
CSS3动画正方体3D旋转
为什么80%的码农都做不了架构师?>>> 感谢万老师的讲课,无意中连接进入听了一下,感觉效果还不错,学习了一下. 先看效果: 代码如下: <!DocType html& ...
CSS3动画之3D旋转
今天分享一下一个用3d效果写出来的小demo 效果展示这个做出来的效果没有预想中的那么好看,不过还是勉勉强强可以看吧嘤嘤嘤. 实现前想说一下在做一个项目或者是小demo之前一定要好好构思,哪个盒子 ...
CSS3动画（2D，3D，自定义动画）
文章目录 css3过渡动画 1 css3动画之2D 1.1 transition过渡动画基础 1.1.1 实现缓入缓出或快入快出效果 1.1.2 实现一秒内变换宽度 1.1.3 实现一秒后变换宽度 1 ...
CSS3动画大全(附源码)flex布局,grid布局3d旋转,图像模糊,文字发光
CSS3动画大全(附源码)3d旋转,图像模糊,文字发光! 文章目录 CSS3动画大全(附源码)3d旋转,图像模糊,文字发光! html代码 css grid布局 flex布局文字发光 & 图 ...

CSS3动画及3D初识

CSS3动画及3D初识相关推荐

最新文章

热门文章