百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

前端CSS学习:旋转、缩放效果的实现(代码)

itomcoil 2025-01-05 18:05 40 浏览

实现效果视频:

https://m.toutiaoimg.com/i7012628289806139918/?gd_ext_json=%7B%22enter_from%22%3A%22click_creation_center%22%2C%22category_name%22%3A%22creation_center%22%7D&enter_from=click_creation_center&category_name=creation_center&share_token=c3b59c5c-c95d-43a9-a842-4cd30e321a34&tt_from=copy_link&utm_source=copy_link&utm_medium=toutiao_android&utm_campaign=client_share

实现代码:

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

<head>
  <meta charset="UTF-8">
  <title>旋转、缩放</title>

  <style type="text/css">
    .box {
      width: 750px;
      height: 520px;
      margin: 50px auto;
      background-image: url(狼王-灵梦狼王.jpg);
      position: relative;
      /* 溢出隐藏 */
      overflow: hidden;

    }

    .box img {
      /* 设置图片位置 */
      position: absolute;
      top: 0;
      left: 0;
    }

    .img1 {
      z-index: 100;
      /* 动画 */
      animation: image1 2s linear 1s;
      /* 让动画停留在最后一帧,不回到开始处 */
      animation-fill-mode: forwards;
    }

    @keyframes image1 {
      0% {
        transform: scale(1);
      }

      50% {
        /* 缩放,缩小 */
        transform: scale(0.5);
      }

      100% {
        transform: scale(0.0001);
      }
    }

    .img2 {
      z-index: 98;
      /* 动画 */
      animation: image2 2s linear 3s;
      /* 让动画停留在最后一帧,不回到开始处 */
      animation-fill-mode: forwards;
    }

    @keyframes image2 {
      0% {
        transform: scale(1);
      }

      50% {
        /* 缩放,缩小 */
        transform: scale(1.5);
        /* 设置不透明度 */
        opacity: 1;
      }

      100% {
        transform: scale(5);
        opacity: 0;
      }
    }

    .img3 {
      z-index: 97;
      /* 动画 */
      animation: image3 2s linear 5s;
      /* 让动画停留在最后一帧,不回到开始处 */
      animation-fill-mode: forwards;
    }

    @keyframes image3 {
      0% {
        transform: rotate(0deg);
      }

      50% {
        transform: rotate(180deg);
        /* 设置不透明度 */
        opacity: 1;
      }

      100% {
        transform: rotate(360deg);
        opacity: 0;
      }
    }

    .img4 {
      z-index: 96;
      /* 动画 */
      animation: image4 2s linear 7s;
      /* 让动画停留在最后一帧,不回到开始处 */
      animation-fill-mode: forwards;
    }

    @keyframes image4 {
      0% {
        transform: rotate(0deg);
      }

      50% {
        transform: rotate(-180deg);
        /* 设置不透明度 */
        opacity: 1;
      }

      100% {
        transform: rotate(-360deg);
        opacity: 0;
      }
    }

    .img5 {
      z-index: 95;
      /* 动画 */
      animation: image5 2s linear 9s;
      /* 让动画停留在最后一帧,不回到开始处 */
      animation-fill-mode: forwards;
    }

    @keyframes image5 {
      0% {
        /* 绕y轴旋转 */
        transform: rotateY(0deg);
      }

      50% {
        transform: rotateY(-90deg);
        /* 设置不透明度 */
        opacity: 1;
      }

      100% {
        transform: rotateY(-180deg);
        opacity: 0;
      }
    }

    .img6 {
      z-index: 94;
      /* 动画 */
      animation: image6 2s linear 11s;
      /* 让动画停留在最后一帧,不回到开始处 */
      animation-fill-mode: forwards;
    }

    @keyframes image6 {
      0% {
        transform: rotateY(0deg);
      }

      50% {
        transform: rotateY(90deg);
        /* 设置不透明度 */
        opacity: 1;
      }

      100% {
        transform: rotateY(180deg);
        opacity: 0;
      }
    }

    .img7 {
      z-index: 93;
      /* 动画 */
      animation: image7 2s linear 13s;
      /* 让动画停留在最后一帧,不回到开始处 */
      animation-fill-mode: forwards;
    }

    @keyframes image7 {
      0% {
        transform: rotateZ(0deg);
      }

      50% {
        transform: rotateZ(180deg);
        /* 设置不透明度 */
        opacity: 1;
      }

      100% {
        transform: rotateZ(360deg);
        opacity: 0;
      }
    }

    .img8 {
      z-index: 92;
      /* 动画 */
      animation: image8 2s linear 15s;
      /* 让动画停留在最后一帧,不回到开始处 */
      animation-fill-mode: forwards;
    }

    @keyframes image8 {
      0% {
        transform: rotateZ(0deg);
      }

      50% {
        transform: rotateZ(-180deg);
        /* 设置不透明度 */
        opacity: 1;
      }

      100% {
        transform: rotateZ(-360deg);
        opacity: 0;
      }
    }

    .img9 {
      z-index: 91;
      /* 动画 */
      animation: image9 2s linear 17s;
      /* 让动画停留在最后一帧,不回到开始处 */
      animation-fill-mode: forwards;
    }

    @keyframes image9 {
      0% {
        transform: rotateX(0deg);
      }

      50% {
        transform: rotateX(-90deg);
        /* 设置不透明度 */
        opacity: 1;
      }

      100% {
        transform: rotateX(-180deg);
        opacity: 0;
      }
    }

    .img10 {
      z-index: 90;
      /* 动画 */
      animation: image10 2s linear 19s;
      /* 让动画停留在最后一帧,不回到开始处 */
      animation-fill-mode: forwards;
    }

    @keyframes image10 {
      0% {
        transform: rotateX(0deg);
      }

      50% {
        transform: rotateX(90deg);
        /* 设置不透明度 */
        opacity: 1;
      }

      100% {
        transform: rotateX(180deg);
        opacity: 0;
      }
    }

    .img11 {
      z-index: 89;
      /* 动画 */
      animation: image11 2s linear 21s;
      /* 让动画停留在最后一帧,不回到开始处 */
      animation-fill-mode: forwards;
      /* 设置旋转原点 */
      transform-origin: top;
    }

    @keyframes image11 {
      0% {
        transform: rotate(0deg);
      }

      50% {
        transform: rotate(90deg);
      }

      100% {
        transform: rotate(180deg);
      }
    }

    .img12 {
      z-index: 88;
      /* 动画 */
      animation: image12 2s linear 23s;
      /* 让动画停留在最后一帧,不回到开始处 */
      animation-fill-mode: forwards;
      /* 设置旋转原点 */
      transform-origin: top;
    }

    @keyframes image12 {
      0% {
        transform: rotate(0deg);
      }

      50% {
        transform: rotate(-90deg);
      }

      100% {
        transform: rotate(-180deg);
      }
    }

    .img13 {
      z-index: 87;
      /* 动画 */
      animation: image13 2s linear 25s;
      /* 让动画停留在最后一帧,不回到开始处 */
      animation-fill-mode: forwards;
      /* 设置旋转原点 */
      transform-origin: top;
    }

    @keyframes image13 {
      0% {
        transform: rotateX(0deg);
      }

      50% {
        transform: rotateX(-45deg);
      }

      100% {
        transform: rotateX(-90deg);
      }
    }

    .img14 {
      z-index: 86;
      /* 动画 */
      animation: image14 2s linear 27s;
      /* 让动画停留在最后一帧,不回到开始处 */
      animation-fill-mode: forwards;
      /* 设置旋转原点 */
      transform-origin: top;
    }

    @keyframes image14 {
      0% {
        transform: rotateX(0deg);
        /* 设置模糊度 */
        filter: blur(0px);
      }

      50% {
        transform: rotateX(45deg);
      }

      100% {
        transform: rotateX(90deg);
        filter: blur(1);
      }
    }

    .img15 {
      z-index: 85;
      /* 动画 */
      animation: image15 2s linear 29s;
      /* 让动画停留在最后一帧,不回到开始处 */
      animation-fill-mode: forwards;
      /* 设置旋转原点 */
      transform-origin: bottom;
    }

    @keyframes image15 {
      0% {
        transform: rotate(0deg);
      }

      50% {
        transform: rotate(-90deg);
      }

      100% {
        transform: rotate(-180deg);
      }
    }

    .img16 {
      z-index: 84;
      /* 动画 */
      animation: image16 2s linear 31s;
      /* 让动画停留在最后一帧,不回到开始处 */
      animation-fill-mode: forwards;
      /* 设置旋转原点 */
      transform-origin: bottom;
    }

    @keyframes image16 {
      0% {
        transform: rotate(0deg);
      }

      50% {
        transform: rotate(90deg);
      }

      100% {
        transform: rotate(180deg);
      }
    }

    .img17 {
      z-index: 83;
      /* 动画 */
      animation: image17 2s linear 33s;
      /* 让动画停留在最后一帧,不回到开始处 */
      animation-fill-mode: forwards;
      /* 设置旋转原点 */
      transform-origin: bottom;
    }

    @keyframes image17 {
      0% {
        transform: rotateX(0deg);
      }

      50% {
        transform: rotateX(45deg);
      }

      100% {
        transform: rotateX(90deg);
      }
    }

    .img18 {
      z-index: 82;
      /* 动画 */
      animation: image18 2s linear 35s;
      /* 让动画停留在最后一帧,不回到开始处 */
      animation-fill-mode: forwards;
      /* 设置旋转原点 */
      transform-origin: bottom;
    }

    @keyframes image18 {
      0% {
        transform: rotateX(0deg);
        filter: blur(0px);
      }

      50% {
        transform: rotateX(-45deg);
      }

      100% {
        transform: rotateX(-90deg);
        filter: blur(1px);
      }
    }

    .img19 {
      z-index: 81;
      /* 动画 */
      animation: image19 2s linear 37s;
      /* 让动画停留在最后一帧,不回到开始处 */
      animation-fill-mode: forwards;
      /* 设置旋转原点 */
      transform-origin: left;
    }

    @keyframes image19 {
      0% {
        transform: rotate(0deg);
      }

      50% {
        transform: rotate(-90deg);
      }

      100% {
        transform: rotate(-180deg);
      }
    }

    .img20 {
      z-index: 80;
      /* 动画 */
      animation: image20 2s linear 39s;
      /* 让动画停留在最后一帧,不回到开始处 */
      animation-fill-mode: forwards;
      /* 设置旋转原点 */
      transform-origin: left;
    }

    @keyframes image20 {
      0% {
        transform: rotate(0deg);
      }

      50% {
        transform: rotate(90deg);
      }

      100% {
        transform: rotate(180deg);
      }
    }

    .img21 {
      z-index: 79;
      /* 动画 */
      animation: image21 2s linear 41s;
      /* 让动画停留在最后一帧,不回到开始处 */
      animation-fill-mode: forwards;
      /* 设置旋转原点 */
      transform-origin: left;
    }

    @keyframes image21 {
      0% {
        transform: rotateY(0deg);
      }

      50% {
        transform: rotateY(45deg);
      }

      100% {
        transform: rotateY(90deg);
      }
    }

    .img22 {
      z-index: 78;
      /* 动画 */
      animation: image22 2s linear 43s;
      /* 让动画停留在最后一帧,不回到开始处 */
      animation-fill-mode: forwards;
      /* 设置旋转原点 */
      transform-origin: left;
    }

    @keyframes image22 {
      0% {
        transform: rotateY(0deg);
        filter: blur(0px);
      }

      50% {
        transform: rotateY(-45deg);
      }

      100% {
        transform: rotateY(-90deg);
        filter: blur(1px);
      }
    }

    .img23 {
      z-index: 77;
      /* 动画 */
      animation: image23 2s linear 45s;
      /* 让动画停留在最后一帧,不回到开始处 */
      animation-fill-mode: forwards;
      /* 设置旋转原点 */
      transform-origin: right;
    }

    @keyframes image23 {
      0% {
        transform: rotate(0deg);
      }

      50% {
        transform: rotate(-90deg);
      }

      100% {
        transform: rotate(-180deg);
      }
    }

    .img24 {
      z-index: 76;
      /* 动画 */
      animation: image24 2s linear 47s;
      /* 让动画停留在最后一帧,不回到开始处 */
      animation-fill-mode: forwards;
      /* 设置旋转原点 */
      transform-origin: right;
    }

    @keyframes image24 {
      0% {
        transform: rotate(0deg);
      }

      50% {
        transform: rotate(90deg);
      }

      100% {
        transform: rotate(180deg);
      }
    }

    .img25 {
      z-index: 75;
      /* 动画 */
      animation: image25 2s linear 49s;
      /* 让动画停留在最后一帧,不回到开始处 */
      animation-fill-mode: forwards;
      /* 设置旋转原点 */
      transform-origin: right;
    }

    @keyframes image25 {
      0% {
        transform: rotateY(0deg);
        filter: blur(0px);
      }

      50% {
        transform: rotateY(45deg);
      }

      100% {
        transform: rotateY(90deg);
        filter: blur(1px);
      }
    }

    .img26 {
      z-index: 74;
      /* 动画 */
      animation: image26 2s linear 51s;
      /* 让动画停留在最后一帧,不回到开始处 */
      animation-fill-mode: forwards;
      /* 设置旋转原点 */
      transform-origin: right;
    }

    @keyframes image26 {
      0% {
        transform: rotateY(0deg);
      }

      50% {
        transform: rotateY(-45deg);
      }

      100% {
        transform: rotateY(-90deg);
      }
    }

    .img27 {
      z-index: 73;
      /* 动画 */
      animation: image27 2s linear 53s;
      /* 让动画停留在最后一帧,不回到开始处 */
      animation-fill-mode: forwards;
      /* 设置旋转原点 */
      transform-origin: left top;
    }

    @keyframes image27 {
      0% {
        transform: rotate(0deg);
      }

      50% {
        transform: rotate(90deg);

      }

      100% {
        transform: rotate(180deg);

      }
    }

    .img28 {
      z-index: 72;
      /* 动画 */
      animation: image28 2s linear 55s;
      /* 让动画停留在最后一帧,不回到开始处 */
      animation-fill-mode: forwards;
      /* 设置旋转原点 */
      transform-origin: right top;
    }

    @keyframes image28 {
      0% {
        transform: rotate(0deg);
      }

      50% {
        transform: rotate(-90deg);

      }

      100% {
        transform: rotate(-180deg);

      }
    }

    .img29 {
      z-index: 71;
      /* 动画 */
      animation: image29 2s linear 57s;
      /* 让动画停留在最后一帧,不回到开始处 */
      animation-fill-mode: forwards;
    }

    @keyframes image29 {
      0% {
        transform: rotateZ(0deg) scale(1);
      }

      50% {
        transform: rotateZ(180deg) scale(0.5);

      }

      100% {
        transform: rotateZ(360deg) scale(0.0001);

      }
    }

    .img30 {
      z-index: 70;
      /* 动画 */
      animation: image30 2s linear 59s;
      /* 让动画停留在最后一帧,不回到开始处 */
      animation-fill-mode: forwards;
    }

    @keyframes image30 {
      0% {
        transform: rotateX(0deg) scale(1);
      }

      50% {
        transform: rotateX(180deg) scale(0.5);

      }

      100% {
        transform: rotateX(360deg) scale(0.0001);

      }
    }

    .img31 {
      z-index: 69;
      /* 动画 */
      animation: image31 2s linear 61s;
      /* 让动画停留在最后一帧,不回到开始处 */
      animation-fill-mode: forwards;
    }

    @keyframes image31 {
      0% {
        transform: rotateY(0deg) scale(1);
      }

      50% {
        transform: rotateY(180deg) scale(0.5);

      }

      100% {
        transform: rotateY(360deg) scale(0.0001);

      }
    }

    .img32 {
      z-index: 68;
      /* 动画 */
      animation: image32 2s linear 63s;
      /* 让动画停留在最后一帧,不回到开始处 */
      animation-fill-mode: forwards;
    }

    @keyframes image32 {
      0% {
        transform: scaleX(1);
      }

      50% {
        transform: scaleX(0.5);
      }

      100% {
        transform: scaleX(0.0001);
      }
    }

    .img33 {
      z-index: 67;
      /* 动画 */
      animation: image33 2s linear 65s;
      /* 让动画停留在最后一帧,不回到开始处 */
      animation-fill-mode: forwards;
    }

    @keyframes image33 {
      0% {
        transform: rotateY(0deg) scaleX(1);
      }

      50% {
        transform: rotateY(180deg) scaleX(0.5);
      }

      100% {
        transform: rotateY(360deg) scaleX(0.0001);
      }
    }

    .img34 {
      z-index: 66;
      /* 动画 */
      animation: image34 2s linear 67s;
      /* 让动画停留在最后一帧,不回到开始处 */
      animation-fill-mode: forwards;
    }

    @keyframes image34 {
      0% {
        transform: scaleY(1);
      }

      50% {
        transform: scaleY(0.5);
      }

      100% {
        transform: scaleY(0);
      }
    }

    .img35 {
      z-index: 65;
      /* 动画 */
      animation: image35 2s linear 69s;
      /* 让动画停留在最后一帧,不回到开始处 */
      animation-fill-mode: forwards;
    }

    @keyframes image35 {
      0% {
        transform: rotateY(0deg) scaleY(1);
      }

      50% {
        transform: rotateY(180deg) scaleY(0.5);
      }

      100% {
        transform: rotateY(360deg) scaleY(0);
      }
    }

    .img36 {
      z-index: 64;
      /* 动画 */
      animation: image36 2s linear 71s;
      /* 让动画停留在最后一帧,不回到开始处 */
      animation-fill-mode: forwards;
    }

    @keyframes image36 {
      0% {
        transform: rotate(0deg) scaleY(1);
      }

      50% {
        transform: rotate(180deg) scaleY(1.5);
        opacity: 1;
      }

      100% {
        transform: rotate(360deg) scaleY(5);
        opacity: 0;
      }
    }
   
  </style>

