移动端空间转换动画

nccba
187 阅读2分钟

移动Web 第二天

u 空间转换

1.使用transform属性实现元素在空间内的位移、旋转、缩放等效果
l transform: translate3d(x, y, z);
l transform: translateX(值);
l transform: translateY(值);
l transform: translateZ(值);
l 取值（正负均可）
l 像素单位数值 l 百分比
2. 使用perspective属性实现透视效果
属性（添加给父级）
Ø perspective: 值;
Ø 取值：像素单位数值， 数值一般在800 – 1200。
l 作用
Ø 空间转换时，为元素添加近大远小、近实远虚的视觉效果
3. 使用rotate实现元素空间旋转效果
Ø transform: rotateZ(值);
Ø transform: rotateX(值);
Ø transform: rotateY(值);
4. 使用transform-style: preserve-3d呈现立体图形
Ø 添加 transform-style: preserve-3d;
Ø 使子元素处于真正的3d空间
搭建立方体
调节a标签的位置
Ø a标签定位（子绝父相）
Ø 英文部分添加旋转和位移样式
Ø 中文部分添加位移样式
<!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>
</head>

<body>
    <div class="box"></div>
    <br />
    <br />
    <div class="box2"></div>
</body>

</html>
<style>
    .box {
        width: 200px;
        height: 100px;
        background-color: rgb(224, 114, 114);
        /* 2.调用动画 第一个参数是你定义的动画名称,第二个参数是动画时长*/
        animation: move 2s;
    }
    /* 一. 定义动画：让宽度从200变大到600 */
    
    @keyframes move {
        to {
            width: 600px;
            background-color: rgb(16, 104, 67);
        }
    }
    
    .box2 {
        width: 200px;
        height: 100px;
        background-color: tomato;
        /* 2.调用动画 */
        animation: run 2s;
    }
    /* 二. 定义动画：200*100 到 500*300 到 800*500 */
    /* 百分比指的是动画总时长的占比 */
    /* running 不能作为动画名称，否则动画失效 */
    /* 1.定义动画 */
    
    @keyframes run {
        50% {
            width: 500px;
            height: 300px;
            background-color: pink;
        }
        100% {
            width: 800px;
            height: 500px;
            background-color: rgb(56, 37, 37);
        }
    }
