【云荷六月同图】【漫步特效4】安洁西公主 TO 雨声/素心
<style>#mydiv {
margin: 160px 0 30px calc(50% - 931px);
display: grid;
place-items: center;
width: 1800px;
height: 900px;
background: url('https://644220.freep.cn/644220/2/iyi.jpg') no-repeat center/cover;
box-shadow: 0 0 10px #333;
overflow: hidden;
position: relative;
--state: running;
}
#vid {
position: absolute;
width: 140%;
height: 120%;
top: -60px;
object-fit: cover;
pointer-events: none;
mix-blend-mode: screen;
z-index: 2;
opacity: .20;
}
.balloon {
position: absolute;
left: 50%;
top: 50%;
width: 60px;
height: 80px;
opacity: 0.8;
transform: translate(-50%, -50%) translate3d(0, 0, 0) rotate(var(--rot));
animation: scatterGather var(--du) var(--delay) infinite ease-in-out var(--state);
filter: blur(1px);
}
.balloon::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0) 40%, var(--color1) 80%);
border-radius: 50%;
}
@keyframes scatterGather {
0%,100% { transform: translate(-50%, -50%) translate3d(0,0,0) rotate(var(--rot)); opacity: 0.8; }
50% { transform: translate(-50%, -50%) translate3d(var(--xx),var(--yy),var(--zz)) rotate(var(--rot)); opacity: 0.6; }
}
#plane {
position: absolute;
top: 50px;
width: 215px;
height: 114px;
z-index: 3;
animation: fly 60s linear infinite;
}
@keyframes fly {
0% {
left: -215px;
opacity: 0;
transform: scaleX(1);
}
5% {
opacity: 1;
}
45% {
left: 1800px;
opacity: 1;
transform: scaleX(1);
}
50% {
left: 1800px;
transform: scaleX(-1);
}
95% {
left: -215px;
opacity: 1;
transform: scaleX(-1);
}
100% {
left: -215px;
opacity: 0;
transform: scaleX(1);
}
}
</style>
<div id="mydiv">
<video id="vid" src="https://img2.tukuppt.com/video_show/2629112/00/02/06/5b509c34df30f.mp4" autoplay loop muted></video>
<img id="plane" class="normal" src="https://644220.freep.cn/644220/2/ce3.gif"
width="315" height="314" alt="飞机" />
<audio id="aud" src="https://ting9.yymp3.com/new27/guanxiaotong/2.mp3" autoplay loop></audio>
<script>
let total = 40, ww = mydiv.offsetWidth, hh = mydiv.offsetHeight;
const balloonColors = [
['#ff9a9e','#fad0c4'], ['#fad0c4','#ffd1ff'],
['#a1c4fd','#c2e9fb'], ['#d4fc79','#96e6a1'],
['#f6d365','#fda085'], ['#84fae3','#8fd3f4']
];
Array.from({length: total}).forEach((item,key) => {
item = document.createElement('div');
item.className = 'balloon';
const angle = Math.random() * Math.PI * 2;
const distance = Math.random() * 800 + 300;
const x = Math.cos(angle) * distance;
const y = Math.sin(angle) * distance;
const colorPair = balloonColors;
item.style.cssText = `
--xx: ${x}px; --yy: ${y}px; --zz: ${Math.random() * 100}px;
--du: ${10 + Math.random() * 10}s; --delay: ${Math.random() * -5}s;
--rot: ${Math.random() * 360}deg; --color1: ${colorPair}; --color2: ${colorPair}
`;
mydiv.appendChild(item);
});
script.onload = () => {
HCPlayer({
papa: '#mydiv',
player_css: 'left:10px;bottom:10px;',
img: {enter:'',quit:'',play:'',pause:''}
});
}
</script>
</div> @雨声 让我们同享音画的乐趣！六月初临景夏天，端午安康暖万家！
传递下素心我们的友谊不变，叫她来这儿玩，你俩生日同月我会这儿送你们。 云端漫步 发表于 2026-6-8 19:29
@雨声 让我们同享音画的乐趣！六月初临景夏天，端午安康暖万家！
传递下素心我们的友谊不变，叫她来这儿玩 ...
上来看到漫步老师送的礼物，甚是欣慰，见到素心会把漫步老师的邀请告诉她，谢谢漫步老师，同祝漫步老师端午安康，礼物开心收下，先替素爷谢谢漫步老师~~ 图图非常漂亮，很喜欢，漫步老师制作辛苦，开心每一天~ 雨声 发表于 2026-6-8 20:00
上来看到漫步老师送的礼物，甚是欣慰，见到素心会把漫步老师的邀请告诉她，谢谢漫步老师，同祝漫步老师端 ...
必须邀请素心来玩，在那与你俩友情永志不忘。 祝雨声/素心收礼开心，雨姐夏日愉快！{:1_155:}{:1_155:} 我只看到了好多彩球飞舞和飞机了 终于看到图图了 玫の玫 发表于 2026-6-8 20:29
我只看到了好多彩球飞舞和飞机了
玫玫没看到图吗 云端漫步 发表于 2026-6-8 20:09
必须邀请素心来玩，在那与你俩友情永志不忘。
好哒，我也一样的心情，情意久久，一起开心快乐相伴~