亚伦影音工作室 发表于 2026-9-8 14:40

css切换【不同转场】没有完善

本帖最后由 亚伦影音工作室 于 2026-9-8 14:52 编辑 <br /><br /><style>
      #mydiv {
            margin: 10px 0 30px calc(50% - 700px);
            display: grid;
            place-items: center;
            width: 1286px;
            height: 720px;
            background: lightblue url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/16cd7dfb20ccf922744b79b3a3563708.jpg) no-repeat center/cover;
            box-shadow: 3px 3px 20px #000;
            user-select: none;
            overflow: hidden;
            position: relative;
            z-index: 1;
      }

      .loopimg-container{top: 0;
            left: 0;
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: 0;

      }

      .loopimg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0;
            animation: 30s infinite ;
            }

      @keyframes img1Anim {
            0% { opacity: 1; transform: rotateY(180deg) scale(1); }

            16% { opacity: 1; transform: rotateY(0) scale(1); }
            36% { opacity: 0; transform: rotateY(0deg) scale(4); }

      }

      @keyframes img2Anim {
            0% { opacity: 1; transform: scale(0.5); filter: saturate(0); }
            9% { transform: scale(1); }
            12% { opacity: 1; transform: scale(1); filter: saturate(1.2); }
            36% { opacity: 0; transform: scale(4); filter: saturate(0); }

      }

      @keyframes img3Anim {
            0% { opacity: 1; clip-path: circle(0% at center); }

            16% { opacity: 1; clip-path: circle(100% at center); }
            18% { opacity: 1; clip-path: circle(100% at center); }
            36% { opacity: 0; clip-path: circle(100% at center); transform: scale(1);}

      }

      @keyframes img4Anim
            {0% {opacity: 0;transform:translate(-100%,-100%)scale(0);}
4% {opacity: 1;transform:translate(0%,0%)scale(0.6)rotate(-360deg);}
5% {opacity: 1;transform:translate(0%,0%)scale(0.7)rotate(-360deg);}
7% {opacity: 1;transform: perspective(1300px) rotateY(70deg)scale(0.7)}
9% {opacity: 1;transform: perspective(1300px) rotateY(-70deg)scale(0.7)}
18% {opacity: 1;transform:translate(100%,100%) perspective(1300px)rotatex(0deg) rotateY(90deg)scale(3);}
36% {opacity: 0;transform:translate(100%,100%) perspective(1300px)rotatex(0deg) rotateY(90deg)scale(3);}
}

      @keyframes img5Anim
             {0% {
opacity: 0;clip-path:polygon(50% 50%, 100% 50%, 50% 50%, 50% 100%, 50% 50%, 0 50%, 50% 50%, 50% 0);
-webkit-transform:translate(0%,0%)scale(1);}


6% {
opacity: 1;background-position: 0% -100%;clip-path: polygon(75% 25%, 100% 50%, 75% 75%, 50% 100%, 25% 75%, 0 50%, 25% 25%, 50% 0);
}
12% {
opacity: 1;background-position: 0% -100%;clip-path: polygon(50% 0, 100% 0, 100% 50%, 100% 100%, 50% 100%, 0 100%, 0 50%, 0 0);
}
16% {
opacity: 1;background-position: 0% -100%;clip-path:polygon(50% 0, 100% 0, 100% 50%, 100% 100%, 50% 100%, 0 100%, 0 50%, 0 0);
-webkit-transform:translate(0%,0%)scale(1);}
36% {
opacity: 0;background-position: 0% -100%;clip-path:polygon(50% 0, 100% 0, 100% 50%, 100% 100%, 50% 100%, 0 100%, 0 50%, 0 0);
-webkit-transform:translate(0%,0%)scale(1);}
}
       .loopimg1 { animation-name: img1Anim; animation-delay: 0s; }
      .loopimg2 { animation-name: img2Anim; animation-delay: 6s; }
      .loopimg3 { animation-name: img3Anim; animation-delay: 12s; }
      .loopimg4 { animation-name: img4Anim; animation-delay: 18s; }
      .loopimg5 { animation-name: img5Anim; animation-delay: 24s; }
    </style>

    <div id="mydiv">
      <audio id="aud" src="https://music.163.com/song/media/outer/url?id=3365118959.mp3" autoplay loop></audio>
       <div class="loopimg-container">
            <img src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/e8546b5aaffb07791ed178d61e7cff7a.jpg" class="loopimg loopimg1">
            <img src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/d8479e15a051125823083f4d4d362b98.jpg" class="loopimg loopimg2">
            <img src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/7f2a8237ef017e2687f8f8ff2795b33d.jpg" class="loopimg loopimg3">
            <img src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/49b4f5138da37043e9b2651842d4dc6d.jpg" class="loopimg loopimg4">
            <img src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/e9bacf62c6300a8dd2553adee41c1201.jpg" class="loopimg loopimg5">
      </div>
    </div>   

梦油 发表于 2026-9-8 17:08

亚伦这无与伦比的精彩制作太精美了。{:4_199:}

红影 发表于 2026-9-8 22:18

这首歌叫什么名字，非常好听，制作也很漂亮。
欣赏亚伦老师好帖{:4_199:}

红影 发表于 2026-9-8 22:40

找到歌曲了，《你是我割舍的人》{:4_204:}

夕阳黄昏 发表于 2026-9-9 12:17

一个跨浏览器的 CSS 动画库，它提供了一系列预设的动画效果，可以轻松地应用到你的网页项目中。
https://animatecss.node.org.cn/
页: [1]
查看完整版本: css切换【不同转场】没有完善