【漫步特效】 一生一瞬《七夜雪》（七夕节快乐）
<br /><style>#mydiv {
margin: 150px 0 30px calc(50% - 990px);
width: 1700px;
height: 850px;
top: 130px;
overflow: hidden;
position: relative;
background: #000;
transform-style: preserve-3d;
perspective: 1000px;
touch-action: manipulation; /* 优化触摸体验 */
}
#vid, #vid1 {
position: absolute;
width: 100%;
height: 110%;
right: 0%;
top: -80px;
object-fit: cover;
pointer-events: none;
mix-blend-mode: screen;
z-index: 2;
}
#vid { opacity: .30; }
#vid1 {
opacity: .70;
-webkit-mask: radial-gradient(circle, silver, lightgreen, cyan, transparent,transparent);
}
/* 滑动轮播样式 */
.slide-carousel {
position: absolute;
width: 400%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
transition: transform 1s ease-out; /* 更流畅的过渡 */
}
.slide-slide {
float: left;
width: 25%;
height: 100%;
}
.slide-slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* 翻转效果样式 */
.flip-container {
position: absolute;
width: 1700px;
height: 850px;
perspective: 1000px;
z-index: 3;
padding: 0;
margin: 0;
opacity: 0;
transition: opacity 1.5s ease-out, transform 1s ease-out;
cursor: pointer;
transform-origin: center;
}
#flip1.active, #flip2.active, #flip3.active, #flip4.active {
opacity: 6;
transform: scale(1);
}
#flip1:not(.active), #flip2:not(.active), #flip3:not(.active), #flip4:not(.active) {
transform: scale(0.95);
pointer-events: none;
}
.flipper {
position: relative;
width: 100%;
height: 100%;
transition: transform 1.5s cubic-bezier(0.34, 1.56, 0.64, 1); /* 更自然的翻转曲线 */
transform-style: preserve-3d;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.flip-container.flipped .flipper {
transform: rotateY(180deg);
}
.front, .back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
overflow: hidden;
border: 0 !important;
margin: 0 !important;
padding: 0 !important;
outline: none !important;
line-height: 0;
transition: transform 0.5s ease; /* 图片缩放过渡 */
}
.front img, .back img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border: none !important;
transform: scale(1.005);
}
/* 双击放大效果 */
.front.zoomed img, .back.zoomed img {
transform: scale(1.15);
transition: transform 0.8s ease;
}
.back {
transform: rotateY(180deg);
backface-visibility: hidden;
}
/* 交互提示元素 */
.click提示 {
position: absolute;
top: 20px;
left: 50%;
transform: translateX(-50%);
color: white;
font-size: 18px;
font-weight: bold;
text-shadow: 0 0 10px rgba(0, 255, 255, 0.8);
z-index: 10;
pointer-events: none;
animation: fadeInOut 3s infinite;
/* 移除了隐藏过渡，确保文字始终可见 */
}
.click-indicator {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 60px;
height: 60px;
border: 2px solid rgba(255, 255, 255, 0.7);
border-radius: 50%;
z-index: 9;
pointer-events: none;
animation: pulse 2s infinite;
transition: opacity 1s ease;
}
.click-indicator::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 15px;
height: 15px;
background-color: rgba(0, 255, 255, 0.8);
border-radius: 50%;
}
/* 进度指示器 */
.progress-indicators {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 10px;
z-index: 10;
}
.progress-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.3);
transition: all 0.5s ease;
cursor: pointer; /* 提示可点击 */
}
.progress-dot.active {
background-color: rgba(0, 255, 255, 0.8);
transform: scale(1.3);
}
/* 滑动提示箭头 */
.nav-arrows {
position: absolute;
top: 50%;
width: 100%;
display: flex;
justify-content: space-between;
transform: translateY(-50%);
z-index: 8;
pointer-events: none;
}
.nav-arrow {
width: 60px;
height: 60px;
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.3);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 24px;
margin: 0 20px;
cursor: pointer;
pointer-events: auto;
transition: all 0.3s ease;
opacity: 0.7;
}
.nav-arrow:hover {
background-color: rgba(0, 255, 255, 0.2);
transform: scale(1.1);
opacity: 1;
}
/* 动画定义 */
@keyframes pulse {
0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
70% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}
@keyframes fadeInOut {
0%, 100% { opacity: 0.7; }
50% { opacity: 1; }
}
@keyframes clickFeedback {
0% { transform: scale(1); }
50% { transform: scale(0.95); }
100% { transform: scale(1); }
}
.click-feedback {
animation: clickFeedback 0.3s ease;
}
/* 操作成功提示 */
.action-toast {
position: absolute;
bottom: 80px;
left: 50%;
transform: translateX(-50%);
background-color: rgba(0, 255, 255, 0.2);
color: white;
padding: 8px 16px;
border-radius: 20px;
font-size: 14px;
z-index: 11;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease, transform 0.3s ease;
transform: translate(-50%, 20px);
}
.action-toast.show {
opacity: 1;
transform: translate(-50%, 0);
}
/* 隐藏音频元素 */
.sound-effects {
display: none;
}
</style>
<div id="mydiv">
<!-- 手动点击提示文字 - 始终显示 -->
<div class="click提示">手动点击图片翻页 | 按 ← → 键切换 |不点自动播放</div>
<!-- 点击指示动画 -->
<div class="click-indicator"></div>
<!-- 进度指示器 -->
<div class="progress-indicators">
<div class="progress-dot active" data-index="0"></div>
<div class="progress-dot" data-index="1"></div>
<div class="progress-dot" data-index="2"></div>
<div class="progress-dot" data-index="3"></div>
</div>
<!-- 导航箭头 -->
<div class="nav-arrows">
<div class="nav-arrow prev">←</div>
<div class="nav-arrow next">→</div>
</div>
<!-- 操作提示 -->
<div class="action-toast">已切换</div>
<video id="vid" src="" autoplay="" loop="" muted=""></video>
<video id="vid1" src="https://img.tukuppt.com/video_show/2402760/00/01/83/5b4ab6a4d08c4.mp4" autoplay="" loop="" muted=""></video>
<div class="slide-carousel">
<div class="slide-slide">
<img src="http://kkshan.com/data/attachment/forum/202508/26/200959u2ukqpdtss3po23q.jpg" alt="风景图片1">
</div>
<div class="slide-slide">
<img src="http://kkshan.com/data/attachment/forum/202508/26/201000qsl6zas8mcpp5gam.jpg" alt="风景图片2">
</div>
<div class="slide-slide">
<img src="http://kkshan.com/data/attachment/forum/202508/26/201001pz4780l348wq737z.jpg" alt="风景图片3">
</div>
<div class="slide-slide">
<img src="http://kkshan.com/data/attachment/forum/202508/26/201001r7zhegtz81t87ge1.jpg" alt="风景图片4">
</div>
</div>
<!-- 翻转图片容器1 -->
<div id="flip1" class="flip-container active">
<div class="flipper">
<div class="front">
<img src="https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/6/2/1kkm.jpg" alt="翻转图片1正面">
</div>
<div class="back">
<img src="https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/6/2/2kkm.jpg" alt="翻转图片1背面">
</div>
</div>
</div>
<!-- 翻转图片容器2 -->
<div id="flip2" class="flip-container">
<div class="flipper">
<div class="front">
<img src="https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/6/2/3kkm.jpg" alt="翻转图片2正面">
</div>
<div class="back">
<img src="https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/6/2/4kkm.jpg" alt="翻转图片2背面">
</div>
</div>
</div>
<!-- 翻转图片容器3 -->
<div id="flip3" class="flip-container">
<div class="flipper">
<div class="front">
<img src="https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/6/2/1kkm.jpg" alt="翻转图片3正面">
</div>
<div class="back">
<img src="https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/6/2/3kkm.jpg" alt="翻转图片3背面">
</div>
</div>
</div>
<!-- 翻转图片容器4 -->
<div id="flip4" class="flip-container">
<div class="flipper">
<div class="front">
<img src="https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/6/2/4kkm.jpg" alt="翻转图片4正面">
</div>
<div class="back">
<img src="https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/6/2/2kkm.jpg" alt="翻转图片4背面">
</div>
</div>
</div>
</div>
<!-- 音效和背景音乐 -->
<audio class="sound-effects" id="click-sound" src="https://assets.mixkit.co/sfx/preview/mixkit-select-click-1109.mp3" preload="auto"></audio>
<audio id="aud" src="https://mp3.joy127.com/music/12476.mp3" autoplay="" loop=""></think>
<br><br><br><br><br><br><br>
<script type="text/javascript">
try {
window.onload = function() {
// 获取元素
const allImages = document.querySelectorAll('img');
const carousel = document.querySelector('.slide-carousel');
const flipContainers = document.querySelectorAll('.flip-container');
const progressDots = document.querySelectorAll('.progress-dot');
const navArrows = {
prev: document.querySelector('.nav-arrow.prev'),
next: document.querySelector('.nav-arrow.next')
};
const actionToast = document.querySelector('.action-toast');
const clickSound = document.getElementById('click-sound');
const interactiveTips = {
text: document.querySelector('.click提示'),
indicator: document.querySelector('.click-indicator')
};
// 状态变量
let currentIndex = 0;
let currentFlipIndex = 0;
const slideCount = 4;
const slideDuration = 20000;
const flipPhaseDuration = 15000;
let isUserInteracted = false; // 跟踪用户是否已交互
let touchStartX = 0; // 触摸滑动起点
// 预加载图片
allImages.forEach(img => {
const preloadImg = new Image();
preloadImg.src = img.src;
preloadImg.onerror = function() {
console.error(`图片加载失败: ${img.src}`);
img.src = "https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/6/2/1kkm.jpg";
};
});
// 显示操作提示
function showActionToast(message = '已切换') {
actionToast.textContent = message;
actionToast.classList.add('show');
setTimeout(() => {
actionToast.classList.remove('show');
}, 1000);
}
// 播放点击音效
function playClickSound() {
clickSound.currentTime = 0;
clickSound.play().catch(e => console.log('音效播放:', e));
}
// 修改：仅隐藏点击指示器，保留文字提示
function hideInteractiveTips() {
if (!isUserInteracted) {
isUserInteracted = true;
// 只隐藏圆形点击指示器，保留文字提示
interactiveTips.indicator.style.opacity = 0;
setTimeout(() => {
interactiveTips.indicator.style.display = 'none';
}, 1000);
}
}
// 轮播功能
function nextSlide() {
currentIndex = (currentIndex + 1) % slideCount;
updateCarouselPosition();
setTimeout(nextSlide, slideDuration);
}
function updateCarouselPosition() {
const offset = -currentIndex * 25;
carousel.style.transform = `translateX(${offset}%)`;
updateProgressIndicators(currentIndex);
}
// 翻转效果功能
function processFlip(flipIndex) {
const activeContainer = document.querySelector('.flip-container.active');
if (activeContainer) {
activeContainer.classList.remove('active');
}
setTimeout(() => {
flipContainers.forEach((container, index) => {
if (index === flipIndex) {
container.classList.add('active');
container.classList.remove('flipped');
}
});
currentIndex = flipIndex;
updateCarouselPosition();
const currentContainer = flipContainers;
setTimeout(() => {
currentContainer.classList.add('flipped');
setTimeout(() => {
currentFlipIndex = (currentFlipIndex + 1) % flipContainers.length;
processFlip(currentFlipIndex);
}, flipPhaseDuration);
}, flipPhaseDuration);
}, 500);
}
// 更新进度指示器
function updateProgressIndicators(activeIndex) {
progressDots.forEach((dot, index) => {
if (index === activeIndex) {
dot.classList.add('active');
} else {
dot.classList.remove('active');
}
});
}
// 切换到指定索引
function goToIndex(index) {
currentFlipIndex = index;
processFlip(currentFlipIndex);
showActionToast(`已切换到第 ${index + 1} 页`);
playClickSound();
hideInteractiveTips();
}
// 下一张/上一张
function nextIndex() {
const next = (currentFlipIndex + 1) % slideCount;
goToIndex(next);
}
function prevIndex() {
const prev = (currentFlipIndex - 1 + slideCount) % slideCount;
goToIndex(prev);
}
// 点击手动翻转
flipContainers.forEach(container => {
container.addEventListener('click', () => {
if (container.classList.contains('active')) {
container.classList.add('click-feedback');
setTimeout(() => container.classList.remove('click-feedback'), 300);
container.classList.toggle('flipped');
playClickSound();
hideInteractiveTips();
}
});
// 双击放大效果
container.addEventListener('dblclick', () => {
if (container.classList.contains('active')) {
const front = container.querySelector('.front');
const back = container.querySelector('.back');
// 切换放大状态
front.classList.toggle('zoomed');
back.classList.toggle('zoomed');
showActionToast(front.classList.contains('zoomed') ? '已放大' : '已缩小');
playClickSound();
hideInteractiveTips();
}
});
// 触摸滑动支持
container.addEventListener('touchstart', (e) => {
touchStartX = e.touches.clientX;
hideInteractiveTips();
}, { passive: true });
container.addEventListener('touchend', (e) => {
if (!touchStartX) return;
const touchEndX = e.changedTouches.clientX;
const diffX = touchEndX - touchStartX;
// 滑动距离超过50px才认为是有效滑动
if (diffX > 50) {
prevIndex(); // 向右滑，上一张
} else if (diffX < -50) {
nextIndex(); // 向左滑，下一张
}
touchStartX = 0;
}, { passive: true });
});
// 进度点点击
progressDots.forEach(dot => {
dot.addEventListener('click', (e) => {
e.stopPropagation();
const index = parseInt(dot.dataset.index);
goToIndex(index);
});
});
// 导航箭头点击
navArrows.prev.addEventListener('click', prevIndex);
navArrows.next.addEventListener('click', nextIndex);
// 键盘导航
document.addEventListener('keydown', (e) => {
if (e.key === 'ArrowRight') {
nextIndex();
e.preventDefault();
} else if (e.key === 'ArrowLeft') {
prevIndex();
e.preventDefault();
}
});
// 初始化
setTimeout(nextSlide, slideDuration);
processFlip(currentFlipIndex);
};
} catch(e) {
console.error("脚本执行:", e);
}
</script>
<br><br><br><br><br><br><br><br><br><br><br><br> 色彩绚丽，特效制作精彩。欣赏点赞佳作。 感谢漫步兄分享，七夕快乐！:handshake 刘亦菲，我喜欢的，{:S15:} 谢谢漫步老师的制作分享，辛苦了啊。~~
七夕快乐~~ 圊圊淥詶 发表于 2025-8-30 09:58
刘亦菲，我喜欢的，
我也蛮喜欢的，她漂亮自然率真，不像那些一味追求以瘦为美的女明星，弄来似纸片人似的~~
薇近距离见过她本人，那次单位3.8组织去横店玩，刚好碰到她在拍戏，真人比银幕上还要美~~~ 好靓丽的色彩搭配，让人眼前一亮，点击浏览，每一幅都是那么的吸引人注目~~~ 漫步老师制作辛苦了，谢谢带来的精彩特效作品~~~{:S01:} 祝漫步老师和画廊的友友们，七夕快乐~~~{:S06:} 绿蔷薇 发表于 2025-8-30 14:03
我也蛮喜欢的，她漂亮自然率真，不像那些一味追求以瘦为美的女明星，弄来似纸片人似的~~
薇近距离见过她 ...
对，就是那种胖而不腻的体型，非常好看，体态丰腴，很有魅力，喜欢:lol
页:
[1]