动画和3d变形

一、概念

           过渡:一般需要结合鼠标去使用

            动画:一运行自己动起来

二 、创建动画

        方式一:@keyframes 动画的名字{from{}to{}}

        方式二:@keyframes 动画的名字{0%{}...100%{}}

三、 使用动画:

        必须要写的:

           ① animation-name====动画的名字

          ②  animation-duration===动画的运动时间

        其他的:

            ③animation-delay===延迟时间

            ④animation-timing-function===动画的运动曲线(和过渡完全一致)

            ⑤animation-iteration-count===动画的运动次数

            ⑥animation-direction===动画的运动方向

                取值 :       

                    normal===正常,从起点运动到重点

                    reverse===反转,从重点运动到起点

                    alternate====正反交替

                    alternate-reverse===反正交替

           ⑦ animation-play-state===动画的播放状态

                取值:

                        running===运动===默认值

                        paused===暂停

        重要:简写方式: animation:需要什么值就写什么

        注意:运动时间和延迟时间有书写顺序,其他没有(运动时间在前,延迟时间在后)

四、半圆的知识

语法: border-radius: ;

                 1个值:上下左右4个角同时变化

                2个值:左上角和右下角  右上角和左下角

                3个值:左上   右上和左下  右下

                4个值:左上 右上  右下  左下 顺时针的赋值顺序

五、3d变形

①位移语法:transform:translatex/y/z(数值px)

    坐标轴:

        x轴:向右为正,向左为负

        y轴:向下为正,向上为负

        z轴:向前为正,向后为负

    属性值:

           1.位移translate

            2.旋转rotate

            3.缩放scale

    注意:要想看到3d的效果

        1.必须给想要呈现3d效果的元素找一个父亲,在这个大盒子上要写

             transform-style: preserve-3d;

        2.必须适当的让3d空间(3d舞台)旋转一下

②旋转语法:transform: rotateY/x/z(数值deg);

③缩放语法: transform: scaleX/y/z(数值);

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

我是打工人

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值