【漫步特效】江南最美是杭州（贺：雨声芳辰）（西湖十景CSS十张）
本帖最后由 云端漫步 于 2026-6-23 13:46 编辑 <br /><br /><title>云端漫步特效音画</title><style>
#mydiv {
margin: 130px 0 30px calc(50% - 900px);
display: grid;
place-items: center;
width: 1700px;
height: 850px;
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/3/1Q0.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: .26;
will-change: opacity;
}
.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/12897.mp3" autoplay loop></audio>
<video id="vid" src="https://img2.tukuppt.com/video_show/15653652/01/23/15/621592d8a033c.mp4" autoplay loop muted playsinline></video>
<div class="image-slider">
<img src="https://644220.freep.cn/644220/3/1Q0.jpg" class="slider-img" alt="image1">
<img src="https://644220.freep.cn/644220/3/1Q1.jpg" class="slider-img" alt="image2">
<img src="https://644220.freep.cn/644220/3/1Q2.jpg" class="slider-img" alt="image3">
<img src="https://644220.freep.cn/644220/3/1Q3.jpg" class="slider-img" alt="image4">
<img src="https://644220.freep.cn/644220/3/1Q4.jpg" class="slider-img" alt="image5">
<img src="https://644220.freep.cn/644220/3/1Q5.jpg" class="slider-img" alt="image6">
<img src="https://644220.freep.cn/644220/3/1Q6.jpg" class="slider-img" alt="image7">
<img src="https://644220.freep.cn/644220/3/1Q7.jpg" class="slider-img" alt="image8">
<img src="https://644220.freep.cn/644220/3/1Q8.jpg" class="slider-img" alt="image9">
<img src="https://644220.freep.cn/644220/3/1Q9.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 {
}
setTimeout(() => {
nextImg.classList.add('active');
nextImg.classList.add(randomEffect);
setTimeout(() => {
isTransitioning = false;
}, 3500);
}, 300);
}
initSlider();
setInterval(changeImage, 7000);
// 点击播放音乐，解决浏览器限制
document.addEventListener('click', function() {
const audio = document.getElementById('aud');
audio.play();
}, { once: true });
</script> 本帖最后由 云端漫步 于 2026-6-18 14:04 编辑
@雨声 说好的到时送你生日帖,
这作品十张图也就西湖十景:苏堤春晓，断桥残雪，曲院风荷，花港观鱼，柳浪闻莺，
雷峰夕照，三潭印月，平湖秋月，双峰插云，南屏晚钟。
另告诉秦心来这里玩，说我很想念她，到时也在这送她生日帖叫她来收。 本帖最后由 云端漫步 于 2026-6-18 14:15 编辑
观看时耐心等下因十張图需缓冲。缓冲后画面才清晰。
@醉美水芙蓉 @姚云裳 @汐云渡 @浅唱 本帖最后由 云端漫步 于 2026-6-18 14:12 编辑
https://pic1.imgdb.cn/item/6a32817ea6693733f7df3634.jpg
https://pic1.imgdb.cn/item/6a32817da6693733f7df3632.jpg
https://pic1.imgdb.cn/item/6a32817da6693733f7df3633.jpg
https://pic1.imgdb.cn/item/6a328156a6693733f7df3621.jpg
https://pic1.imgdb.cn/item/6a328156a6693733f7df3622.jpg
https://pic1.imgdb.cn/item/6a328156a6693733f7df3623.jpg
https://pic1.imgdb.cn/item/6a328156a6693733f7df3624.jpg
https://pic1.imgdb.cn/item/6a328155a6693733f7df361f.jpg
https://pic1.imgdb.cn/item/6a328155a6693733f7df3620.jpg
沙发给雨声姐留着！ 欣赏漫步老师精彩特效音画！ ㊗️雨声姐收礼开心！ 每张素材都超级漂亮！ 收起来玩个特效音画！ 图意真好
人物素材很美
欣赏并收藏
场景切换自如
雨声收礼开心