CSS基础之过渡,动画,变形,旋转,缩放

7 篇文章 0 订阅

过渡

过渡 (transition)通过过渡可以指定一个属性发生变化时的的切换方式,通过过渡效果可以创建一些非常好的效果,提升用户的体验。

过渡的属性:

  • transition-property: 指定要执行过渡的属性,多个属性间用逗号隔开,如果所有属性都需要过渡可以使用all,大部分属性都支持过渡。
    注意:过渡必须是一个有效数值像 auto不是有效数值

  • transition-duration: 指定过渡效果的持续时间,时间单位 s和ms。

  • transition-timing-function:过渡的时序函数
    是指定过渡的执行的方式
    默认值 :
    ease 慢速开始 先加速后减速
    linear 匀速运动
    ease-in 加速运动
    ease-out 减速运动
    ease-in-out 先加速后减速
    cubic-bezier() 贝塞尔曲线,可以在https://cubic-bezier.com绘制需要的贝塞尔曲线
    steps()分步执行过渡效果

  • transition-delay 过渡效果的延迟,等待一段时间后再执行过渡

注意:transition 可以同时设置过渡相关的所有属性,只有一个要求
如果要写延迟,第一个时间时持续时间,第二个是延迟。

动画

动画(animation),动画和过渡类似,不同的是过渡需要在某个属性发生变化时才会触发,动画可以自动触发动态效果。

设置动画效果,必须先要设置一个关键帧,关键帧设置了动画执行的每一个步骤。通过@keyframes 动画的名称{}设置动画执行的整体步骤。

 @keyframes test{
         from{
             margin-left: 0;
             background-color: orange;
         }
            /*  from表示动画的开始位置 也可以使用0% */
         to{
             margin-left: 700px;
             background-color: red;
         }
            /*  to表示动画结束位置 也可以使用100% */
     }

动画的属性

  • animation-name: 要对当前元素生效的关键帧的名字
animation-name: test;
  • animation-duration: 动画的执行时间
animation-duration: 1s;
  • animation-delay: 动画的延迟时间
animation-delay: 2s;
  • animation-timing-function: 动画的时序函数
    与过渡的时序函数类似
 animation-timing-function: ease-in-out;
  • animation-iteration-count: 动画执行的次数 infinite 无限执行
  • animation-direction: 动画执行的方向
    默认值
    normal 从from到to执行
    reverse 从to到from执行
    alternate 从from到to运行重复执行时反向执行
    alternate-reverse 从to向from运行 重复执行时反向执行
  • animation-play-state: 设置动画的执行状态
    可选值:
    running 默认值 动画执行
    paused 动画暂停
animation-play-state: paused;

animation-fill-mode: 动画的填充模式

可选值:
none 默认值 动画执行完毕 元素回到初始位置
forwards 动画执行完毕 元素会停止在动画结束位置
backwords 动画延时等待时 元素就会处于开始位置
both 结合了forwards和backwards

变形

变形就是指通过css来改变元素的形状和位置,变形不会影响到页面的布局,可以通过transform来设置元素的变形效果。

平移
translateX() 沿着x轴方向平移
translateY() 沿着y轴方向平移
translateZ() 沿着z轴方向平移
平移元素,百分比是相对于自身计算的

             transform: translateY(100px);
             transform: translateX(50%);

注意:多个变形用空格隔开,下面再定义transformX会让上方的transformY失效,可以利用以下方式进行元素居中

 transform: translateX(-50%) translateY(-50%);

Z轴平移
z轴平移,调整元素在z轴的位置,正常情况就是调整元素和人眼的距离,距离越大,元素离我们人越近。

z轴平移属于立体效果,默认情况下网页是不支持透视的,如果需要看见效果必须要设置网页的视距。

html{
            /* 设置当前网页的视距为800px 人眼距离网页的距离 */
            perspective: 800px;
        }
            transform: translateZ(800px);

旋转

通过旋转可以使元素沿着x y 或 z旋转指定的角度
rotateX() 元素沿着X轴旋转
rotateY() 元素沿着Y轴旋转
rotateZ() 元素沿着Z轴旋转
可与选用的单位由 deg(°) turn(圈)

            transform: rotateY(180deg);

缩放

通过scale()可以对元素进行缩放

  • scaleY()垂直方向的缩放
  • scaleX()水平方向缩放
  • scale()双方向的缩放

css中可以通过transform-origin设置变形的原点
默认值是center

transform-origin: 0px 0px;

同理我们可以自己更改想要的变形原点

  • 3
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值