云 - 动画音画 - 花潮论坛 - Powered by Discuz! Archiver

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

云

马黑黑 发表于 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 = [ , ];
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及其阴影的配合，设计到一些计算，设计时估摸好，不行再调整一下。

红影发表于 2023-10-21 10:31

马黑黑发表于 2023-10-21 07:45
云的制作，使用 svg 滤镜实现，两个 div （44、45行）绑定了滤镜（26行），并执行 CSS关键帧动画（27行）。 ...

滤镜把云的实体和投影全部改造过了吧，因为实体在帖子外面，看到的就是投影被改造的样子吧{:4_173:}

红影发表于 2023-10-21 10:35

没做滤镜的时候，就是三个椭圆的白团，做了滤镜，白团变得四周像不定的火苗，形态各异，跟云朵太像了{:4_199:}

红影发表于 2023-10-21 10:42

马黑黑发表于 2023-10-21 07:45
云的制作，使用 svg 滤镜实现，两个 div （44、45行）绑定了滤镜（26行），并执行 CSS关键帧动画（27行）。 ...

多弄几层投影，是不是一朵云就够了，比如就这么大的投影弄它6个{:4_173:}

红影发表于 2023-10-21 10:44

现在看到了这两个投影在模拟水波和模拟云朵两个实际应用了，都很漂亮。欣赏黑黑好帖{:4_199:}

马黑黑 发表于 2023-10-21 10:51

红影发表于 2023-10-21 10:31
滤镜把云的实体和投影全部改造过了吧，因为实体在帖子外面，看到的就是投影被改造的样子吧

滤镜直接作用于 div 对象，它让 div 形变、腐蚀，形成大致云的形状；box-shadow 则将实体 div 以白色投影到帖子界面。

为了观察，可以修改 .cloud 的 top 属性，并去掉动画属性。

马黑黑 发表于 2023-10-21 10:52

红影发表于 2023-10-21 10:44
现在看到了这两个投影在模拟水波和模拟云朵两个实际应用了，都很漂亮。欣赏黑黑好帖

水波纹那个不是投影，是直接作用于对象之上；云才是使用了CSS投影的。

马黑黑 发表于 2023-10-21 10:53

红影发表于 2023-10-21 10:42
多弄几层投影，是不是一朵云就够了，比如就这么大的投影弄它6个

运动中的云，要前后衔接，所以需要两个 div 以上，它们错开执行关键帧动画。

红影发表于 2023-10-21 10:53

马黑黑发表于 2023-10-21 10:51
滤镜直接作用于 div 对象，它让 div 形变、腐蚀，形成大致云的形状；box-shadow 则将实体 div 以白色投影 ...

我没把实体移到画面里，只是把滤镜去掉去看了看它原本的样子，为了对比加上滤镜后的大变样{:4_173:}

马黑黑 发表于 2023-10-21 10:54

红影发表于 2023-10-21 10:35
没做滤镜的时候，就是三个椭圆的白团，做了滤镜，白团变得四周像不定的火苗，形态各异，跟云朵太像了{:4_19 ...

如果耐心调整，可以做出更加逼真的云朵

马黑黑 发表于 2023-10-21 10:59

红影发表于 2023-10-21 10:53
我没把实体移到画面里，只是把滤镜去掉去看了看它原本的样子，为了对比加上滤镜后的大变样

这也是了解的方式之一

红影发表于 2023-10-21 13:13

马黑黑发表于 2023-10-21 10:52
水波纹那个不是投影，是直接作用于对象之上；云才是使用了CSS投影的。

是滤镜用在了云和水波上了，我打错字了，打成了投影{:4_173:}

红影发表于 2023-10-21 13:14

马黑黑发表于 2023-10-21 10:53
运动中的云，要前后衔接，所以需要两个 div 以上，它们错开执行关键帧动画。

哦，是这样的考虑。嗯嗯，明白了{:4_187:}

红影发表于 2023-10-21 13:15

马黑黑发表于 2023-10-21 10:54
如果耐心调整，可以做出更加逼真的云朵

这滤镜太强大了{:4_199:}

红影发表于 2023-10-21 13:17

马黑黑发表于 2023-10-21 10:59
这也是了解的方式之一

你说的我也可以再去试试，看看效果{:4_204:}

马黑黑 发表于 2023-10-21 19:14

红影发表于 2023-10-21 13:17
你说的我也可以再去试试，看看效果

包括div的宽高都应试一试

马黑黑 发表于 2023-10-21 19:15

红影发表于 2023-10-21 13:15
这滤镜太强大了

滤镜都在那里，它们有一套工作机制，依赖于个各参数

页: [1] 2 3 4 5

花潮论坛's Archiver

云