20200818 王维

学习总结

1.转换

多个转换函数之间用空格隔开

平移translate(x,y)同时设置元素在x轴和y轴上的平移

缩放scale(n),当n为负值时,元素反转

旋转rotate(ndeg),n为正数时,元素顺时针旋转n度,n为负数时,元素逆时针旋转

倾斜skew(ndeg),等同于skewX(ndeg),n为正,y轴逆时针倾斜;skewY(ndeg),n为正,x轴顺时针倾斜

perspective透视距离,模拟人眼到3d转换的元素之间的距离,取值为以px为单位的数字,注意此属性添加在3d转换的父元素身上

transfrom-style设置子元素在3d空间的显示方式,flat默认值,不保留3d位置,preserve-3d保留3d位置

transfrom-origin设置转换原点

2.过渡

transition:property duration timing-function delay过渡属性简写

第一个属性是设置支持过渡的属性,默认all,多个属性之间用空格分隔

第二个属性是设置过渡的持续时间

第三个是设置过渡动画速度,ease默认值,开始结束相对匀速漫,中间相对匀速快;linear匀速;ease-in开始慢,结束快;ease-out开始快,结束漫;ease-in-out开始慢后快再慢;cubic-bezier(n,n,n,n)n为0~1的的数字,cubic-bezier(0.57.0.05.0.68.0.19):自由落体

第四个属性为延迟过渡的时间

3.动画

animation : name duration timing-function delay count direction动画简写

name是定义的动画名称

count是动画播放的次数,无单位数字或者infinite无限

其他属性和过渡类似

animation-direction动画播放的顺序,normal正常播放,reverse逆序播放,alternate正逆轮流播放

animation-fill-mode动画播放之间和之后的状态,backwards将第一帧加入元素播放之间,forwards将最后一帧加入元素播放之后,none默认值,保持元素播放为播放时的状态,both同时设置backwards和forwards

animation-play-state鼠标悬停,动画状态,running默认值,继续播放,paused暂停

4.背向隐藏

backface-visibility设置背向隐藏样式,visible背面可见,hidden背面不可见

心得体会

css终于要学完了,但是学完不代表用的好,综合使用是一个考验,今天老师叫同学上去讲,其中一个同学讲到使用纯css做到点击内容的切换,用到了为了选择器中的状态伪类 选择器:checked 设置单选或复选按钮被选中的状态,启发很大,当时讲到这块内容时,就这样过去了,完全没有想到这样的用法,希望平时自己也能多多思考,更加深入的认识和了解知识。

标签

评论

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