【影.印记】风光摄影《合肥文博园广场掠影》
合肥文博园广场掠影<BR>摄影素材/傲雷影儿 动图制作/傲雷影儿
<div class="t_fsz"><table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_405329">
<style>
#mydiv {
margin: 50px 0 30px calc(50% - 840px);
display: grid;
place-items: center;
width: 1600px;
height: 900px;
background: lightblue url('https://www.junzhuan.com/data/attachment/album/202512/13/145504pzyczcgxp08v1jg8.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 style="width:1px;height:1px;" controls="controls" autoplay="autoplay" loop="loop" src="http://music.163.com/song/media/outer/url?id=1371757759.mp3" type="audio/mpeg"></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/15653652/00/30/12/5fa1e4c9233a2.mp4" autoplay="" loop="" muted=""></video>
<img class="anim-img" src="https://www.junzhuan.com/data/attachment/album/202512/13/145505tef4jo4fbe1ed0it.jpg" alt="图1">
<img class="anim-img" src="https://www.junzhuan.com/data/attachment/album/202512/13/145505ilzsfulsm3hbtmsm.jpg" alt="图2">
<img class="anim-img" src="https://www.junzhuan.com/data/attachment/album/202512/13/145505p3ldwjtgtqdhhoqt.jpg" alt="图3">
<img class="anim-img" src="https://www.junzhuan.com/data/attachment/album/202512/13/145505a6mqtmqtx6qmthxm.jpg" alt="图4">
<img class="anim-img" src="https://www.junzhuan.com/data/attachment/album/202512/13/145504idfbb7f77njkmibq.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>
</div>
<div id="comment_405329" class="cm">
</div><BR><BR><BR><BR>
https://www.junzhuan.com/data/attachment/album/202512/13/145504idfbb7f77njkmibq.jpg
https://www.junzhuan.com/data/attachment/album/202512/13/145504pzyczcgxp08v1jg8.jpg
https://www.junzhuan.com/data/attachment/album/202512/13/145505p3ldwjtgtqdhhoqt.jpg
https://www.junzhuan.com/data/attachment/album/202512/13/145505e7iz7ii6hsdb0gc8.jpg
https://www.junzhuan.com/data/attachment/album/202512/13/145505ilzsfulsm3hbtmsm.jpg
https://www.junzhuan.com/data/attachment/album/202512/13/145505tef4jo4fbe1ed0it.jpg
https://www.junzhuan.com/data/attachment/album/202512/13/145505a6mqtmqtx6qmthxm.jpg
https://www.junzhuan.com/data/attachment/album/202512/13/145506c99y9p9ahp9dzsyi.jpg
漫步合肥政务新区文博园广场，暖阳极艳，满身流光，仿佛向天空遥寄飞吻，思绪奔涌，如风，如幻。 非常棒的感觉哈，用影片记录自己的感悟，别有风味不说，还留下永远的记忆。{:4_199:} 这广场很有特色。欣赏影儿好拍{:4_187:} 樵歌 发表于 2025-12-15 19:29
非常棒的感觉哈，用影片记录自己的感悟，别有风味不说，还留下永远的记忆。
感谢才友临帖赏析，问好，相互学习了{:4_204:}
红影 发表于 2025-12-15 20:50
这广场很有特色。欣赏影儿好拍
感谢才友临帖赏析，问好，相互学习了{:4_204:}
照片画质很好，制作很有气势！感谢分享，精彩支持！！{:4_204:}{:4_190:}
霜染枫丹 发表于 2025-12-16 19:36
照片画质很好，制作很有气势！感谢分享，精彩支持！！
感谢才友临帖赏析，问好，相互学习了{:4_204:}
页:
[1]