云端漫步特效音画《竹林云深不知处》
<title>云端漫步特效音画</title><style>
#mydiv {
margin: 0 auto;
display: grid;
place-items: center;
width: 1700px;
height: 850px;
left: -420px;
background-color: lightblue;
box-shadow: 3px 3px 20px #000;
user-select: none;
overflow: hidden;
position: relative;
z-index: 1;
}
#bg-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('https://644220.freep.cn/644220/w/lq10.jpg') no-repeat center/cover;
opacity: 1;
z-index: 2;
}
#vid {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
mix-blend-mode: screen;
z-index: 6;
opacity: .15;
will-change: opacity;
}
#top-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 7;
pointer-events: none;
opacity: 1;
}
.image-slider {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 5;
will-change: opacity;
}
.slider-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: all 1.5s cubic-bezier(0.4, 0, 0.2, 1);
transform-origin: center center;
z-index: 1;
mix-blend-mode: normal;
}
.slider-img.active {
opacity: 1;
z-index: 2;
}
.slider-img.fade-out {
opacity: 0;
transition: opacity 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes fade {
0% { opacity: 0; transform: scale(1.05); }
100% { opacity: 1; transform: scale(1); }
}
.fade { animation: fade 3s cubic-bezier(0.25, 1, 0.5, 1) forwards; }
@keyframes slideLeft {
0% { transform: translateX(-100%) scale(0.95); opacity: 0; }
50% { transform: translateX(5%); }
100% { transform: translateX(0) scale(1); opacity: 1; }
}
.slide-left { animation: slideLeft 3.5s ease-in-out forwards; }
@keyframes slideRight {
0% { transform: translateX(100%) scale(0.95); opacity: 0; }
50% { transform: translateX(-5%); }
100% { transform: translateX(0) scale(1); opacity: 1; }
}
.slide-right { animation: slideRight 3.5s ease-in-out forwards; }
@keyframes slideUp {
0% { transform: translateY(-100%) scale(0.95); opacity: 0; }
80% { transform: translateY(2%); }
100% { transform: translateY(0) scale(1); opacity: 1; }
}
.slide-up { animation: slideUp 3.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
@keyframes slideDown {
0% { transform: translateY(100%) scale(0.95); opacity: 0; }
80% { transform: translateY(-2%); }
100% { transform: translateY(0) scale(1); opacity: 1; }
}
.slide-down { animation: slideDown 3.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
@keyframes rotateIn {
0% { transform: rotate(0deg) scale(0); opacity: 0; }
70% { transform: rotate(320deg) scale(1.05); }
100% { transform: rotate(360deg) scale(1); opacity: 1; }
}
.rotate-in { animation: rotateIn 4s ease-out forwards; }
@keyframes scaleIn {
0% { transform: scale(0.7); opacity: 0; }
80% { transform: scale(1.02); }
100% { transform: scale(1); opacity: 1; }
}
.scale-in { animation: scaleIn 3s ease-out forwards; }
@keyframes blinds {
0% { clip-path: inset(0 100% 0 0); opacity: 0; }
20% { clip-path: inset(0 80% 0 0); opacity: 0.2; }
40% { clip-path: inset(0 60% 0 0); opacity: 0.4; }
60% { clip-path: inset(0 40% 0 0); opacity: 0.6; }
80% { clip-path: inset(0 20% 0 0); opacity: 0.8; }
100% { clip-path: inset(0 0 0 0); opacity: 1; }
}
.blinds { animation: blinds 3.5s ease-in-out forwards; }
@keyframes dissolve {
0% { opacity: 0; filter: blur(15px); }
50% { filter: blur(8px); }
100% { opacity: 1; filter: blur(0); }
}
.dissolve { animation: dissolve 4s ease-in forwards; }
@keyframes cubeFlip {
0% { transform: rotateY(90deg) translateZ(-50px); opacity: 0; }
70% { transform: rotateY(20deg) translateZ(10px); }
100% { transform: rotateY(0) translateZ(0); opacity: 1; }
}
.cube-flip { animation: cubeFlip 3.5s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
@keyframes push {
0% { transform: translateX(-50%) scale(0.9); opacity: 0; }
50% { transform: translateX(8%); }
100% { transform: translateX(0) scale(1); opacity: 1; }
}
.push { animation: push 3s ease-in-out forwards; }
@keyframes wipe {
0% { background-position: 100% 0; opacity: 0; filter: brightness(0.8); }
100% { background-position: 0 0; opacity: 1; filter: brightness(1); }
}
.wipe {
animation: wipe 3.5s ease-out forwards;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
@keyframes rotateScale {
0% { transform: rotate(-180deg) scale(0.5); opacity: 0; }
80% { transform: rotate(-20deg) scale(1.05); }
100% { transform: rotate(0) scale(1); opacity: 1; }
}
.rotate-scale { animation: rotateScale 4s ease-out forwards; }
@keyframes split {
0% { transform: translateX(-50%) translateY(-50%) scale(0.8); opacity: 0; }
60% { transform: translateX(5%) translateY(5%) scale(1.02); }
100% { transform: translateX(0) translateY(0) scale(1); opacity: 1; }
}
.split { animation: split 3.5s ease-in-out forwards; }
@keyframes fadeScale {
0% { transform: scale(1.2); opacity: 0; filter: contrast(0.9); }
100% { transform: scale(1); opacity: 1; filter: contrast(1); }
}
.fade-scale { animation: fadeScale 3s cubic-bezier(0.25, 1, 0.5, 1) forwards; }
</style>
</head>
<body>
<div id="mydiv">
<div id="bg-image"></div>
<audio id="aud" src="https://mp3.joy127.com/music/12753.mp3" autoplay loop></audio>
<video id="vid" src="https://644220.freep.cn/644220/qq/123.mp4" autoplay loop muted playsinline></video>
<img id="top-image" src="https://644220.freep.cn/644220/w/2q1.png" alt="top-image">
<div class="image-slider">
<img src="https://644220.freep.cn/644220/w/lq1.jpg" class="slider-img" alt="image1">
<img src="https://644220.freep.cn/644220/w/lq2.jpg" class="slider-img" alt="image2">
<img src="https://644220.freep.cn/644220/w/lq3.jpg" class="slider-img" alt="image3">
<img src="https://644220.freep.cn/644220/w/lq5.jpg" class="slider-img" alt="image4">
<img src="https://644220.freep.cn/644220/w/lq6.jpg" class="slider-img" alt="image5">
<img src="https://644220.freep.cn/644220/w/lq7.jpg" class="slider-img" alt="image6">
<img src="https://644220.freep.cn/644220/w/lq8.jpg" class="slider-img" alt="image7">
<img src="https://644220.freep.cn/644220/w/lq9.jpg" class="slider-img" alt="image8">
<img src="https://644220.freep.cn/644220/w/lq10.jpg" class="slider-img" alt="image9">
<img src="https://644220.freep.cn/644220/w/lq11.jpg" class="slider-img" alt="image10">
</div>
</div>
<script>
const transitionEffects = [
'fade', 'slide-left', 'slide-right', 'slide-up', 'slide-down',
'rotate-in', 'scale-in', 'blinds', 'dissolve', 'cube-flip',
'push', 'wipe', 'rotate-scale', 'split', 'fade-scale'
];
const sliderImages = document.querySelectorAll('.slider-img');
let currentIndex = 0;
let lastEffectIndex = -1;
let isTransitioning = false;
function preloadImages() {
sliderImages.forEach(img => {
const tempImg = new Image();
tempImg.src = img.src;
});
}
function initSlider() {
preloadImages();
sliderImages.classList.add('active');
sliderImages.classList.add('fade');
}
function getRandomEffect() {
let randomIndex;
do {
randomIndex = Math.floor(Math.random() * transitionEffects.length);
} while (randomIndex === lastEffectIndex && transitionEffects.length > 1);
lastEffectIndex = randomIndex;
return transitionEffects;
}
function changeImage() {
if (isTransitioning) return;
isTransitioning = true;
const currentImg = sliderImages;
currentImg.classList.add('fade-out');
currentImg.classList.remove('active');
setTimeout(() => {
currentImg.className = 'slider-img';
}, 1500);
currentIndex = (currentIndex + 1) % sliderImages.length;
const nextImg = sliderImages;
const randomEffect = getRandomEffect();
if (randomEffect === 'wipe') {
nextImg.style.backgroundImage = `url(${nextImg.src})`;
nextImg.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
} else {
nextImg.style.backgroundImage = '';
const imgNum = nextImg.alt.replace('image', '');
nextImg.src = `https://644220.freep.cn/644220/w/lq${imgNum}.jpg`;
}
setTimeout(() => {
nextImg.classList.add('active');
nextImg.classList.add(randomEffect);
setTimeout(() => {
isTransitioning = false;
}, 3500);
}, 300);
}
initSlider();
setInterval(changeImage, 7000);
</script>
轮播新颖，音乐好听，谢谢分享 klxf 发表于 2026-3-15 20:28
轮播新颖，音乐好听，谢谢分享
谢谢友友光临！ 感谢分享，带来全新理念 非常不错，感谢分享！ 感谢分享，带来满满元气 分享超实用，点赞必须的 支持佳作，期待更多佳作 学习了，这就去试试 感谢分享，带来知识大餐
页:
[1]
2