day14CSS动画、3D

最新推荐文章于 2023-06-25 20:51:27 发布

2301_78238711

最新推荐文章于 2023-06-25 20:51:27 发布

阅读量33

点赞数

分类专栏：第一阶段文章标签：动画

本文链接：https://blog.csdn.net/2301_78238711/article/details/131047204

版权

第一阶段专栏收录该内容

17 篇文章 0 订阅

订阅专栏

一、动画

1.创建动画

@keyframes  name{
                from{}
                to{}
            }
            
@keyframes name{
       0%{}
       50%{}
       100%{}
    }

2.使用

animation: name duration timing-function delay iteration-count direction fill-mode;   

animation-name: run;-------------------动画名称
animation-duration: 2s;---------------动画持续时间
animation-timing-function: linear;----运动曲线
    ease:由慢到快
    ease-in:由快到慢
    linear:匀速
    cubic-bezier(0.13, 0.95, 1, 1)   
animation-delay: 2s;-----------------动画延迟时间
animation-iteration-count:4 ;---------运动次数 
    n:具体次数
    infinite：无线循环
animation-direction: alternate-reverse;-------运动的方向
    normal:默认正常方向
    reverse:反方向运动
    alternate:正反交替1
    alternate-reverse:反正交替
animation-play-state: paused; ----------------运动状态
     running:默认值运动
     paused:暂停

简写：
    animation: run 2s linear 1s infinite alternate paused;

二、3D

1.坐标轴

x： y： z:屏幕的正前方是Z轴的正方向

2.创建3D

1.创建3D的大盒子（舞台） transform-style: preserve-3d; 2.旋转舞台 transform:rotateY(75deg)

3.3D动画

1.平移

transform:translateX()
transform:translateY()
transform:translateZ()
transform:translate3d(100px,0,0)

2.旋转

transform:rotateX()
transform:rotateY()
transform:rotateZ()
transform:rotate3d(1,0,0,30deg)

4.景深（透视）：近大远小

perspective:900p; 取值范围一般900px-1200px，值越小出现透视效果创建、 1.给3D舞台在创建一个盒子 2.给盒子添加 perspective:1200px;

5.元素背面不可见

backface-visibility:hidden;