【云荷六月同图】【漫步特效1】被风吹过的夏天
本帖最后由 云端漫步 于 2026-6-7 16:57 编辑 <br /><br /><style>#mydiv {
margin: 130px 0 30px calc(50% - 800px);
display: block;
width: 1700px;
height: 850px;
background: lightblue url('https://644220.freep.cn/644220/2/i88.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: 2;
opacity: .55;
}
#vid2 {
position: absolute;
width: 130%;
height: 130%;
object-fit: cover;
pointer-events: none;
mix-blend-mode: screen;
z-index: 3;
opacity: 0.8;
}
#character {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 4;
}
.fish {
position: absolute;
z-index: 5;
}
</style>
<div id="mydiv">
<audio id="aud" src="https://ting9.yymp3.com/yymp3/01cn/04new/jinsha/007.mp3" autoplay loop></audio>
<video id="vid" src="https://img2.tukuppt.com/video_show/3664703/00/02/06/5b4ffca12d70b.mp4" autoplay loop muted playsinline></video>
<video id="vid2" src="https://img.tukuppt.com/video_show/7165162/00/17/65/5ecb8aff3ce01.mp4" autoplay loop muted playsinline></video>
<img class="fish" src="https://644220.freep.cn/644220/2/w.gif">
<img class="fish" src="https://644220.freep.cn/644220/2/w.gif">
<img class="fish" src="https://644220.freep.cn/644220/2/w.gif">
<img class="fish" src="https://644220.freep.cn/644220/2/w.gif">
<img class="fish" src="https://644220.freep.cn/644220/2/w.gif">
<img class="fish" src="https://644220.freep.cn/644220/2/w.gif">
<img class="fish" src="https://644220.freep.cn/644220/2/w.gif">
<img class="fish" src="https://644220.freep.cn/644220/2/w.gif">
<img class="fish" src="https://644220.freep.cn/644220/2/w.gif">
<img class="fish" src="https://644220.freep.cn/644220/2/w.gif">
<img class="fish" src="https://644220.freep.cn/644220/2/w.gif">
<img class="fish" src="https://644220.freep.cn/644220/2/w.gif">
<img id="character" src="https://644220.freep.cn/ 4220/2/rer.png" alt="人物">
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const wrap = document.getElementById('mydiv');
const arrFish = document.querySelectorAll('.fish');
const W = wrap.offsetWidth;
const H = wrap.offsetHeight;
const area = {
x: (W - 1600) / 2,
y: H - 400,
w: 800,
h: 200
};
arrFish.forEach((fish, idx) => {
let fs = 50 + Math.random() * 40;
fish.style.width = fs + 'px';
fish.style.height = (fs * 0.65) + 'px';
let x = area.x + Math.random() * area.w;
let y = area.y + Math.random() * area.h;
fish.style.left = x + 'px';
fish.style.top = y + 'px';
if(Math.random() > 0.5) fish.style.transform = 'scaleX(-1)';
function swim(){
let tx = area.x + Math.random() * area.w;
let ty = area.y + Math.random() * area.h;
let duration = 12000 + Math.random() * 8000;
let start = performance.now();
function move(time){
let p = Math.min((time - start) / duration, 1);
let ease = 1 - Math.pow(1 - p, 3);
let currX = x + (tx - x) * ease;
let currY = y + (ty - y) * ease;
fish.style.left = currX + 'px';
fish.style.top = currY + 'px';
if(p < 1) {
requestAnimationFrame(move);
} else {
x = tx;
y = ty;
setTimeout(swim, 2000 + Math.random() * 2000);
}
}
requestAnimationFrame(move);
}
setTimeout(swim, idx * 700);
})
})
</script> 沙发 下午好漫步老师，图图制作的漂亮 图意清新淡雅，意境唯美，特效点睛制作，欣赏学习 汐云渡 发表于 2026-6-2 16:10
下午好漫步老师，图图制作的漂亮
云渡好快我还在编呃，祝快乐乐！ 云端漫步 发表于 2026-6-2 16:12
云渡好快我还在编呃，祝快乐乐！
我只能看见蒲公英，其他看不见 背景换得漂亮，与人物很是契合，画面清新治愈，特效点缀精彩。 欣赏学习漫步兄新作！ 汐云渡 发表于 2026-6-2 16:22
我只能看见蒲公英，其他看不见
群鱼看不见吗？ 欧阳风刀 发表于 2026-6-2 16:23
背景换得漂亮，与人物很是契合，画面清新治愈，特效点缀精彩。
欧阳风刀好，群鱼能看见吗。