</style>
立体3d案例
 <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        input {
            width: 50px;
        }
        
        .box {
            width: 200px;
            height: 200px;
            position: relative;
            margin: 100px auto;
            perspective-origin: 0px 0px;
            transform-style: preserve-3d;
            transform: rotate3d(1, 1, 1, 30deg);
        }
        
        .box>div {
            width: 200px;
            height: 200px;
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0.9;
            font-size: 30px;
        }
        
         ::input-selection {
            background-color: #000;
            color: #fff;
        }
        
        .front {
            background-color: #ff1703;
        }
        
        .back {
            background-color: #ffc629;
        }
        
        .left {
            background-color: #53ff27;
        }
        
        .right {
            background-color: #18ffe4;
        }
        
        .top {
            background-color: #0c00ff;
        }
        
        .bottom {
            background-color: #ff21cb;
        }
        /*将第一个div前移*/
        
        .front {
            transform: translateZ(100px);
        }
        /*第二个div后移*/
        
        .back {
            transform: translateZ(-100px) rotateY(180deg);
            /*旋转会影响当前元素所在的坐标系：强烈建议：先移动再旋转*/
            /*transform: rotateY(180deg) translateZ(100px);*/
        }
        
        .left {
            transform: translateX(-100px) rotateY(-90deg);
        }
        
        .right {
            transform: translateX(100px) rotateY(90deg);
        }
        
        .top {
            transform: translateY(-100px) rotateX(90deg);
        }
        
        .bottom {
            transform: translateY(100px) rotateX(-90deg);
        }
        
        body {
            perspective: 1000px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="front">前面</div>
        <div class="back">后面</div>
        <div class="left">左边</div>
        <div class="right">右边</div>
        <div class="top">上面</div>
        <div class="bottom">下面</div>
    </div>
</body>
5. 使用scale实现空间缩放效果
Ø transform: scaleX(倍数);
Ø transform: scaleY(倍数);
Ø transform: scaleZ(倍数);
Ø transform: scale3d(x, y, z);

u 动画

1. 使用animation添加动画效果
<!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>
</head>

<body>
    <div class="box"></div>
</body>

</html>
<style>
    .box {
        width: 200px;
        height: 200px;
        background-color: rgb(70, 50, 50);
        animation: ani_1 2s infinite;
        /*可以统一设置全部属性,播放时间一定要在延迟时间前面*/
        animation-name: ani_1;
        /*动画名称*/
        animation-duration: 2s;
        /*动画时长*/
        animation-delay: 3s;
        /*延迟时间*/
        animation-fill-mode: both;
        /*动画执行完毕时状态,backwards：第一帧状态,forwards：最后一帧状态,both可以同时设置第一帧状态,最后一帧状态*/
        animation-timing-function: steps;
        /*linear	动画从头到尾的速度是相同的。常用
       ease	默认。动画以低速开始，然后加快，在结束前变慢。
       ease-in-out	动画以低速开始和结束。*/
        /*速度曲线(数字)：逐帧动画*/
        animation-iteration-count: infinite;
        /*重复次数为无限循环,可以设置次数比如123次*/
        animation-duration: alternate;
        /*动画执行方向常用,alternate先正向后反向,normal默认值,*/
        /* 3reverse先反再反4 alternate-reverse先反再正*/
        animation-play-state: paused;
        /*暂停动画,为暂停，通常配合:hover使用*/
    }
    
    @keyframes ani_1 {
        /*动画开始*/
        /*   from {
            background-color: rgb(51, 36, 36);
        }
        /*动画结束*/
        /*    to {
            background-color: rgb(82, 26, 26);
            border-radius: 50%;
        }*/
        0% {
            background-color: rgb(51, 36, 36);
        }
        30% {
            background-color: rgb(82, 26, 26);
            border-radius: 50%;
        }
        100% {
            background-color: rgb(82, 26, 61);
            height: 100px;
            width: 150px;
        }
    }
</style>
动画的本质是快速切换大量图片时在人脑中形成的具有连续性的画面
构成动画的最小单元：帧或动画帧
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no" />
    <title>01-动画实现步骤.html</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        div {
            width: 200px;
            height: 200px;
            background-color: aqua;
            /* margin: 200px auto; */
            /* 动画的 复合写法 */
            /* animation: ani_1 5s; */
            /* 单个讲解属性 */
            /* 动画的名称 */
            animation-name: ani_1;
            /* 动画的持续时间 */
            animation-duration: 2s;
            /* 动画的延迟时间 */
            /* animation-delay: 3s; */
            /* 
        动画正常播放之外的状态（延迟、播放结束） 
        在延迟的时间内  
        1 显示的是 自身的颜色 属性 
        2 设置  在延迟的时间内 显示 0% 画面  backwards
        3 整个动画播放完毕了 动画 停留在最后一帧的画面 还是回到 自身的属性 画面上 
          设置动画 播放完毕了 停留在 最后一帧画面   forwards

        4 both  
          同时设置了  backwards 和  forwards

         */
            /* animation-fill-mode: both; */
            /* 
        设置动画的播放次数 2 
         */
            animation-iteration-count: infinite;
            /* 
        设置动画的播放的方向  animation-direction

        1 默认值  normal    先正再正      常用
        2 alternate   先正再反   常用
        3 reverse   先反再反
        4 alternate-reverse  先反再正

         */
            animation-direction: alternate;
            animation-play-state: paused;
            /*暂停动画,为暂停，通常配合:hover使用*/
        }
        
        @keyframes ani_1 {
            0% {
                background-color: black;
                width: 10px;
                /*margin-left: 0;*/
            }
            100% {
                background-color: yellow;
                border-radius: 50%;
                width: 800px;
                /* margin-left: 1000px;*/
            }
        }
        
        div:hover {
            animation-play-state: paused;
            /*暂停动画,为暂停，通常配合:hover使用*/
            animation-play-state: running;
            /*鼠标移上去跑起来*/
        }
    </style>
</head>

<body>
    <div>动画的体验</div>
</body>

</html>
逐帧动画：帧动画。开发中，一般配合精灵图实现动画效果。
animation-timing-function: steps(N)；
Ø 将动画过程等分成N份
精灵动画制作步骤
Ø 准备显示区域
Ø 设置盒子尺寸是一张小图的尺寸，背景图为当前精灵图
Ø 定义动画
Ø 改变背景图的位置（移动的距离就是精灵图的宽度）
Ø 使用动画
Ø 添加速度曲线steps(N)，N与精灵图上小图个数相同
Ø 添加无限重复效果
avatar
文章
阅读
粉丝