【影.印记】意境人像摄影《爱逾千年》
爱逾千年<br>
摄影素材/网络 动图制作/傲雷影儿
<style type="text/css">.pcb{margin-right:0}</style><div class="pcb">
<div class="t_fsz"><table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_1053081">
<style>
#mydiv {
margin: 50px 0 30px calc(50% - 840px);
display: grid;
place-items: center;
width: 1600px;
height: 850px;
background: lightblue url('https://www.junzhuan.com//data/attachment/album/202512/30/123227z2jmlu59wfqp5v5b.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: .45;
}
.anim-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
z-index: 3;
transition: filter 0.4s ease;
}
@keyframes fadeAnim {
0% { opacity: 0; }
20% { opacity: 1; }
80% { opacity: 1; }
100% { opacity: 0; }
}
@keyframes shakeAnim {
0% { transform: translateX(-100%) rotate(-15deg); opacity: 0; }
20% { transform: translateX(20px) rotate(10deg); opacity: 1; }
40% { transform: translateX(-10px) rotate(-5deg); }
60% { transform: translateX(5px) rotate(2deg); }
80% { transform: translateX(0) rotate(0); opacity: 1; }
100% { opacity: 0; }
}
@keyframes rotateAnim {
0% { transform: rotate(0deg) scale(0.5); opacity: 0; }
30% { transform: rotate(180deg) scale(1); opacity: 1; }
80% { transform: rotate(360deg) scale(1); opacity: 1; }
100% { opacity: 0; }
}
@keyframes flipAnim {
0% { transform: perspective(1000px) rotateY(90deg); opacity: 0; }
30% { transform: perspective(1000px) rotateY(0); opacity: 1; }
80% { transform: perspective(1000px) rotateY(0); opacity: 1; }
100% { opacity: 0; }
}
@keyframes naturalBrightContrast {
0% {
opacity: 0;
filter: brightness(0.6) contrast(0.9);
}
15% {
opacity: 0.5;
filter: brightness(0.75) contrast(0.95);
}
30% {
opacity: 1;
filter: brightness(0.9) contrast(1.05);
}
50% {
filter: brightness(var(--bright-peak, 1.1)) contrast(var(--contrast-peak, 1.15));
}
70% {
filter: brightness(1.05) contrast(1.1);
}
85% {
opacity: 0.5;
filter: brightness(0.8) contrast(1);
}
100% {
opacity: 0;
filter: brightness(0.6) contrast(0.9);
}
}
.fade { animation: fadeAnim 6s forwards ease-in-out; }
.shake { animation: shakeAnim 6s forwards ease-in-out; }
.rotate { animation: rotateAnim 6s forwards ease-in-out; }
.flip { animation: flipAnim 6s forwards ease-in-out; }
.natural-bright-contrast {
animation: naturalBrightContrast 8s forwards;
animation-timing-function: ease-in-out;
}
</style>
<div id="mydiv">
<audio id="aud" src="http://music.163.com/song/media/outer/url?id=1910030960.mp3" autoplay loop></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/15653652/01/04/17/6141baa659673.mp4" autoplay="" loop="" muted=""></video>
<img class="anim-img" src="https://www.junzhuan.com/data/attachment/album/202512/30/123228g4wmmmm533m4o3zf.jpg" alt="图1">
<img class="anim-img" src="https://www.junzhuan.com/data/attachment/album/202512/30/123227xwwyisw4wgiigwrz.jpg" alt="图2">
<img class="anim-img" src="https://www.junzhuan.com/data/attachment/album/202512/30/123227hxz8qagovwu4w8q5.jpg" alt="图3">
<img class="anim-img" src="https://www.junzhuan.com/data/attachment/album/202512/30/123227dqwj9k95r6klujyd.jpg" alt="图4">
<img class="anim-img" src="https://www.junzhuan.com/data/attachment/album/202512/30/123227du8pred14prpj1bm.jpg" alt="图5">
</div>
<script>
function getRandomValue(base, range) {
return (base - range + Math.random() * 2 * range).toFixed(2);
}
const imgs = document.querySelectorAll('.anim-img');
const animTypes = ['fade', 'natural-bright-contrast', 'rotate', 'natural-bright-contrast', 'flip'];
let currentIndex = 0;
function startAnimation() {
imgs.forEach(img => {
img.className = 'anim-img';
img.style.filter = '';
});
const currentImg = imgs;
currentImg.classList.add(animTypes);
if (animTypes === 'natural-bright-contrast') {
currentImg.style.setProperty('--bright-peak', getRandomValue(1.1, 0.05));
currentImg.style.setProperty('--contrast-peak', getRandomValue(1.15, 0.05));
}
currentIndex = (currentIndex + 1) % imgs.length;
}
startAnimation();
setInterval(startAnimation, 8000);
</script></td></tr></table><BR><BR><BR><BR>
https://www.junzhuan.com/data/attachment/album/202512/30/123227dqwj9k95r6klujyd.jpg
https://www.junzhuan.com/data/attachment/album/202512/30/123227du8pred14prpj1bm.jpg
https://www.junzhuan.com/data/attachment/album/202512/30/123227mne8fllj6dlsknj8.jpg
https://www.junzhuan.com/data/attachment/album/202512/30/123227hxz8qagovwu4w8q5.jpg
https://www.junzhuan.com/data/attachment/album/202512/30/123227m5pibheeghibznk6.jpg
https://www.junzhuan.com/data/attachment/album/202512/30/123227xwwyisw4wgiigwrz.jpg
https://www.junzhuan.com/data/attachment/album/202512/30/123227z2jmlu59wfqp5v5b.jpg
https://www.junzhuan.com/data/attachment/album/202512/30/123227npg48kv55umlwl0z.jpg
https://www.junzhuan.com/data/attachment/album/202512/30/123228g4wmmmm533m4o3zf.jpg
https://www.junzhuan.com/data/attachment/album/202512/30/123228cpv6hhjwzw5wvw5k.jpg
很美！欣赏！{:4_187:} 好漂亮啊，感谢影儿带来的好东西{:4_187:} 小九 发表于 2025-12-30 14:50
很美！欣赏！
感谢才友临帖赏析，问好，相互学习了{:4_204:}
红影 发表于 2025-12-30 22:36
好漂亮啊，感谢影儿带来的好东西
感谢才友临帖赏析，问好，相互学习了{:4_204:}
页:
[1]