醉美水芙蓉 发表于 2025-10-9 20:52:39

【漫步特效】夜莺啄碎/歌特风


<style>
#mydiv {
    margin: 130px 0 30px calc(50% - 900px);
    display: grid;
    place-items: center;
    width: 1700px;
    height: 850px;
    background: lightblue url('https://s21.ax1x.com/2025/10/09/pVHVcLQ.jpg') no-repeat center/cover;
    box-shadow: 3px 3px 20px #000;
    user-select: none;
    overflow: hidden;
    position: relative;
    z-index: 1;
}
#vid {
    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: .35;
}
.anim-img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    z-index: 5;
}
@keyframes fragmentRotateFly {
    0% { clip-path: inset(30% 30% 30% 30%); transform: translate(-50%, -50%) rotate(-45deg) scale(0.3); opacity: 0; }
    50% { clip-path: inset(0 0 0 0); transform: translate(0, 0) rotate(15deg) scale(1.1); opacity: 1; }
    100% { transform: rotate(0) scale(1); opacity: 1; }
}
.anim1 { animation: fragmentRotateFly 1s forwards; }
@keyframes blindsMulti {
    0% { clip-path: inset(0 100% 0 0); opacity: 0; }
    20% { clip-path: inset(0 80% 0 0); opacity: 1; }
    40% { clip-path: inset(0 60% 0 0); }
    60% { clip-path: inset(0 40% 0 0); }
    80% { clip-path: inset(0 20% 0 0); }
    100% { clip-path: inset(0 0 0 0); opacity: 1; }
}
.anim2 { animation: blindsMulti 1s forwards; }
@keyframes centerSpreadRotate {
    0% { clip-path: circle(0% at 50% 50%); transform: rotate(-180deg) scale(0.5); opacity: 0; }
    70% { clip-path: circle(70% at 50% 50%); transform: rotate(30deg) scale(1.1); opacity: 1; }
    100% { clip-path: circle(100% at 50% 50%); transform: rotate(0) scale(1); opacity: 1; }
}
.anim3 { animation: centerSpreadRotate 1s forwards; }
@keyframes waveRoll {
    0% { transform: translateY(100%) skew(0, 10deg); opacity: 0; }
    50% { transform: translateY(-10%) skew(0, -5deg); opacity: 1; }
    100% { transform: translateY(0) skew(0, 0); opacity: 1; }
}
.anim4 { animation: waveRoll 1s forwards; }
@keyframes stepIn {
    0% { clip-path: inset(100% 0 0 0); opacity: 0; }
    20% { clip-path: inset(80% 0 0 0); opacity: 1; }
    40% { clip-path: inset(60% 0 0 0); }
    60% { clip-path: inset(40% 0 0 0); }
    80% { clip-path: inset(20% 0 0 0); }
    100% { clip-path: inset(0 0 0 0); opacity: 1; }
}
.anim5 { animation: stepIn 1s forwards; }
@keyframes flip3d {
    0% { transform: perspective(1000px) rotateY(90deg) scale(0.5); opacity: 0; }
    70% { transform: perspective(1000px) rotateY(-10deg) scale(1.05); opacity: 1; }
    100% { transform: perspective(1000px) rotateY(0) scale(1); opacity: 1; }
}
.anim6 { animation: flip3d 1s forwards; }
@keyframes squeezeExpand {
    0% { transform: scaleX(0.1) scaleY(1.2); opacity: 0; }
    50% { transform: scaleX(1.1) scaleY(0.9); opacity: 1; }
    100% { transform: scaleX(1) scaleY(1); opacity: 1; }
}
.anim7 { animation: squeezeExpand 1s forwards; }
@keyframes fadeInScale {
    0% { transform: scale(0.8); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}
.anim8 { animation: fadeInScale 1s forwards; }
@keyframes slideInLeft {
    0% { transform: translateX(-100%); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}
.anim9 { animation: slideInLeft 1s forwards; }
@keyframes slideInRight {
    0% { transform: translateX(100%); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}
.anim10 { animation: slideInRight 1s forwards; }
@keyframes slideInUp {
    0% { transform: translateY(100%); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}
.anim11 { animation: slideInUp 1s forwards; }
@keyframes multiScale {
    0% { transform: scale(0.3); opacity: 0; }
    40% { transform: scale(1.2); opacity: 1; }
    70% { transform: scale(0.9); }
    100% { transform: scale(1); opacity: 1; }
}
.anim12 { animation: multiScale 1s forwards; }
@keyframes rotateFade {
    0% { transform: rotate(-30deg) scale(0.5); opacity: 0; }
    100% { transform: rotate(0) scale(1); opacity: 1; }
}
.anim13 { animation: rotateFade 1s forwards; }
@keyframes blindsVertical {
    0% { clip-path: inset(50% 0 50% 0); opacity: 0; }
    100% { clip-path: inset(0 0 0 0); opacity: 1; }
}
.anim14 { animation: blindsVertical 1s forwards; }
@keyframes flyInTopLeft {
    0% { transform: translate(-100%, -100%) scale(0.5); opacity: 0; }
    100% { transform: translate(0, 0) scale(1); opacity: 1; }
}
.anim15 { animation: flyInTopLeft 1s forwards; }
@keyframes flyInBottomRight {
    0% { transform: translate(100%, 100%) scale(0.5); opacity: 0; }
    100% { transform: translate(0, 0) scale(1); opacity: 1; }
}
.anim16 { animation: flyInBottomRight 1s forwards; }
@keyframes flickerIn {
    0% { opacity: 0; }
    20% { opacity: 0.5; }
    40% { opacity: 0; }
    60% { opacity: 0.7; }
    80% { opacity: 0; }
    100% { opacity: 1; }
}
.anim17 { animation: flickerIn 1s forwards; }
@keyframes blindsHorizontal {
    0% { clip-path: inset(0 0 100% 0); opacity: 0; }
    100% { clip-path: inset(0 0 0 0); opacity: 1; }
}
.anim18 { animation: blindsHorizontal 1s forwards; }
@keyframes pixelizeIn {
    0% { transform: scale(0.1); filter: blur(20px); opacity: 0; }
    100% { transform: scale(1); filter: blur(0); opacity: 1; }
}
.anim19 { animation: pixelizeIn 1s forwards; }
@keyframes shakeIn {
    0% { transform: translateX(0) scale(0.8); opacity: 0; }
    20% { transform: translateX(-20px) scale(0.9); }
    40% { transform: translateX(20px) scale(1); }
    60% { transform: translateX(-10px) scale(1.05); }
    80% { transform: translateX(10px) scale(1); }
    100% { transform: translateX(0) scale(1); opacity: 1; }
}
.anim20 { animation: shakeIn 1s forwards; }
@keyframes waveDistort {
    0% { transform: scale(0.9) skew(0, 20deg); opacity: 0; }
    50% { transform: scale(1.05) skew(0, -10deg); opacity: 1; }
    100% { transform: scale(1) skew(0, 0); opacity: 1; }
}
.anim21 { animation: waveDistort 1s forwards; }
@keyframes rotate3dScale {
    0% { transform: perspective(800px) rotateX(60deg) scale(0.4); opacity: 0; }
    100% { transform: perspective(800px) rotateX(0) scale(1); opacity: 1; }
}
.anim22 { animation: rotate3dScale 1s forwards; }
</style>

<div id="mydiv">
    <audio id="aud" src="https://music.163.com/song/media/outer/url?id=5208654" autoplay loop></audio>
    <video id="vid" src="https://img.tukuppt.com/video_show/2414777/00/02/18/5b52d56cc6aff.mp4" autoplay loop muted></video>

    <!-- 14 张图片 -->
    <img class="anim-img" src="https://s21.ax1x.com/2025/10/09/pVHVcLQ.jpg" data-anim="anim1">
    <img class="anim-img" src="https://s21.ax1x.com/2025/10/09/pVHV6sg.jpg" data-anim="anim2">
    <img class="anim-img" src="https://s21.ax1x.com/2025/10/09/pVHV2Zj.jpg" data-anim="anim3">
    <img class="anim-img" src="https://s21.ax1x.com/2025/10/09/pVHVrz8.jpg" data-anim="anim4">
    <img class="anim-img" src="https://s21.ax1x.com/2025/10/09/pVHVyQS.jpg" data-anim="anim5">
    <img class="anim-img" src="https://s21.ax1x.com/2025/10/09/pVHVRds.jpg" data-anim="anim6">
    <img class="anim-img" src="https://s21.ax1x.com/2025/10/09/pVHVWon.jpg" data-anim="anim7">
    <img class="anim-img" src="https://s21.ax1x.com/2025/10/09/pVHVcLQ.jpg" data-anim="anim8">
    <img class="anim-img" src="https://s21.ax1x.com/2025/10/09/pVHV6sg.jpg" data-anim="anim9">
    <img class="anim-img" src="https://s21.ax1x.com/2025/10/09/pVHV2Zj.jpg" data-anim="anim10">
    <img class="anim-img" src="https://s21.ax1x.com/2025/10/09/pVHVrz8.jpg" data-anim="anim11">
    <img class="anim-img" src="https://s21.ax1x.com/2025/10/09/pVHVyQS.jpg" data-anim="anim12">
    <img class="anim-img" src="https://s21.ax1x.com/2025/10/09/pVHVRds.jpg" data-anim="anim13">
    <img class="anim-img" src="https://s21.ax1x.com/2025/10/09/pVHVWon.jpg" data-anim="anim14">
</div>

<script>
const images = document.querySelectorAll('.anim-img');
const animations = [
    'anim1','anim2','anim3','anim4','anim5','anim6','anim7',
    'anim8','anim9','anim10','anim11','anim12','anim13','anim14',
    'anim15','anim16','anim17','anim18','anim19','anim20','anim21','anim22'
];
let currentIndex = 0;

function showNextImage() {
    images.forEach(img => {
      img.style.opacity = '0';
      img.className = 'anim-img';
    });

    const currentImg = images;
    const randomAnim = animations;
    currentImg.classList.add(randomAnim);

    currentIndex = (currentIndex + 1) % images.length;
}

showNextImage();
setInterval(showNextImage, 4000);
</script>

abc8831nc 发表于 2025-10-16 20:04:49

感谢分享，增长不少见识
页: [1]
查看完整版本: 【漫步特效】夜莺啄碎/歌特风