</head>

<body>
  <div class="box">
    <img class="img1" src="狼蛛.jpg" alt="" />
    <img class="img2" src="狼蛛-紫魅毒姬.jpg" alt="" />
    <img class="img3" src="洛神.jpg" alt="" />
    <img class="img4" src="猎魔人.jpg" alt="" />
    <img class="img5" src="猎魔人-蜂针魔女.jpg" alt="" />
    <img class="img6" src="猎魔人-原力神枪.jpg" alt="" />
    <img class="img7" src="猎魔人-挚爱甜心.jpg" alt="" />
    <img class="img8" src="罗刹郡主.jpg" alt="" />
    <img class="img9" src="罗刹郡主-玫红冰晶.jpg" alt="" />
    <img class="img10" src="罗刹郡主-耀世神皇.jpg" alt="" />
    <img class="img11" src="罗刹郡主-樱落飞翎.jpg" alt="" />
    <img class="img12" src="洛神-北境仙姬.jpg" alt="" />
    <img class="img13" src="洛神-飞羽女王.jpg" alt="" />
    <img class="img14" src="洛神-惊鸿仙子.jpg" alt="" />
    <img class="img15" src="绿野花仙.jpg" alt="" />
    <img class="img16" src="绿野花仙-精灵公主.jpg" alt="" />
    <img class="img17" src="绿野花仙-矩阵天翼.jpg" alt="" />
    <img class="img18" src="绿野花仙-绿梦天仙.jpg" alt="" />
    <img class="img19" src="魅魔公主.jpg" alt="" />
    <img class="img20" src="魅魔公主-炼金魔女.jpg" alt="" />
    <img class="img21" src="魅魔公主-梦有灵犀.jpg" alt="" />
    <img class="img22" src="魅魔公主-星幻少女.jpg" alt="" />
    <img class="img23" src="哪吒.jpg" alt="" />
    <img class="img24" src="哪吒-飞轮公主.jpg" alt="" />
    <img class="img25" src="哪吒-黄金威灵.jpg" alt="" />
    <img class="img26" src="哪吒-轮刃审判.jpg" alt="" />
    <img class="img27" src="哪吒-异界仙将.jpg" alt="" />
    <img class="img28" src="聂小倩.jpg" alt="" />
    <img class="img29" src="聂小倩-黛染幽情.jpg" alt="" />
    <img class="img30" src="聂小倩-勾魂灯使.jpg" alt="" />
    <img class="img31" src="聂小倩-海洋之心.jpg" alt="" />
    <img class="img32" src="聂小倩-绿影魔仙.jpg" alt="" />
    <img class="img33" src="聂小倩-仲夏清和.jpg" alt="" />
    <img class="img34" src="女武神.jpg" alt="" />
    <img class="img35" src="女武神-火羽流炎.jpg" alt="" />
    <img class="img36" src="女武神-金枪战神.jpg" alt="" />


  </div>

