移动Web（二）

星绵崽崽

已于 2022-07-22 16:02:31 修改

阅读量154

点赞数 2

文章标签： html html5 css

于 2022-07-22 15:51:06 首次发布

本文链接：https://blog.csdn.net/weixin_47672177/article/details/125932883

版权

空间转换（3D）

1.空间位移

目标：使用transform属性实现元素在空间内的位移、旋转、缩放等效果

空间：是从坐标轴角度定义的。 x 、y 和z 三条坐标轴构成了一个立体空间， z轴位置与视线方向相同。也叫 3D转换

属性：transform

语法

transform: translate3d(x, y, z);
transform: translateX(值);
transform: translateY(值);
transform: translateZ(值);

取值（正负均可）

像素单位数值
百分比

div{
            width: 200px;
            height: 200px;
            background-color: tomato;
            margin: 400px 400px;
            transition: all .8s;
        }
        div:hover{
            transform: translate3d(0,0,300px);
            /* 空间位移 */
        }

2.透视

目标：使用perspective属性实现透视效果

属性（添加给父级）

perspective: 值;
取值：像素单位数值，数值一般在800 – 1200。
透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离。

作用

空间转换时，为元素添加近大远小、近实远虚的视觉效果

body{
            perspective: 800px;
            /* 给父级设置透视 */
        }
        div{
            width: 200px;
            height: 200px;
            background-color: tomato;
            margin: 400px 400px;
            transition: all .8s;
        }
        div:hover{
            transform: translate3d(0,0,300px);
            /* 空间位移 */
        }

3.空间旋转

目标：使用rotate实现元素空间旋转效果

语法：

transform: rotateZ(值);
transform: rotateX(值);
transform: rotateY(值);

左手法则： 判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向

div{
            width: 400px;
            height: 400px;
            margin: 100px 100px;
            perspective: 800px;
            /* 设置透视 */
        }
        img{
            width: 100%;
            height: 100%;
            transition: all .8s;
            /* 添加过渡效果 */
        }
        div:hover img{
            transform:translateX(800px) rotateY(360deg);
            /* 旋转的左手法则，负值时相反 */
        }

4.立体呈现

呈现立体图形步骤：

1. 盒子父元素添加transform-style: preserve-3d；

2. 按需求设置子盒子的位置（位移或旋转）

注意：空间内，转换元素都有自已独立的坐标轴，互不干扰

<!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{
            transform-style: preserve-3d;
            /* 开启3D图形呈现 */
            width: 200px;
            height: 200px;
            background-color: cadetblue;
            position: relative;
            margin: 100px 100px;
            transition: all .8s;
        }
        .box .one,
        .box .two{
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
        }
        .box .one{
            background-color: burlywood;
            transform: translateZ(100px);
        }
        .box .two{
            background-color: crimson;
            transform: translateZ(-100px);
        }
        .box:hover{
            transform: rotateY(180deg);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="one"></div>
        <div class="two"></div>
    </div>
</body>
</html>

5.空间缩放

目标：使用scale实现空间缩放效果

语法

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

            /* scaleX是放大宽 */
           transform: scaleX(2);
            /* scaleY是放大高 */
            transform: scaleY(2);

动画

目标：使用animation添加动画效果

实现步骤

1.1 定义动画(动画名称不可用中文)

@keyframes 动画名称 {
            from {}
            to {}
         }


@keyframes 动画名称 {
            0% {}
            25% {}
            50% {}
            100% {}
         }

2. 使用动画

animation: move 5s
/* 调用动画 */
/* animation: 动画名 动画时长*/

动画属性

使用animation相关属性控制动画执行过程（补间动画）

animation: move 5s linear infinite;
            /* 调用动画 */
            /* animation: 动画名 动画时长 动画速度 延迟时间 次数 动画方向*/
            /*动画执行完毕的状态(forward:最后一帧/backwards:第一帧状态)不能和无线循环、动画的方向一起使用*/

使用steps实现逐帧动画

帧动画：开发中，一般配合精灵图实现动画效果。

animation-timing-function: steps(N)；

将动画过程等分成N份

animation: run .8s steps(12) infinite;
            /* 添加动画名，动画时间，设置为逐帧动画 循环播放 */

使用animation属性给一个元素添加多个动画效果

animation: 动画名 属性, 动画名 属性, 动画名 属性;