【漫步特效】千秋梦TO一鹿向北
<style>#mydiv {
margin: 150px 0 30px calc(50% - 900px);
display: grid;
place-items: center;
width: 1700px;
height: 850px;
background: lightblue url('https://kkshan.com/data/attachment/forum/202510/12/161453u6mkpep6ggdc11oc.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: .35;
}
.red-lantern {
position: relative;
width: auto;
height: auto;
z-index: 2;
transform: scale(0.9);
transform-origin: top center;
filter: drop-shadow(0 0 15px rgba(255, 50, 50, 0.6));
animation: glow 2s infinite alternate;
}
.lantern-container {
display: flex;
justify-content: space-around;
width: 140%;
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
.falling-red-lantern {
position: absolute;
width: 150px;
height: auto;
z-index: 3;
filter: drop-shadow(0 0 10px rgba(255, 50, 50, 0.6));
animation: fallLantern 12s cubic-bezier(0.25, 0.1, 0.25, 1) forwards,
glow 2s infinite alternate;
}
@keyframes fallLantern {
0% {
top: -150px;
left: calc(var(--start-left) * 1%);
}
80% {
top: 100%;
animation-timing-function: cubic-bezier(0.17, 0.67, 0.83, 0.67);
}
85% { top: 95%; }
90% { top: 100%; }
95% { top: 98%; }
100% {
top: 100%;
}
}
@keyframes glow {
0% {
filter: drop-shadow(0 0 10px rgba(255, 50, 50, 0.4));
}
100% {
filter: drop-shadow(0 0 20px rgba(255, 0, 0, 0.9));
}
}
#character {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 10;
pointer-events: none;
}
.snowflake {
position: absolute;
background-color: rgba(255, 255, 255, 0.7);
border-radius: 50%;
pointer-events: none;
z-index: 4;
animation: snowfall linear infinite;
}
@keyframes snowfall {
0% {
transform: translateY(-10px) rotate(0deg);
}
100% {
transform: translateY(850px) rotate(360deg);
}
}
.firework {
position: absolute;
border-radius: 50%;
pointer-events: none;
z-index: 15;
}
</style>
<div id="mydiv">
<audio id="aud" src="https://link.hhtjim.com/163/1828779206.mp3" autoplay loop></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/2414777/00/02/18/5b52d56cc6aff.mp4" autoplay loop muted></video>
<div class="lantern-container">
<img class="red-lantern" src="https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/2/91.gif" alt="">
<img class="red-lantern" src="https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/2/91.gif" alt="">
<img class="red-lantern" src="https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/2/91.gif" alt="">
<img class="red-lantern" src="https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/2/91.gif" alt="">
<img class="red-lantern" src="https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/2/91.gif" alt="">
</div>
<!-- PNG 人物 -->
<img id="character" src="https://kkshan.com/data/attachment/forum/202510/12/161321ew38130e6pwhkwu3.png" alt="人物">
</div>
<script>
function createFallingRedLantern() {
const lantern = document.createElement('img');
lantern.classList.add('falling-red-lantern');
lantern.src = 'https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/2/91.gif';
const startLeft = Math.random() * 90;
lantern.style.setProperty('--start-left', startLeft);
const delay = Math.random() * 5;
lantern.style.animationDelay = delay + 's';
document.getElementById('mydiv').appendChild(lantern);
setTimeout(() => lantern.remove(), 12000 + delay * 1000);
}
setInterval(createFallingRedLantern, 1500);
function createSnowflake() {
const snowflake = document.createElement('div');
snowflake.classList.add('snowflake');
const size = Math.random() * 3 + 1;
snowflake.style.width = size + 'px';
snowflake.style.height = size + 'px';
snowflake.style.left = Math.random() * 100 + '%';
snowflake.style.animationDuration = Math.random() * 10 + 10 + 's';
document.getElementById('mydiv').appendChild(snowflake);
setTimeout(() => snowflake.remove(), 20000);
}
setInterval(createSnowflake, 300);
document.getElementById('mydiv').addEventListener('click', function(e) {
const fireworksCount = 20;
for(let i = 0; i < fireworksCount; i++) {
const firework = document.createElement('div');
firework.classList.add('firework');
const size = Math.random() * 5 + 2;
firework.style.width = size + 'px';
firework.style.height = size + 'px';
firework.style.left = e.clientX - size/2 + 'px';
firework.style.top = e.clientY - size/2 + 'px';
const colors = ['#ff0000', '#ff9900', '#ffff00', '#00ff00', '#0099ff', '#6633ff'];
firework.style.backgroundColor = colors;
document.getElementById('mydiv').appendChild(firework);
const angle = Math.random() * Math.PI * 2;
const speed = Math.random() * 3 + 2;
const vx = Math.cos(angle) * speed;
const vy = Math.sin(angle) * speed;
let x = 0, y = 0;
const update = () => {
x += vx;
y += vy;
y += 0.1;
firework.style.transform = `translate(${x}px, ${y}px)`;
firework.style.opacity = 1 - Math.abs(x)/50;
if (Math.abs(x) < 50 && Math.abs(y) < 50) {
requestAnimationFrame(update);
} else {
firework.remove();
}
};
update();
}
});
</script> ◠‿◠仙子般美丽，欣赏鼓掌 欣赏漫步老师的美图，
特效很棒，
感谢精彩分享，
感谢给大家带来美滴享受！
祝创作愉快，
天天好心情！ 画面以红绿交织的古风场景为背景，
一位身着淡蓝汉服的女子手持白瓶，
营造出 “千秋梦” 的华丽且富有古韵的氛围。 女子身着淡蓝汉服，
衣袂飘飘，手持白瓶，
似在演绎一段关于长安的千秋旧梦。
红绿古风背景与淡蓝汉服的搭配，
为画面添了几分大唐盛世的繁华感与视觉的冲击力。 古风建筑的华丽与女子的古典姿态融合，
宛如一首关于大唐千秋梦的抒情诗。
从宫灯的明艳，
到汉服的飘逸，
再到背景的繁华，
每一处细节都在诠释着 “千秋梦” 的大唐意境，
让古韵的豪情愈发浓烈。
{:1_154:}{:1_154:} 喜庆，动感，人物与背景完美融合。欣赏点赞好作品。 感谢漫步兄精彩分享！顺祝一鹿兄收礼愉快！ 这张可以看到了，我感觉应该是图片链接的问题哈哈;P 美图，很有穿越感，
人物的衣袂飘得像云，
身后的楼阁叠着红与绿，
让人感觉到了长安的夜还没凉，
蛐蛐也好听呢~~
页:
[1]
2