20200818岳浩天

知识

转换transform

2D转换

位移translate():translate(x,y)指定元素在x轴和y轴上的位移

translate(x)和translateX(x) : 指定元素在x轴上的位移

translateY(y):指定元素在y轴上的位移

3D转换

透视距离:perspective

​ 定义:模拟人的眼睛到3D转换的元素之间的距离。距离不同,看到效果不同

3D旋转

rotateX(xdeg):以x轴为中心,旋转元素 ,rotateY(ydeg)、rotateZ(zdeg)相同

rotate3D(1,1,1,45deg):x,y,z取值为0表示不参与旋转,取值大于0,表示该轴参与旋转

3D位移

translateX(n) 指定元素在x轴上的位移,translateY(n)、translateZ(n)相同

translate3D(100px,100px,200px):指定对象的3D位移。第1个参数对应X轴,第2个参数对应Y轴,第3个参数对应Z轴

3D缩放

scaleX(n)单独设置x轴缩放scaleY(n)、scaleZ(n)相同

scale3D(.5,.4,.8)指定对象的3D缩放。第1个参数对应X轴,第2个参数对应Y轴,第3个参数对应Z轴

transform-style:嵌套元素在3D空间显示

flat子元素将不保留其3d位置

preserve-3d子元素将保留其3d位置

transform-origin转换原点

1.以px为单位的数字

2.%

3.关键字(x:left/center/right、y:top/center/bottom)

取值个数

​ 2d:两个值,表示原点在x轴上和y轴上的位置

​ 3d:三个值,x,y,z轴上的位置

过渡

使css的值,在一段时间内平缓变化的效果。过度的代码要写在原本样式中,过渡效果有去有回,如果写在hover中,过渡效果有去无回

transition属性

transition-property检索或设置对象中的参与过渡的属性

支持过渡的属性:颜色、多数取值为具体数字的属性、阴影、transform、visibility

transition-duration检索或设置对象过渡的持续时间,取值以s/ms为单位的数字

transition-timing-function检索或设置对象中过渡的动画类型(过渡时间曲线函数)

transition-timing-function取值:

​ 关键字:ease默认值,慢开,中快,慢关

​ linear 全程匀速

​ ease-in慢开,快关

​ ease-out快开,慢关

​ ease-in-out慢速开始,慢速结束,中间先变快后变慢

贝塞尔曲线:cubic-bezier(0.57.0.05.0.68.0.19):自由落体

transition-delay检索或设置对象延迟过渡的时间

动画

声明动画@keyframes 名称{
0%{ /代码样式/ }
50%{ /代码样式/ }
100%{ /代码样式/ }
}

使用动画

animation-name: 动画名称

animation-duration: n s/ms设置动画执行时间

animation-delay: n s/ms延迟

animation-iteration-count:infinite播放次数 无线循坏

animation-direction:reverse播放顺序 倒序

animation-play-state鼠标悬停paused暂停

心得

今天学习的知识是我经常用到且感兴趣的,但是依旧有很多不熟悉的知识,练习的话,写华为官网让我对不熟悉弹性布局更加的熟练。

标签

评论

© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1