Web进阶：Day2 空间转换、动画

news2024/12/26 11:37:28

Web进阶：Day2

Date: January 4, 2023
Summary: 空间转换、动画

空间转换

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

空间转换也叫3D转换

属性：transform

Untitled

语法：

transform: translate3d(x, y, z);

transform: translateX(值);

transform: translateY(值);

transform: translateZ(值);

取值（正负均可）

像素单位数值、百分比

案例：

  • Code:

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>空间位移</title>
  <style>
    .box {
      width: 200px;
      height: 200px;
      margin: 100px auto;
      background-color: pink;
      transition: all 0.5s;
    }

    .box:hover {
      /* transform: translate3d(50px, 100px, 200px); */
      transform: translateX(100px);
      transform: translateY(100px);
      transform: translateZ(100px);
    }
  </style>
</head>

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

</html>

透视

透视概念

透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离

属性（添加给父级）

perspective: 值;

取值：像素单位数值， 数值一般在800 – 1200

透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离。

Untitled

作用

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

案例：

Untitled

<style>
    body {
      /* 为了实现透视的效果，需要设置一下父级 */
			/* perspective 是为了设置人眼和屏幕的距离 */
      perspective: 1000px;
      /* perspective: 200px; */
      /* perspective: 10000px; */
    }

    .box {
      width: 200px;
      height: 200px;
      margin: 100px auto;
      background-color: pink;
      transition: all 0.5s;
    }

    .box:hover{
      transform: translateZ(200px);
      /* transform: translateZ(-200px); */
    }
  </style>

空间旋转

语法：

/*沿着Z轴转*/
transform: rotateZ(值);

transform: rotateX(值);

transform: rotateY(值);

案例：X轴负向旋转

