再探苍穹 （学习黑黑云动效果）
<style>#mydiv {
margin: 150px 0 0 calc(50% - 781px);
width: 1400px;
height: 849px;
box-shadow: 8px 8px 16px #000;
background: #527785 url('https://xlaj.cn/assets/file/zp/20231026212340.jpg') no-repeat center/cover;
overflow: hidden;
position: relative;
display: grid;
place-items: center;
}
#mydiv > svg { stroke-linecap: round; }
.cloud {
position: absolute;
left: 0;
top: -300px;
width: 350px;
height: 200px;
background: #000;
border-radius: 40%;
box-shadow:
300px 400px 30px 20px rgba(255,255,255,.95),
600px 390px 30px rgba(255,255,255,.85),
60px 360px 30px rgba(255,255,255,.9);
filter: url(#svg-cloud);
animation: move 200s infinite linear;
}
.cloud:nth-of-type(2) { animation-delay: -100s; }
@keyframes move {
from { transform: translateX(-1400px); }
to { transform: translateX(1400px); }
}
</style>
<div id="mydiv">
<svg style="width: 0; height: 0; position: absolute;">
<filter id="svg-cloud">
<feTurbulence type="fractalNoise" baseFrequency="0.012" numOctaves="5" seed="20" result="turb"></feTurbulence>
<feDisplacementMap in2="turb" in="SourceGraphic" scale="170" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
</filter>
</svg>
<div class="cloud"></div>
<div class="cloud"></div>
<audio id="aud" src="https://yinyue1111.s3-us-east-1-accelerate.ossfiles.com/htrzg.mp3" autoplay loop></audio>
</div>
<script>
(function() {
let lrcAr = [ ,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
]
let js1 = 'https://xlaj.cn/assets/file/zp/20231029141742.js',
js2 = 'https://638183.freep.cn/638183/web/lizi/h5lz_2d.js';
let loadJs = (url,callback) => {
let body = document.querySelector('body'), jsNode = document.createElement('script');
jsNode.charset = 'utf-8';
jsNode.setAttribute('src', url);
body.appendChild(jsNode);
jsNode.onload = () => callback();
};
loadJs(js1, () => {
HCPlayer({
papa: '#mydiv',
lrcAr: lrcAr,
lrc_css: 'top: 80px; --bg: linear-gradient(rgba(255,0,0,.75),rgba(255,0,0,.54));color: snow;',
fs_css: 'left: -200px; background: transparent;',
player_css: 'width: 220px; height: 166px; left: 780px; bottom: 202px; background: url("") no-repeat 35px 15px',
path: 'm79.12507,134.87489l36.87467,21.37476l1.25,-3.99999l-4.99999,-2.99999l25.49994,-44.7499l13.74997,7.24998l5.99999,31.49993l9.24998,5.49999l4.49999,-0.25l11.24997,-19.74996l-2.49999,-1.5l2.49999,-4.49999l-13.99997,-6.99998c0.12525,0.12519 1.37524,-2.87481 1.37524,-2.87481c0,0 18.49996,8.24998 18.37471,8.12479c0.12525,0.12519 5.62524,-11.12479 5.49999,-11.24997c0.12525,0.12519 -15.37472,-9.87479 -15.49997,-9.99998c0.12525,0.12519 1.87524,-3.6248 1.75,-3.74999c0.12525,0.12519 12.62522,8.62517 12.49997,8.49998c0.12525,0.12519 2.12524,-3.8748 2,-3.99999c0.12525,0.12519 3.37524,1.87518 3.24999,1.75c0.12525,0.12519 9.37523,-19.87477 9.24998,-19.99996c0.12525,0.12519 -0.12475,-4.1248 -0.25,-4.24999c0.12525,0.12519 -9.62473,-5.1248 -9.62473,-5.1248c0,0 -30.99993,11.24998 -31.12518,11.12479c0.12525,0.12519 -13.12472,-6.6248 -13.24997,-6.74998c0.12525,0.12519 25.37519,-44.12472 25.37519,-44.37471c0,-0.25 3.99999,1.5 3.87474,1.37481c0.12525,0.12519 2.12524,-3.37481 2,-3.49999c0.12525,0.12519 -36.62467,-19.12477 -36.74992,-19.24996c0.12525,0.12519 -1.87475,1.62518 -2,1.5c0.12525,0.12519 16.37521,10.12516 16.24996,9.99998c0.12525,0.12519 -54.62463,23.12513 -54.74988,22.99995c0.12525,0.12519 -7.87474,-3.62481 -7.99998,-3.74999c0.12525,0.12519 -12.12473,-1.12481 -12.24997,-1.25c0.12524,0.12519 -65.12461,-22.12476 -65.24985,-22.24995c0.12524,0.12519 -5.62474,0.12519 -5.74999,0c0.12524,0.12519 0.37524,6.87517 0.25,6.74998c0.12524,0.12519 56.12512,43.12509 55.99987,42.9999c0.12524,0.12519 5.12523,7.87517 4.99999,7.74998c0.12524,0.12519 9.37522,4.62518 9.24998,4.49999c0.12524,0.12519 10.62522,60.12505 10.87522,60.12505c0.25,0 -16.74996,-8.24998 -16.87521,-8.37517c0.12524,0.12519 -0.87475,2.37518 -0.87475,2.37518z',
btn: {left: 34, top: 60},
track: {track: 'snow', prog: '#fb0925'},
img: {play: 'https://xlaj.cn/assets/file/zp/20231008122616.png', pause: 'https://xlaj.cn/assets/file/zp/20231008122554.png'}
});
});
loadJs(js2, () => {
H5lz({
papa: '#mydiv',
total: 5,
size: {width: 200, height: 104},
shape: {background: 'url("https://wj.zp68.com/lxx/yunhua/2022/10/10/jjj.png")', borderRadius: '0'},
maxTime: 24,
offset: {x: 100, y: -400},
ani: 'toLeft',
});
});
})();
</script>
https://pic.imgdb.cn/item/653a6c5dc458853aef7e537b.jpg @马黑黑
黑黑套用一个云动效果，谢谢源码分享{:4_187:} 以前做过的歌词同步。简单的一个网络图片，加了三个人物进去，做了一个简单的小飞机路径，完成一个作业{:4_173:} 热烈祝贺神舟十七号发射圆满成功！ 这次是最年轻的航天员乘组 欣赏！只会欣赏！{:4_187:} 这个制作很赞，豪迈大气。共同祝贺神舟十七号发射圆满成功！{:4_178:} 雄壮 小飞机路径好，还有飞机粒子也很赞，调的方向也正好。这个帖子特别好，给亲爱的点赞{:4_199:} 动感很强！厉害了祖国，厉害了辣椒！ 好帖！点赞！祝贺神舟十七号发射圆满成功！ 再探苍穹！
这个标题太牛了
创意很好
很棒！
{:4_199:}{:4_187:} 醉美水芙蓉 发表于 2023-10-26 22:04
问候小辣椒，飞机路径做得漂亮！
谢谢水芙蓉欣赏{:4_171:} 焱鑫磊 发表于 2023-10-26 22:30
欣赏！只会欣赏！
谢谢焱鑫磊欣赏{:4_204:} 红影 发表于 2023-10-26 22:41
这个制作很赞，豪迈大气。共同祝贺神舟十七号发射圆满成功！
亲爱的，其实这个就是一个云动效果，其他的效果都是以前玩过的 马黑黑 发表于 2023-10-26 22:42
雄壮
祖国强大了{:4_178:} 红影 发表于 2023-10-26 22:44
小飞机路径好，还有飞机粒子也很赞，调的方向也正好。这个帖子特别好，给亲爱的点赞
谢谢亲爱的，这个其实我想做云动效果，加了以前几个效果上去，这样感觉还是比较完美了 亚伦影音工作室 发表于 2023-10-26 23:15
动感很强！厉害了祖国，厉害了辣椒！
哈哈~~~亚伦更厉害{:4_205:}