云端漫步 发表于 2025-11-21 21:04:17

【漫步特效】模特儿舞台走秀

<style>
#stage {
    margin: 130px 0 30px calc(50% - 960px);
    display: grid;
    place-items: center;
    width: 1700px;
    height: 850px;
    background: lightblue url('https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/6/4/BB1.jpg') no-repeat center/cover;
    box-shadow: 3px 3px 20px #000;
    user-select: none;
    overflow: hidden;
    position: relative;
    z-index: 1;
}
#light-effect {
    position: absolute;
    width: 130%;
    height: 130%;
    object-fit: cover;
    pointer-events: none;
    mix-blend-mode: screen;
    mask: linear-gradient(to top right, red 88%, transparent 0);
    -webkit-mask: linear-gradient(to top right, red 88%, transparent 0);
    z-index: 6;
    opacity: .23;
}
.model-img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    z-index: 2;
}
/* Animation Keyframes */
@keyframes shakeIn {0%{transform:translateX(-50px) rotate(-5deg);opacity:0}50%{transform:translateX(20px) rotate(3deg)}100%{transform:translateX(0) rotate(0);opacity:1}}
@keyframes zoomIn {0%{transform:scale(0.5);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes blinds {0%{height:0;opacity:0}100%{height:100%;opacity:1}}
@keyframes fadeIn {0%{opacity:0}100%{opacity:1}}
@keyframes rotateIn {0%{transform:rotate(-360deg) scale(0.5);opacity:0}100%{transform:rotate(0) scale(1);opacity:1}}
@keyframes slideUp {0%{transform:translateY(100%);opacity:0}100%{transform:translateY(0);opacity:1}}
@keyframes slideDown {0%{transform:translateY(-100%);opacity:0}100%{transform:translateY(0);opacity:1}}
@keyframes rotateEnter {0%{transform:rotate(180deg) scale(0.5);opacity:0}100%{transform:rotate(0) scale(1);opacity:1}}
@keyframes horizontalTwist {0%{transform:skewX(30deg) scale(0.8);opacity:0}100%{transform:skewX(0) scale(1);opacity:1}}
@keyframes bounceIn {0%{transform:scale(0.3);opacity:0}50%{transform:scale(1.05)}70%{transform:scale(0.9)}100%{transform:scale(1);opacity:1}}
@keyframes flipIn {0%{transform:perspective(400px) rotateY(90deg);opacity:0}40%{transform:perspective(400px) rotateY(-10deg)}70%{transform:perspective(400px) rotateY(10deg)}100%{transform:perspective(400px) rotateY(0);opacity:1}}
@keyframes rollIn {0%{transform:translateX(-100%) rotate(-120deg);opacity:0}100%{transform:translateX(0) rotate(0);opacity:1}}
@keyframes rippleIn {0%{clip-path:circle(0% at center);opacity:0}100%{clip-path:circle(150% at center);opacity:1}}
@keyframes waveIn {0%{transform:translateX(-100%) skewX(20deg);opacity:0}60%{transform:translateX(20%) skewX(-5deg)}100%{transform:translateX(0) skewX(0);opacity:1}}
@keyframes spiralIn {0%{transform:scale(0) rotate(0deg);opacity:0}50%{transform:scale(1.2) rotate(180deg)}100%{transform:scale(1) rotate(360deg);opacity:1}}
@keyframes gridReveal {0%{background-size:20px 20px;background-image:linear-gradient(to right,rgba(0,0,0,0.8) 1px,transparent 1px),linear-gradient(to bottom,rgba(0,0,0,0.8) 1px,transparent 1px);opacity:0}50%{background-size:20px 20px;background-image:linear-gradient(to right,rgba(0,0,0,0.2) 1px,transparent 1px),linear-gradient(to bottom,rgba(0,0,0,0.2) 1px,transparent 1px)}100%{background-image:none;opacity:1}}
@keyframes pixelReveal {0%{image-rendering:pixelated;transform:scale(0.1);opacity:0}50%{image-rendering:pixelated;transform:scale(0.5)}100%{image-rendering:auto;transform:scale(1);opacity:1}}
@keyframes flashBang {0%{filter:brightness(5) contrast(3);opacity:0}50%{filter:brightness(3) contrast(2)}100%{filter:brightness(1) contrast(1);opacity:1}}
@keyframes radialWipe {0%{clip-path:circle(0% at center);opacity:0}100%{clip-path:circle(150% at center);opacity:1}}
@keyframes diagonalWipe {0%{clip-path:polygon(0 0,0 0,0 100%,0% 100%);opacity:0}100%{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);opacity:1}}
@keyframes colorSeparation {0%{filter:hue-rotate(0deg) sepia(1) saturate(3);opacity:0}50%{filter:hue-rotate(180deg) sepia(0.5) saturate(2)}100%{filter:hue-rotate(0deg) sepia(0) saturate(1);opacity:1}}
@keyframes glitchScan {0%{opacity:0;transform:translateX(0)}20%{opacity:0.5;transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}100%{opacity:1;transform:translateX(0)}}
@keyframes starfieldIn {0%{transform:scale(0.3) rotate(0deg);opacity:0;filter:blur(10px)}50%{transform:scale(1.1) rotate(180deg);filter:blur(2px)}100%{transform:scale(1) rotate(360deg);opacity:1;filter:blur(0)}}
@keyframes liquidIn {0%{transform:scale(0.8) skew(10deg,10deg);opacity:0;filter:contrast(2)}50%{transform:scale(1.05) skew(-5deg,-5deg)}100%{transform:scale(1) skew(0,0);opacity:1;filter:contrast(1)}}
@keyframes paintIn {0%{clip-path:polygon(0 0,0 0,0 100%,0% 100%);opacity:0}100%{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);opacity:1}}
/* Animation Classes */
.anim-shakeIn{animation:shakeIn 1.5s forwards}.anim-zoomIn{animation:zoomIn 1.5s forwards}.anim-blinds{animation:blinds 1.5s forwards}.anim-fadeIn{animation:fadeIn 1.5s forwards}.anim-rotateIn{animation:rotateIn 1.5s forwards}.anim-slideUp{animation:slideUp 1.5s forwards}.anim-slideDown{animation:slideDown 1.5s forwards}.anim-rotateEnter{animation:rotateEnter 1.5s forwards}.anim-horizontalTwist{animation:horizontalTwist 1.5s forwards}.anim-bounceIn{animation:bounceIn 1.5s forwards}.anim-flipIn{animation:flipIn 1.5s forwards}.anim-rollIn{animation:rollIn 1.5s forwards}.anim-rippleIn{animation:rippleIn 1.5s forwards}.anim-waveIn{animation:waveIn 1.5s forwards}.anim-spiralIn{animation:spiralIn 1.5s forwards}.anim-gridReveal{animation:gridReveal 1.5s forwards}.anim-pixelReveal{animation:pixelReveal 1.5s forwards}.anim-flashBang{animation:flashBang 1.5s forwards}.anim-radialWipe{animation:radialWipe 1.5s forwards}.anim-diagonalWipe{animation:diagonalWipe 1.5s forwards}.anim-colorSeparation{animation:colorSeparation 1.5s forwards}.anim-glitchScan{animation:glitchScan 1.5s forwards}.anim-starfieldIn{animation:starfieldIn 1.8s forwards}.anim-liquidIn{animation:liquidIn 1.6s forwards}.anim-paintIn{animation:paintIn 1.4s forwards}
</style>
</head>
<body>
<div id="stage">
    <audio id="catwalk-audio" src="https://mp3.joy127.com/music/12534.mp3" autoplay loop></audio>
    <video id="light-effect" src="https://img.tukuppt.com/video_show/2475824/00/01/98/5b4f6dda0115f.mp4" autoplay loop muted></video>
    <img class="model-img" src="https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/6/4/BB2.jpg" alt="Model 2">
    <img class="model-img" src="https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/6/4/BB3.jpg" alt="Model 3">
    <img class="model-img" src="https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/6/4/BB4.jpg" alt="Model 4">
    <img class="model-img" src="https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/6/4/BB5.jpg" alt="Model 5">
    <img class="model-img" src="https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/6/4/BB6.jpg" alt="Model 6">
    <img class="model-img" src="https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/6/4/BB7.jpg" alt="Model 7">
    <img class="model-img" src="https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/6/4/BB8.jpg" alt="Model 8">
    <img class="model-img" src="https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/6/4/BB9.jpg" alt="Model 9">
    <img class="model-img" src="https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/6/4/BB10.jpg" alt="Model 10">
    <img class="model-img" src="https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/6/4/BB11.jpg" alt="Model 11">
    <img class="model-img" src="https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/6/4/BB12.jpg" alt="Model 12">
