菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 谷江涛-20001024-css新增属性 [打印本页]

作者: 暴风雨 时间: 2022-10-25 18:57
标题: 谷江涛-20001024-css新增属性
一、今日内容： 1、过渡 transition 要过渡的属性花费的时间运动曲线何时开始
   要过渡的属性可以是宽高背景色内外边距等等所以直接写一个all就可以
花费的时间必须的秒 s
运动曲线  默认ease（逐渐变慢） linear 匀速
何世开始  单位必须是秒
2、 css 2D转换  transform
   translate  2D位移
可以是translateX（）对x轴水平单独位移
         translateY（）对y轴水平单独位移
      translate()两个值代表x轴和y轴位移
   如果是百分比就根据他元素的自身宽高来决定对行内元素没效果
  利用 2d位移把盒子居中
先margin-left：50%
   margin-top：50%
   transform：transition（-50%，-50%）
   rotate（）2d旋转  单位必须是deg
   scale （x，y）2d缩放单位是元素宽高的倍数  一个值代表两个值得倍数两个值  第一个x轴第二个y轴
   改变旋转的中心点
origin（x，y）可以是方位名词可以是像素值
3、动画制作
1 先定义动画
@keyforms move{}
再在元素中调用动画  animation-name（）name是定义动画的名称  必须属性
                              animation-duration 定义动画多长时间可以完成单位是秒必须属性
                              animation-timing-function  规格动画的速度曲线默认ease steps()：步长，就是分几步来完成动画，如果有了steps(),就不需要写 ease或者linear等运动曲线值
                           animation-delay  规定动画何时开始
                                    animation-interation-count  规定动画播放次数默认1 可以是循环 infinite
                                 animation-diection  规定动画是否逆向播放
                              animation-play-state  规定动画是否运行或暂停 paused 暂停配合：hover使用
                           animation-fill-mode 规定动画结束后的状态保持结束后的状态forwards
二、今日问题
无
三解决方法
无

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)