</body>

</html>

实现效果视频:

https://www.ixigua.com/i7012628289806139918/

相关推荐

MySQL修改密码_mysql怎么改密码忘了怎么办

拥有原来的用户名账户的密码mysqladmin-uroot-ppassword"test123"Enterpassword:【输入原来的密码】忘记原来root密码第一...

数据库密码配置项都不加密?心也太大了吧!

先看一份典型的配置文件...省略...##配置MySQL数据库连接spring.datasource.driver-class-name=com.mysql.jdbc.Driverspr...

Linux基础知识_linux基础入门知识

系统目录结构/bin:命令和应用程序。/boot:这里存放的是启动Linux时使用的一些核心文件,包括一些连接文件以及镜像文件。/dev:dev是Device(设备)的缩写,该目录...

MySQL密码重置_mysql密码重置教程

之前由于修改MySQL加密模式为mysql_native_password时操作失误,导致无法登陆MySQL数据库,后来摸索了一下,对MySQL数据库密码进行重置后顺利解决,步骤如下:1.先停止MyS...

Mysql8忘记密码/重置密码_mysql密码忘了怎么办?

Mysql8忘记密码/重置密码UBUNTU下Mysql8忘记密码/重置密码步骤如下:先说下大概步骤:修改配置文件,使得用空密码可以进入mysql。然后置当前root用户为空密码。再次修改配置文件,不能...