</div>
<script>
const animations = ['anim-shakeIn','anim-zoomIn','anim-blinds','anim-fadeIn','anim-rotateIn','anim-slideUp','anim-slideDown','anim-rotateEnter','anim-horizontalTwist','anim-bounceIn','anim-flipIn','anim-rollIn','anim-rippleIn','anim-waveIn','anim-spiralIn','anim-gridReveal','anim-pixelReveal','anim-flashBang','anim-radialWipe','anim-diagonalWipe','anim-colorSeparation','anim-glitchScan','anim-starfieldIn','anim-liquidIn','anim-paintIn'];
const images = document.querySelectorAll('.model-img');
let currentIndex = 0;
const interval = 2;

function showImage(index) {
    images.forEach(img => {
      img.style.opacity = '0';
      img.className = 'model-img';
    });
    const currentImg = images;
    currentImg.classList.add(animations);
    currentImg.style.opacity = '1';
}

showImage(0);

setInterval(() => {
    currentIndex = (currentIndex + 1) % images.length;
    showImage(currentIndex);
}, interval * 1000);

window.onload = () => {
    const audio = document.getElementById('catwalk-audio');
    audio.play().catch(e => {
      console.log('Audio autoplay blocked. Click to play:', e);
      document.body.addEventListener('click', () => audio.play(), { once: true });
    });
};
</script>

玫の玫 发表于 2025-11-21 21:06:40

欣赏老师美作，
感谢精彩分享，
感谢给大家带来美滴享受！
祝创作愉快，
天天好心情！

玫の玫 发表于 2025-11-21 21:07:42

好多美女，图图都很美~效果美美哒！{:1_154:}

欧阳风刀 发表于 2025-11-22 10:50:33

美女众多，百花争艳。转场效果精彩。

欧阳风刀 发表于 2025-11-22 10:50:52

感谢漫步兄分享。周末愉快。:handshake

圊圊淥詶 发表于 2025-11-22 17:46:30

我就是来看美女的{:S15:}

圊圊淥詶 发表于 2025-11-22 17:46:56

谢谢漫步老师精彩分享，制作辛苦了哦~~

绿蔷薇 发表于 2025-11-22 19:25:37

好多模特，还有洋妞~~{:4_123:}

绿蔷薇 发表于 2025-11-22 19:27:51

舞台场景色彩丰富
图片转场自然流畅
蛐蛐时尚感满满
视听的享受~~~~

绿蔷薇 发表于 2025-11-22 19:28:20

谢谢漫步老师制作分享，祝周末快乐哈~~{:S06:}
页: [1]
查看完整版本: 【漫步特效】模特儿舞台走秀