Web移动端-part02(3D效果+动画)

最新推荐文章于 2023-03-05 00:04:49 发布

一个大萝北

最新推荐文章于 2023-03-05 00:04:49 发布

阅读量373

点赞数 1

分类专栏：前端文章标签：前端 3d 动画 css css3

本文链接：https://blog.csdn.net/qq_40797578/article/details/127177828

版权

前端专栏收录该内容

32 篇文章 1 订阅

订阅专栏

一、空间转换（3D）

1、空间位移

transform:translate3d(x,y,z);

左手手心朝下握拳，大拇指方向为x轴正值方向，往下为y轴正值，往自己的方向为z轴正值
记得写3d否则不生效

透视

近大远小，近实远虚，如果想要看到Z轴，需要添加透视，添加给父元素
不能呈现立体图形，transform-style:perserve-3d可以让元素处于真正的3d空间

perspective: 800-1200px;

2、空间旋转

transform:rotateX();//正值从下往上，负值从上往下
transform:rotateY();//正值从左往右，负值从右往左
transform:rotateZ();//正值顺时针旋转，负值逆时针旋转

综合写法：用来设置自定义旋转轴的位置及旋转的角度

rotate3d(x,y,z,角度度数)//x,y,z取0-1

3、立体呈现

使元素处于真正的3d空间
默认值flat，表示子元素处于2D平面内呈现

transform-style:preserve-3d;

呈现立体图形步骤：

给父元素添加transform-style:preserve-3d
按需求设置子盒子的位置

4、空间缩放

transform:scaleX(倍数);
transform:scaleY(倍数);
transform:scaleZ(倍数);
transform:scale3d(x,y,z);

二、动画（重点）

动画的本质是快速切换大量图片时在人脑中形成的具有连续性的画面
构成动画的最小单元：帧或动画帧

1、补间动画

丝滑

实现步骤：

定义动画

@keyframes 动画名称{
    from{}
    to {}
}
或者
@keyframes 动画名称{
    0%{}
    10%{}
    15%{}
    100%{}
}

注意：动画可以写多个，多个状态通过百分比进行描述，每个状态都要不一样，相同的只会执行一次

使用动画

animation:动画名称 动画花费时长;

动画属性：

animation:动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态；

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MxWu0yIa-1664979615776)(C:\Users\samsung\AppData\Roaming\Typora\typora-user-images\1664955844091.png)]$

注意点：

动画结束状态不能和动画的循环次数以及动画的方向同时使用
动画名称和动画时长必须赋值
取值不分先后顺序
如果有2个时间值，第一个时间表示动画时长，第二个时间表示延迟时间

2 、逐帧动画

开发中，一般配合精灵图实现动画效果。（卡顿效果）

animation-timing-function:steps(N)；
将动画等分成n份
css中  animation:动画名 时间 steps(N);即可

侠客案例

图片为精灵图，使用逐帧动画制作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 140px;
            height: 140px;
            background:url(./images/bg.png) no-repeat;
            animation: run 0.5s steps(12) infinite,move 4s infinite ;
        }
        /* 定义动画 */
        @keyframes run{
            0%{
                background-position: 0 0;
            }
            100%{
                background-position: -1680px 0;
            }
           
        }
        @keyframes move{
            0%{
                transform: translate(0,0);
            }
          50%{
                transform: translate(1200px,0)  ;
            }
            51%{
                transform: translate(1200px,0) rotateY(180deg);
            }
           99%{
            transform: translate(0,0) rotateY(180deg)
           } 
            100%{
                transform: translate(0,0);
            }
            
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

效果为来回跑动的剑客

无缝轮播图案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 200px;
            height: 150px;
            border: 10px solid black;
            margin: 100px auto;
            overflow: hidden;
        }
        .banner{
            width: 1600px;
            height: 150px;
            animation: move 8s infinite linear ;
        }
        .banner img{
            float: left;
            width: 200px;
            height: 150px;
        }
        .box:hover .banner{
            cursor: pointer;
            animation-play-state: paused;
        }
        @keyframes move{
            0%{
                transform: translate(0,0);
            }
            100%{
                transform: translate(-1400px,0);
            }     
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="banner">
            <img src="./images/1.jpg" alt="">
            <img src="./images/2.jpg" alt="">
            <img src="./images/3.jpg" alt="">
            <img src="./images/4.jpg" alt="">
            <img src="./images/5.jpg" alt="">
            <img src="./images/6.jpg" alt="">
            <img src="./images/7.jpg" alt="">
            <!-- 解决留白问题 添加第一个图片并且.banner的宽度扩大一个，但是移动的距离不变。
            原理当最后一个轮播图（第7个）轮播完后会出现留白，此时添加第一个图，接着轮播最后一个图（和第一个图一样），此时第一个图进行下一轮轮播时，是直接充满在展示框内的，形成视觉差，让人觉得重复轮播，形成闭环 -->
            <img src="./images/1.jpg" alt="">
        </div>
    </div>
</body>
</html>

鼠标悬停暂停，给加了动画的元素加

.box:hover .banner{
            cursor: pointer;
            animation-play-state: paused;
        }