Untitled

  • Code:

    <!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>空间旋转-X轴</title>
    <style>
        .box {
            width: 300px;
            margin: 100px auto;
        }

        img {
            width: 300px;
            transition: all 2s;
        }

        .box {
            /* 透视效果：近大远小，近实远虚 */
            perspective: 1000px;
        }

        .box img:hover {
            transform: rotateX(60deg);
            transform: rotateX(-60deg);
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="./images/hero.jpeg" alt="">
    </div>
</body>
</html>

**注意：**需要添加视距perspective， 效果更好

左手法则

左手法则

判断旋转方向:

  1. 左手握住旋转轴
  2. 拇指指向正值方向
  3. 手指弯曲方向为旋转正值方向

Untitled

拓展:了解

rotate3d(x, y, z, 角度度数) ：用来设置自定义旋转轴的位置及旋转的角度

x，y，z 取值为0-1之间的数字

立体呈现

思考：使用perspective透视属性能否呈现立体图形？

答：不能，perspective只增加近大远小、近实远虚的视觉效果。

实现方法

添加 transform-style: preserve-3d;

使子元素处于真正的3d空间

默认值flat，表示子元素处于2D平面内呈现

呈现立体图形步骤

  1. 盒子父元素添加 transform-style: preserve-3d；
  2. 按需求设置子盒子的位置（位移或旋转）

Untitled

  • Code:

    <!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>立体呈现</title>
    <style>
        .cube {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 100px auto;
            background-color: pink;
            transition: all 2s;
            transform-style: preserve-3d;
        }

        .cube div {
            position: absolute;
            width: 200px;
            height: 200px;
            /* 将位置定在左上角开始 */
            left: 0;
            top: 0;
            
        }

        .front {
            background-color: orange;
            /* 
                向我走近200px 没有设置perspective 
                仅为让橙色在绿色上面
            */
            transform: translateZ(200px);
        }

        .back {
            background-color: green;
        }

        /* cube hover 为了看空间感效果 */
        .cube:hover {
            transform: rotateY(90deg);
        }
    </style>
</head>
<body>
    <div class="cube">
        <div class="front">前面</div>
        <div class="back">后面</div>
    </div>
</body>
</html>

注意:

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

3D导航

思考：绿色和橙色盒子是如何摆放的？

搭建立方体

绿色盒子是立方体的前面

橙色盒子是立方体的上面

Untitled

结论： 绿色和橙色部分共需要3个标签

1个父级标签

绿色和橙色共2个标签（子级）

实现思路

  1. 搭建立方体：绿色盒子是立方体的前面，橙色盒子是立方体的上面
  2. 添加hover状态旋转切换效果

Untitled

实现思路

  1. 搭建立方体
    li标签

       添加立体呈现属性`transform-style: preserve-3d;`
 
   添加旋转属性（为了便于观察效果，案例完成后删除即可）

    a标签

    调节位置

  2. 搭建立方体

    调节a标签的位置
    a标签定位（子绝父相）

    英文部分添加旋转和位移样式

    中文部分添加位移样式

Untitled

  1. 过渡效果

鼠标滑过li， 添加空间旋转样式

li添加过渡属性

注意： 案例完成后，删除li的旋转样式。

  • Code:

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D导航</title>
    <style>
        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        .navs {
            width: 300px;
            height: 40px;
            margin: 50px auto;
        }
        
        .navs li {
            position: relative;
            float: left;
            width: 100px;
            height: 40px;
            line-height: 40px;
            transition: all .5s;
            transform-style: preserve-3d;

            /* 旋转: 让大家在写代码的过程中看到立体盒子 */
            /* transform: rotateX(-20deg) rotateY(30deg); */

            /* 测试缩放效果 */
            /* 三个方向都进行缩放 */
            /* transform: scale3d(0.5, 1.1, 2); */
        }

        .navs li a {
            position: absolute;
            left: 0;
            top: 0;
            display: block;
            width: 100%;
            height: 100%;
            text-align: center;
            text-decoration: none;
            color: #fff;
        }
        
        .navs li a:first-child {
            background-color: green;
            transform: translateZ(20px);
        }
        
        .navs li a:last-child {
            background-color: orange;
            /* 躺平x轴旋转  立方体的顶部,位移z(确保看到这个盒子) */
            transform: rotateX(90deg) translateZ(20px);
        }

        /* li:hover 立方体旋转 */
        .navs li:hover {
            transform: rotateX(-90deg);
        }
    </style>
</head>

<body>
    <div class="navs">
        <ul>
            <li>
                <a href="#">首页</a>
                <a href="#">Index</a>
            </li>
            <li>
                <a href="#">登录</a>
                <a href="#">Login</a>
            </li>
            <li>
                <a href="#">注册</a>
                <a href="#">Register</a>
            </li>
        </ul>
    </div>
</body>

</html>

空间缩放

使用scale实现空间缩放效果

语法:

transform: scaleX(倍数);

transform: scaleY(倍数);

transform: scaleZ(倍数);

transform: scale3d(x, y, z);

注：代码在上面例子中

动画

动画基础

思考：过渡可以实现什么效果？

答：实现2个状态间的变化过程

动画效果：

实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）

动画原理：

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

实现步骤：

  1. 定义动画

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

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

  2. 使用动画

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

动画属性：

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

注意：

动画名称和动画时长必须赋值

取值不分先后顺序

如果有2个时间值，第一个时间表示动画时长，第二个时间表示延迟时间

当然，我们这里也可以将属性拆分使用

Untitled

复合写法案例：

  • Code:

    <!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>动画实现步骤</title>
    <style>
        .box {
            width: 200px;
            height: 100px;
            background-color: pink;

            /* 使用动画 */
            animation: change 1s;
        }

        /* 一. 定义动画：从200变大到600 */
        /* @keyframes change {
            from {
                width: 200px;
            }
            to {
                width: 600px;
            }
        } */
        

        /* 二. 定义动画：200 到 500*300 到 800*500 */
        /* 百分比指的是动画总时长的占比 */
        @keyframes change {
            0% {
                width: 200px;
            }
            50% {
                width: 500px;
                height: 300px;
            }
            100% {
                width: 800px;
                height: 500px;
            }
        }
        
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

拆分写法案例：

  • Code:

    <!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>animation拆分写法</title>
    <style>
        .box {
            width: 200px;
            height: 100px;
            background-color: pink;

            animation-name: change;
            animation-duration: 1s;
            animation-iteration-count: infinite;
            
        }

        .box:hover {
           /* 鼠标移入的时候暂停动画 */
           animation-play-state: paused;
        }

        @keyframes change {
            from {
                width: 200px;
            }
            to {
                width: 600px;
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

逐帧动画

目标：使用steps实现逐帧动画

补间动画与逐帧动画：

Untitled

注意：一般的动画都是补间动画

Untitled

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

animation-timing-function: steps(N)；将动画过程等分成N份

  • Code :

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>精灵动画</title>
  <style>
    .box {
      /* 1680/12 : 保证显示区域的尺寸和一个精灵小图的尺寸相同 */
      width: 140px;
      height: 140px;
      /* border: 1px solid #000; */
      background-image: url(./images/bg.png);

      /* 12: 净零小图的个数 */
      animation: 
        move 1s steps(12) infinite,
        run 1s forwards
      ;
    }

    @keyframes move {
        /* from {
          background-position: 0 0;
        } */
        to {
          /* 1680: 精灵图的宽度 */
          background-position:  -1680px 0;
        }
    }

    /* 定义一个盒子移动的动画  800px */
    @keyframes run {
      /* 动画的开始状态和盒子的默认样式相同的, 可以省略开始状态的代码 */
      /* from {
        transform: translateX(0);
      } */
      to {
        transform: translateX(800px);
      }
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

精灵动画制作步骤

准备显示区域

设置盒子尺寸是一张小图的尺寸，背景图为当前精灵图

定义动画

改变背景图的位置（移动的距离就是精灵图的宽度）

使用动画

添加速度曲线steps(N)，N与精灵图上小图个数相同

添加无限重复效果

Untitled

综合案例

走马灯（无缝动画的做法）

目标：使用animation实现逐帧图片位移效果

Untitled

关键点：

把开头三张图片复制一份，放到尾部

当播放结束时，程序就会自动重新放映，从头开始，从而形成一种循环的感觉

  • Code:

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      li {
        list-style: none;
      }

      img {
        width: 200px;
      }
      
      .box {
        width: 600px;
        height: 112px;
        border: 5px solid #000;
        margin: 100px auto;
        overflow: hidden;
      }

      .box ul {
        width: 2000px;
        animation: move 5s infinite linear;
      }

      .box li {
        float: left;
      }

      /* 定义动画:位移, ul 左侧使用  x -1400  */
      @keyframes move {
        to {
          transform: translateX(-1400px);
        }
      }

      /* 用户鼠标移入box,动画暂停 */
      .box:hover ul {
        animation-play-state: paused;
      }
      
    </style>
  </head>
  <body>
    <div class="box">
      <ul>
        <li><img src="./images/1.jpg" alt="" /></li>
        <li><img src="./images/2.jpg" alt="" /></li>
        <li><img src="./images/3.jpg" alt="" /></li>
        <li><img src="./images/4.jpg" alt="" /></li>
        <li><img src="./images/5.jpg" alt="" /></li>
        <li><img src="./images/6.jpg" alt="" /></li>
        <li><img src="./images/7.jpg" alt="" /></li>

        <!-- 第567移动的时候,显示区域不能留白 -->
        <li><img src="./images/1.jpg" alt="" /></li>
        <li><img src="./images/2.jpg" alt="" /></li>
        <li><img src="./images/3.jpg" alt="" /></li>
      </ul>
    </div>
  </body>
</html>

全民出游季

知识点：

  1. 制作背景图

注意点：

  1. html和body的高度都要写上100%

Untitled

  1. 图片的background-size需要做到cover

  • Code:

    <!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>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <!-- 云彩图片 -->
    <div class="cloud">
        <img src="./images/yun1.png" alt="">
        <img src="./images/yun2.png" alt="">
        <img src="./images/yun3.png" alt="">
    </div>
</body>
</html>

    * {
    margin: 0;
    padding: 0;
}

/* 注意：html的默认高度和浏览器不是一样大的 */
html {
    height: 100%;
}

body {
    height: 100%;
    background: url(./../images/f1_1.jpg) no-repeat center;

    /* 缩放背景图 */

    /* 图片等比例缩放, 当宽度或高度和盒子尺寸相等, 图片就不再缩放 */
    /* background-size: contain; */

    /* 图片等比例缩放, 图片完全覆盖到整个盒子, 可能会导致图片显示不全 */
    background-size: cover;
}

/* 
1. img 引入图片, 控制位置
2. 定义动画,使用动画
*/

.cloud img {
    position: absolute;
    left: 50%;
    top: 0;
}

.cloud img:nth-child(1) {
    margin-left: -300px;
    top: 20px;
    animation: cloud 1s infinite alternate;
}
.cloud img:nth-child(2) {
    margin-left: 400px;
    top: 100px;
    /* 这里的0.2s指延迟时间 */
    animation: cloud 1s infinite alternate 0.2s;
}
.cloud img:nth-child(3) {
    margin-left: -550px;
    top: 200px;
    animation: cloud 1s infinite alternate 0.4s;
}

/* 云彩动画 */
@keyframes cloud {
    to {
        transform: translateX(20px);
    }
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/148397.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

SolidWorks二次开发 API-获取当前语言与重命名文件

SolidWorks二次开发 API-获取当前语言与重命名文件

新的一年了&#xff0c;开始新的分享。 做SolidWorks二次开发的时候&#xff0c;难免会遇到多语言的问题。 针对不同语言的客户生成不同语言的菜单&#xff0c;所以我们要知道Solidworks的当前界面语言是什么。 这个就简单的说一下方法: GetCurrentLanguage 看结果&#xff1a;…
阅读更多...
二、MySQL进阶教程

二、MySQL进阶教程

mysql高级 1&#xff0c;约束 上面表中可以看到表中数据存在一些问题&#xff1a; id 列一般是用标示数据的唯一性的&#xff0c;而上述表中的id为1的有三条数据&#xff0c;并且 马花疼 没有id进行标示 柳白 这条数据的age列的数据是3000&#xff0c;而人也不可能活到3000岁…
阅读更多...
Curator实现分布式锁（可重入 不可重入 读写 联锁 信号量 栅栏 计数器）

Curator实现分布式锁（可重入 不可重入 读写 联锁 信号量 栅栏 计数器）

文章目录前言代码实践1. 配置2. 可重入锁InterProcessMutex3. 不可重入锁InterProcessSemaphoreMutex4. 可重入读写锁InterProcessReadWriteLock5. 联锁InterProcessMultiLock6. 信号量InterProcessSemaphoreV27. 栅栏barrier8. 共享计数器8.1. SharedCount8.2. DistributedAto…
阅读更多...
再学C语言28：输入和输出——重定向和文件

再学C语言28：输入和输出——重定向和文件

默认情况下&#xff0c;使用标准I/O包的C程序将标准输入作为其输入源&#xff0c;即标识为stdin的流 stdin流是作为向计算机中读取数据的常规方式而建立&#xff0c;可以是键盘、语音等不同输入设备 现代计算机还可以从文件中需求其输入&#xff0c;而不仅仅是传统的输入设备…
阅读更多...
【docker10】Docker容器数据卷

【docker10】Docker容器数据卷

Docker容器数据卷 1.Docker容器数据卷是什么 注意(坑): 容器卷记得加入 --privilegedtrue 为什么: docker挂载主目录访问如果出现cannot open directory.:Permission denied 解决办法: 在挂在目录后多加一个–privilegedtrue参数即可 如果是CentOS7安全模块会比之前系统版本加…
阅读更多...
c++ - 第20节 - 异常

c++ - 第20节 - 异常

1.C语言传统的处理错误的方式 传统的错误处理机制&#xff1a; 1.终止程序&#xff0c;如assert&#xff0c;缺陷&#xff1a;用户难以接受。如发生内存错误&#xff0c;除0错误时就会终止程序。2.返回错误码&#xff0c;缺陷&#xff1a;需要程序员自己去查找对应的错误。如系…
阅读更多...
基于神将网络方式进行数据回归拟合实例

基于神将网络方式进行数据回归拟合实例

前言本篇博客主要以神经网络拟合数据这个简单例子讲起&#xff0c;然后介绍网络的保存与读取&#xff0c;以及快速新建网络的方法。一、神经网络对数据进行拟合import torch from matplotlib import pyplot as plt import torch.nn.functional as F# 自定义一个Net类&#xff0…
阅读更多...
Diffusion model(二): 训练推导详解

Diffusion model(二): 训练推导详解

接上文 Diffusion的训练推导 1. 最小化负对数似然与变分下界 在弄懂diffusion model前向和反向过程之后&#xff0c;最后我们需要了解其训练推导过程&#xff0c;即用什么loss以及为什么。在diffusion的反向过程中&#xff0c;根据(3)(3)(3)式我们需要预测μθ(xt,t),Σθ(x…
阅读更多...
【Linux】进程状态和进程优先级

【Linux】进程状态和进程优先级

文章目录1. 进程状态2. Linux的进程状态3. 僵尸进程4. 孤儿进程5. 进程优先级1. 进程状态 为了更深入地了解进程&#xff0c;我们需要知道进程的不同状态。 不同的操作系统&#xff0c;对于进程状态有着不同的说法&#xff0c;如&#xff1a;运行、阻塞、挂起、新建、就绪、等…
阅读更多...
SIoU Loss

SIoU Loss

1、论文 题目&#xff1a;《SIoU Loss: More Powerful Learning for Bounding Box Regression》 参考博客&#xff1a; https://blog.csdn.net/qq_56749449/article/details/125753992 2、原理 有关IoU损失函数&#xff0c;像GIoU、DIoU、CIoU都没有考虑真实框与预测框之间的…
阅读更多...
关于zookeeper和kafka不得不说的秘密

关于zookeeper和kafka不得不说的秘密

zookeeper简介1. zookeeper的概述ZooKeeper是一个分布式的&#xff0c;开放源码的分布式应用程序协调服务&#xff0c;是Google的Chubby一个开源的实现&#xff0c;是Hadoop和Hbase的重要组件。它是一个为分布式应用提供一致性服务的软件&#xff0c;提供的功能包括&#xff1a…
阅读更多...
【四】Netty 分隔符和定长解码器的应用

【四】Netty 分隔符和定长解码器的应用

Netty 分隔符和定长解码器的应用理论说明LineBasedFrameDecoder 开发大概流程代码展示netty 依赖EchoServer 服务端启动类EchoServerHandlerEchoClientEchoClientHandler结果打印客户端打印服务端打印FixedLengthFrameDecoder 开发代码展示EchoServer 服务端启动类EchoFixServe…
阅读更多...
【云原生】k8s之pod控制器

【云原生】k8s之pod控制器

内容预知 前言 1.pod控制器的相关知识 1.1 pod控制器的作用 1.2 pod控制器的多种类型 1.3 pod容器中的有状态和无状态的对比 &#xff08;1&#xff09;有状态实例 &#xff08;2&#xff09;无状态实例 2.Deployment控制器 2.1 SatefulSet 控制器的运用 2.1 Sateful…
阅读更多...
从0到1完成一个Vue后台管理项目（六、404页）

从0到1完成一个Vue后台管理项目（六、404页）

往期 从0到1完成一个Vue后台管理项目&#xff08;一、创建项目&#xff09; 从0到1完成一个Vue后台管理项目&#xff08;二、使用element-ui&#xff09; 从0到1完成一个Vue后台管理项目&#xff08;三、使用SCSS/LESS&#xff0c;安装图标库&#xff09; 从0到1完成一个Vu…
阅读更多...
[LeetCode周赛复盘] 第 95 场周赛20230107

[LeetCode周赛复盘] 第 95 场周赛20230107

[LeetCode周赛复盘] 第 95 场周赛20230107 一、本周周赛总结二、 [Easy] 2525. 根据规则将箱子分类1. 题目描述2. 思路分析3. 代码实现三、[Medium] 2526. 找到数据流中的连续整数![在这里插入图片描述](https://img-blog.csdnimg.cn/237210adb20e457aaf2671e6e8f9e43b.png)2. …
阅读更多...
Linux系统中C++多态和数据封装的基本方法

Linux系统中C++多态和数据封装的基本方法

大家好&#xff0c;今天主要和大家分享一下&#xff0c;多态&#xff0c;数据封装的使用方法。 目录 第一&#xff1a;C中的多态 第二&#xff1a;C中数据封装方法 第一&#xff1a;C中的多态 C多态意味着调用成员函数时&#xff0c;会根据调用函数的对象的类型来执行不同的函…
阅读更多...
将内核加载到内存

将内核加载到内存

文章目录前言前置知识代码实验操作前言 本博客记录《操作系统真象还原》第五章第3个实验的操作~ 实验环境&#xff1a;ubuntu18.04VMware &#xff0c; Bochs下载安装 实验内容&#xff1a;将内核载入内存,初始化内核代码 实验原理 编写内核程序。将内核程序用dd命令复制到…
阅读更多...
Odoo 16 企业版手册 - 库存管理之存储类别

Odoo 16 企业版手册 - 库存管理之存储类别

存储类别 Odoo中的存储类别功能将允许您将许多存储位置分组到一个类别下。您可以在Odoo 库存管理模块中创建许多此类类别&#xff0c;这将有助于执行更智能的放置操作。在配置存储类别之前&#xff0c;您必须配置库存中可用的存储位置。然后&#xff0c;您可以将它们分组到一个…
阅读更多...
LeetCode刷题模版：31 - 40

LeetCode刷题模版：31 - 40

目录 简介31. 下一个排列32. 最长有效括号33. 搜索旋转排序数组34. 在排序数组中查找元素的第一个和最后一个位置35. 搜索插入位置36. 有效的数独37. 解数独38. 外观数列39. 组合总和40. 组合总和 II结语简介 Hello！ 非常感谢您阅读海轰的文章，倘若文中有错误的地方，欢迎您指…
阅读更多...
电影解说开头怎么写吸引人？

电影解说开头怎么写吸引人？

电影解说开头怎么写吸引人&#xff1f;很多电影解说创作者文采不够好&#xff0c;开头不知道怎么写&#xff1f;毕竟想留住用户继续观看视频&#xff0c;开头是至关重要的&#xff0c;今天笔者就分享电影解说文案万能公式模板&#xff0c;让大家创作更简单&#xff01;一个好的…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023