[特效音画] 云

马黑黑 · 发表于 2023-10-21 07:34

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

马黑黑 · 发表于 2023-10-21 07:34

帖子代码

<style>
#mydiv {
margin: 0 0 0 calc(50% - 593px);
width: 1024px;
height: 768px;
box-shadow: 8px 8px 16px #000;
background: #527785 url('https://638183.freep.cn/638183/t23/3/cloud.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: 300px;
height: 160px;
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(-1024px); }
to { transform: translateX(1024px); }
}
</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://music.163.com/song/media/outer/url?id=520459540" autoplay loop></audio>
</div>
<script>
(function() {
let lrcAr = [ [2.00,"云",2.5], [10.00,"",1] ];
let js1 = 'https://638183.freep.cn/638183/web/api/svg_path_lrc.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: 20px;',
fs_css: 'left: -200px; background: transparent;',
player_css: 'width: 200px; height: 150px; left: 20px; bottom: 2px; background: url("https://638183.freep.cn/638183/t23/btn/hshx.png") no-repeat 35px 15px',
path: 'M 5 115 Q 100 -100, 195 115',
btn: {left: 34, top: 60},
track: {track: 'silver', prog: 'snow'},
img: {play: '', pause: ''}
});
});
loadJs(js2, () => {
H5lz({
papa: '#mydiv',
total: 80,
size: {width: 10, height: 10},
shape: {background: '#efefef', borderRadius: ''},
ani: 'toTop',
maxTime: 40,
offset: {x: 80, y: 0},
});
});
})();
</script>

复制代码

马黑黑 · 发表于 2023-10-21 07:37

若需控制云的动画，第 27 行改为：

animation: move 200s infinite linear var(--state);

马黑黑 · 发表于 2023-10-21 07:45

云的制作，使用 svg 滤镜实现，两个 div （44、45行）绑定了滤镜（26行），并执行 CSS关键帧动画（27行）。

云的实体 div 在帖子之外，它们都不可见，帖子里所看到的飞翔的云，是它们的投影（box-shadow），每一个 div 都有三层投影，这些投影衔接起来，形成连续的云。

云的飞翔要能无缝循环运行，需要两个div及其阴影的配合，设计到一些计算，设计时估摸好，不行再调整一下。