四时宝库

程序员的知识宝库

2024年08月31日

前端css学习，移动效果的实现(代码)

实现效果—视频链接：

前端css学习，移动效果的实现

https://www.ixigua.com/i7009992743401292325/

代码：

<!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;
      /* 设置视距，作用于3D转换的子元素 */
      perspective: 500px;

    }

    .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: translateX(0);
      }

      50% {
        /* 向右移动，x轴正方向 */
        transform: translateX(300px);
        /* 设置不透明度 */
        opacity: 1;
      }

      100% {
        transform: translateX(600px);
        opacity: 0;
      }
    }

    .img2 {
      z-index: 99;
      animation: image2 2s linear 3s;
      animation-fill-mode: forwards;
    }

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

      50% {
        /* 向左移动，x轴负方向 */
        transform: translateX(-300px);
        /* 设置不透明度 */
        opacity: 1;
      }

      100% {
        transform: translateX(-600px);
        opacity: 0;
      }
    }

    .img3 {
      z-index: 98;
      animation: image3 2s linear 5s;
      animation-fill-mode: forwards;
    }

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

      50% {
        /* 向上移动，y轴负方向 */
        transform: translateY(-200px);
        opacity: 1;
      }

      100% {
        transform: translateY(-400px);
        opacity: 0;
      }
    }

    .img4 {
      z-index: 97;
      animation: image4 2s linear 7s;
      animation-fill-mode: forwards;
    }

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

      50% {
        /* 向下移动，Y轴正方向 */
        transform: translateY(200px);
        opacity: 1;
      }

      100% {
        transform: translateY(400px);
        opacity: 0;
      }
    }

    .img5 {
      z-index: 96;
      animation: image5 2s linear 9s;
      animation-fill-mode: forwards;

    }

    @keyframes image5 {
      0% {
        transform: translateZ(0);
      }

      50% {
        /* 向远处移动，缩小，Z轴负方向 */
        transform: translateZ(-200px);
        opacity: 1;
      }

      100% {
        transform: translateZ(-1000px);
        opacity: 0;
      }
    }

    .img6 {
      z-index: 95;
      animation: image6 2s linear 11s;
      animation-fill-mode: forwards;

    }

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

      50% {
        /* 向前移动，放大，z轴正方向 */
        transform: translateZ(200px);
        opacity: 1;
      }

      100% {
        transform: translateZ(1000px);
        opacity: 0;
      }
    }

    .img7 {
      z-index: 94;
      animation: image7 2s linear 13s;
      animation-fill-mode: forwards;

    }

    @keyframes image7 {
      0% {
        transform: translate(0, 0)
      }

      50% {
        /* 移动xy，向左上角移动 */
        transform: translate(-300px, -300px);
        opacity: 1;
      }

      100% {
        transform: translate(-900px, -900px);
        opacity: 0;
      }
    }

    .img8 {
      z-index: 93;
      animation: image8 2s linear 15s;
      animation-fill-mode: forwards;

    }

    @keyframes image8 {
      0% {
        transform: translate(0, 0);
      }

      50% {
        /* 向右下角移动 */
        transform: translate(300px, 300px);
        opacity: 2;
      }

      100% {
        transform: translate(900px, 900px);
        opacity: 0;
      }
    }

    .img9 {
      z-index: 92;
      animation: image9 2s linear 17s;
      animation-fill-mode: forwards;

    }

    @keyframes image9 {
      0% {
        transform: translate(0, 0);
      }

      50% {
        /* 向右上角移动 */
        transform: translate(300px, -300px);
        opacity: 1;
      }

      100% {
        transform: translate(900px, -900px);
        opacity: 0;
      }
    }

    .img10 {
      z-index: 91;
      animation: image10 2s linear 19s;
      animation-fill-mode: forwards;
    }

    @keyframes image10 {
      0% {

        transform: translate(0, 0);
      }

      50% {
        /* 向左下角移动 */
        transform: translate(-300px, 300px);
        opacity: 1;
      }

      100% {
        transform: translate(-900px, 900px);
        opacity: 0;
      }
    }

    .img11 {
      z-index: 90;
      animation: image11 2s linear 21s;
      animation-fill-mode: forwards;
    }

    @keyframes image11 {
      0% {
        transform: translate3d(0, 0, 0);
      }

      50% {
        /* 向左后上方移动 */
        transform: translate3d(-300px,-300px,-900px);
        opacity: 1;
      }

      100% {
        transform: translate3d(-900px,-900px,-2700px);
        opacity: 0;
      }
    }

    .img12 {
      z-index: 89;
      animation: image12 2s linear 23s;
      animation-fill-mode: forwards;
    }

    @keyframes image12 {
      0% {
        transform: translate3d(0, 0, 0);
      }

      50% {
        /* 向右后上方移动 */
        transform: translate3d(300px,-300px,-900px);
        opacity: 1;
      }

      100% {
        transform: translate3d(900px,-900px,-2700px);
        opacity: 0;
      }
    }

    .img13 {
      z-index: 88;
      animation: image13 2s linear 25s;
      animation-fill-mode: forwards;
    }

    @keyframes image13 {
      0% {
        transform: translate3d(0, 0, 0);
      }

      50% {
        /* 向左后下方移动 */
        transform: translate3d(-300px,300px,-900px);
        opacity: 1;
      }

      100% {
        transform: translate3d(-900px,900px,-2700px);
        opacity: 0;
      }
    }

    .img14 {
      z-index: 87;
      animation: image14 2s linear 27s;
      animation-fill-mode: forwards;
    }

    @keyframes image14 {
      0% {
        transform: translate3d(0, 0, 0);
      }

      50% {
        /* 向右后下方移动 */
        transform: translate3d(300px,300px,-900px);
        opacity: 1;
      }

      100% {
        transform: translate3d(900px,900px,-2700px);
        opacity: 0;
      }
    }

    .img15 {
      z-index: 86;
      animation: image15 2s linear 29s;
      animation-fill-mode: forwards;
    }

    @keyframes image15 {
      0% {
        transform: translate3d(0, 0, 0);
      }

      50% {
        transform: translate3d(0px,-1100px,-2500px);
        opacity: 1;
      }

      100% {
        transform: translate3d(0px,1100px,-3000px);
        opacity: 0;
      }
    }

    .img16 {
      z-index: 85;
      animation: image16 2s linear 31s;
      animation-fill-mode: forwards;
    }

    @keyframes image16 {
      0% {
        transform: translate3d(0, 0, 0);
      }

      50% {
        transform: translate3d(-1200px,0px,-2000px);
        opacity: 1;
      }

      100% {
        transform: translate3d(1200px,0px,-3000px);
        opacity: 0;
      }
    }

    .img17 {
      z-index: 84;
      animation: image17 2s linear 33s;
      animation-fill-mode: forwards;
    }

    @keyframes image17 {
      0% {
        transform: translate3d(0, 0, 0);
      }

      50% {
        transform: translate3d(-1000px,-1000px,-2000px);
        opacity: 1;
      }

      75% {
        transform: translate3d(-1000px,1000px,-3000px);
        opacity: 0.6;
      }

      100% {
        transform: translate3d(1000px,-700px,-4000px);
        opacity: 0;
      }
    }

    .img18 {
      z-index: 83;
      animation: image18 2s linear 35s;
      animation-fill-mode: forwards;
    }

    @keyframes image18 {
      0% {
        transform: translate3d(0, 0, 0);
      }

      50% {
        transform: translate3d(-1000px,1000px,-2000px);
        opacity: 1;
      }

      75% {
        transform: translate3d(0px,-1000px,-3000px);
        opacity: 0.6;
      }

      100% {
        transform: translate3d(1000px,1000px,-4000px);
        opacity: 0;
      }
    }

    .img19 {
      z-index: 82;
      animation: image19 2s linear 37s;
      animation-fill-mode: forwards;
    }

    @keyframes image19 {
      0% {
        transform: translate3d(0, 0, 0);
      }

      50% {
        transform: translate3d(-1000px,-1000px,-2000px);
        opacity: 1;
      }

      66% {
        transform: translate3d(1000px,1000px,-2500px);
        opacity: 0.8;
      }

      88% {
        transform: translate3d(1000px,-1000px,-3000px);
        opacity: 0.6;
      }

      100% {
        transform: translate3d(-1000px,1000px,-4000px);
        opacity: 0;
      }
    }

    .img20 {
      z-index: 81;
      animation: image20 2s linear 39s;
      animation-fill-mode: forwards;
    }

    @keyframes image20 {
      0% {
        transform: translate3d(0, 0, 0);
      }

      50% {
        transform: translate3d(-1000px,-1000px,-2000px);
        opacity: 1;
      }

      66% {
        transform: translate3d(1000px,-1000px,-2500px);
        opacity: 0.8;
      }

      88% {
        transform: translate3d(-1000px,1000px,-3000px);
        opacity: 0.6;
      }

      100% {
        transform: translate3d(1000px,1000px,-4000px);
        opacity: 0;
      }
    }

    .img21 {
      z-index: 80;
      animation: image21 2s linear 41s;
      animation-fill-mode: forwards;
    }

    @keyframes image21 {
      0% {
        transform: translate3d(0, 0, 0);
      }

      50% {
        transform: translate3d(-1000px,1000px,-2000px);
        opacity: 1;
      }

      66% {
        transform: translate3d(-1000px,-1000px,-2500px);
        opacity: 0.8;
      }

      88% {
        transform: translate3d(1000px,1000px,-3000px);
        opacity: 0.6;
      }

      100% {
        transform: translate3d(1000px,-1000px,-4000px);
        opacity: 0;
      }
    }

    .img22 {
      z-index: 79;
      animation: image22 2s linear 43s;
      animation-fill-mode: forwards;
    }

    @keyframes image22 {
      0% {
        transform: translate3d(0, 0, 0);
      }

      50% {
        transform: translate3d(-1000px,1000px,-2000px);
        opacity: 1;
      }

      66% {
        transform: translate3d(-500px,-1000px,-2200px);
        opacity: 0.8;
      }

      77% {
        transform: translate3d(0px,1000px,-2500px);
        opacity: 0.7;
      }

      88% {
        transform: translate3d(500px,-1000px,-3000px);
        opacity: 0.6;
      }

      100% {
        transform: translate3d(1000px,1000px,-4000px);
        opacity: 0;
      }
    }

    .img23 {
      z-index: 78;
      animation: image23 2s linear 45s;
      animation-fill-mode: forwards;
    }

    @keyframes image23 {
      0% {
        transform: translate3d(0,0,0);
      }
      50% {
        transform: translate3d(1000px,-500px,-2000px);
        opacity: 1;
      }
      100% {
        transform: translate3d(-1000px,1000px,-4000px);
        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="" />

  </div>

</body>

</html>

实现效果—视频链接：

前端css学习，移动效果的实现

https://www.ixigua.com/i7009992743401292325/

标签：perspectivecss 

作者:sishi88 , 分类:技术教程 , 浏览:6 , 评论:0

发表评论:

控制面板
您好，欢迎到访网站！
  查看权限
网站分类
最新留言
    友情链接