MySQL忘记密码怎么办?Windows环境下MySQL密码重置图文教程

有不少小白在使用Windows进行搭建主机的时候,安装了一些环境后,其中有MySQL设置后,然后不少马大哈忘记了MySQL的密码,导致在一些程序安装及配置的时候无法进行。这个时候怎么办呢?重置密码呗?...

10种常见的MySQL错误,你可中招?_mysql常见错误提示及解决方法

【51CTO.com快译】如果未能对MySQL8进行恰当的配置,您非但可能遇到无法顺利访问、或调用MySQL的窘境,而且还可能给真实的应用生产环境带来巨大的影响。本文列举了十种MySQL...

Mysql解压版安装过程_mysql解压版安装步骤

Mysql是目前软件开发中使用最多的关系型数据库,具体安装步骤如下:第一步:Mysql官网下载最新版(mysql解压版(mysql-5.7.17-winx64)),Mysql官方下载地址为:https...

MySQL Root密码重置指南:Windows新手友好教程

如果你忘记了MySQLroot密码,请按照以下简单步骤进行重置。你需要准备的工具:已安装的MySQL以管理员身份访问命令提示符一点复制粘贴的能力分步操作指南1.创建密码重置文件以管理员...

安卓手机基于python3搜索引擎_python调用安卓so库

