我的账户
猩码学苑

专注C++开发菁英教育

亲爱的游客,欢迎!

已有账号,请

如尚未注册?

谷江涛-20001024-css新增属性

[复制链接]
暴风雨 发表于 2022-10-25 18:57:30 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
一、今日内容: 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
二、今日问题

三解决方法





回复

使用道具 举报

关注0

粉丝0

帖子33

发布主题
大家都在学
课堂讨论
一周热帖排行最近7x24小时热帖
关注我们
专注C++菁英教育

客服电话:18009298968

客服时间:9:00-21:00

猩码学苑 - 专注C++开发菁英教育!( 陕ICP备2025058934号-1 )

版权所有 © 陕西菁英数字科技有限公司 2023-2026