环境:安卓手机手机品牌:vivox9s4G运行内存手机软件:utermux环境安装:1.java环境的安装2.redis环境的安装aptinstallredis3.elasticsearch环...

Python 包管理 3 - poetry_python community包

Poetry是一款现代化的Python依赖管理和打包工具。它通过一个pyproject.toml文件来统一管理你的项目依赖、配置和元数据,并用一个poetry.lock文件来锁定所有依赖的精...

Python web在线服务生产环境真实部署方案,可直接用

各位志同道合的朋友大家好,我是一个一直在一线互联网踩坑十余年的编码爱好者,现在将我们的各种经验以及架构实战分享出来,如果大家喜欢,就关注我,一起将技术学深学透,我会每一篇分享结束都会预告下一专题最近经...

官方玩梗:Python 3.14(πthon)稳定版发布,正式支持自由线程

IT之家10月7日消息,当地时间10月7日,Python软件基金会宣布Python3.14.0正式发布,也就是用户期待已久的圆周率(约3.14)版本,再加上谐音梗可戏称为π...

第一篇:如何使用 uv 创建 Python 虚拟环境

想象一下,你有一个使用Python3.10的后端应用程序,系统全局安装了a2.1、b2.2和c2.3这些包。一切运行正常,直到你开始一个新项目,它也使用Python3.10,但需要...

我用 Python 写了个自动整理下载目录的工具

经常用电脑的一定会遇到这种情况:每天我们都在从浏览器、微信、钉钉里下各种文件,什么截图、合同、安装包、临时文档,全都堆在下载文件夹里。起初还想着“过两天再整理”,结果一放就是好几年。结果某天想找一个发...