鱼儿吐个泡泡

马黑黑

🐟

马黑黑

@鱼儿

马黑黑

代码

1. <style>
   
2. #mydiv {
   
3.         margin: 0 0 0 calc(50% - 593px);
   
4.         width: 1024px;
   
5.         height: 600px;
   
6.         background: linear-gradient(to right top, rgba(100,0,0,.65), rgba(0,0,0,.7));
   
7.         overflow: hidden;
   
8.         position: relative;
   
9.         --state: paused;
   
10. }
    
11. #mplayer {
    
12.         position: absolute;
    
13.         left: 50%;
    
14.         bottom: 2px;
    
15.         transform: translate(-40%) rotate(90deg);
    
16.         font: normal 80px / 80px sans-serif;
    
17.         cursor: pointer;
    
18.         z-index: 999;
    
19. }
    
20. li-zi {
    
21.         display: block;
    
22.         position: absolute;
    
23.         left: 50%;
    
24.         bottom: 80px;
    
25.         width: 20px;
    
26.         height: 20px;
    
27.         background: snow;
    
28.         border-radius: 50%;
    
29.         animation: move 10s var(--delay) infinite ease-out var(--state);
    
30.         --deg: 30deg; --xx: -200px; --delay: 0;
    
31. }
    
32. @keyframes move {
    
33.         from { transform: rotate(0deg) translateY(0px); opacity: 1; }
    
34.         to { transform: rotate(var(--deg)) translateY(var(--xx)); opacity: 0; }
    
35. }
    
36. </style>
    
37. 
    
38. <div id="mydiv">
    
39.         <div id="mplayer">&#128031;</div>
    
40. </div>
    
41. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=144998" autoplay="autoplay" loop="loop"></audio>
    
42. 
    
43. <script>
    
44. 
    
45. (function (){
    
46.         let total = 30;
    
47.         let createLizi = (mum,sons) => {
    
48.                 Array.from({length: sons}).forEach( (s,k) => {
    
49.                         let xx = 6 + Math.ceil(Math.random() * 20);
    
50.                         s = document.createElement('li-zi');
    
51.                         s.style.cssText += `
    
52.                                 width: ${xx}px;
    
53.                                 height: ${xx}px;
    
54.                                 left: calc(50% - ${xx / 2}px);
    
55.                                 --deg: ${50 - Math.ceil(Math.random() * 100)}deg;
    
56.                                 --xx: -${300 + Math.ceil(Math.random() * 600)}px;
    
57.                                 --delay: -${Math.random() * 9}s;
    
58.                         `;
    
59.                         mum.appendChild(s);
    
60.                 });
    
61.         };
    
62.         createLizi(mydiv,total);
    
63.         let mState = () => aud.paused ? (mydiv.style.setProperty('--state','paused'),canMove = false) : (mydiv.style.setProperty('--state','running'),canMove = true);
    
64.         aud.addEventListener('play', mState, false);
    
65.         aud.addEventListener('pause', mState, false);
    
66.         mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
    
67. })();
    
68. 
    
69. </script>

复制代码

南无月

opacity: 1;到opacity: 0; 原来这个透明度也能纳入动画之内。。。。

南无月

和虫鸣的结构一样，emoji图标加自创粒子，可以用来比较一下两个粒子不同~~

红影

鱼儿吐了那么多泡泡，绝对不止一个啊。标题应该是鱼儿吐了串泡泡

南无月

背景是斜着渐变，加to right top向右上角这个没用过。。。

南无月

小鱼快来看泡泡。。顺便看一下6.29晚会节目我做了个专辑~~@鱼儿

千羽

哈哈，晚饭后的鱼儿，没事在吐泡泡玩呢……

马黑黑

南无月 发表于 2023-7-1 19:39
opacity: 1;到opacity: 0; 原来这个透明度也能纳入动画之内。。。。

所有的属性几乎都可以，只要用的上

马黑黑

千羽 发表于 2023-7-1 19:48
哈哈，晚饭后的鱼儿，没事在吐泡泡玩呢……

马黑黑

南无月 发表于 2023-7-1 19:46
小鱼快来看泡泡。。顺便看一下6.29晚会节目我做了个专辑~~@鱼儿

挺好挺好

马黑黑

南无月 发表于 2023-7-1 19:43
和虫鸣的结构一样，emoji图标加自创粒子，可以用来比较一下两个粒子不同~~

粒子可以有很多变化，看怎么设计

红影

往上走300到900的距离过程中逐渐熄灭，看着特别错落有致。而且开始来不及散开，感觉真的像吐出的泡泡呢。这条emoji字符的鱼也好看。那条鱼转90能理解，为什么translate(-40%)没怎么看懂。

马黑黑

红影 发表于 2023-7-1 19:43
鱼儿吐了那么多泡泡，绝对不止一个啊。标题应该是鱼儿吐了串泡泡

一生二二生三三生很多个泡泡

马黑黑

南无月 发表于 2023-7-1 19:45
背景是斜着渐变，加to right top向右上角这个没用过。。。

有多重表达方式，角度也行

红影

emoji字符能修改颜色么？看黑黑的两个帖子都是黑色的。要是能改在哪改的？

马黑黑

红影 发表于 2023-7-1 20:05
往上走300到900的距离过程中逐渐熄灭，看着特别错落有致。而且开始来不及散开，感觉真的像吐出的泡泡呢。这 ...

emoji文本毕竟不是标准文本，是个不好处理的东东，有时候它使得装载它的元素难以处理一些事情。这是微调位置，让泡泡串儿基本上从嘴巴处出发

马黑黑

红影 发表于 2023-7-1 20:08
emoji字符能修改颜色么？看黑黑的两个帖子都是黑色的。要是能改在哪改的？

emoji若已经有颜色（多数会有颜色），则文本颜色对它没有任何作用。你可以考虑filter滤镜，它可以令最终效果产生变化。

红影

红影 发表于 2023-7-1 20:05
往上走300到900的距离过程中逐渐熄灭，看着特别错落有致。而且开始来不及散开，感觉真的像吐出的泡泡呢。这 ...

哦，这个去搜了一下知道了，这个transform: translate(-40%)是指元素自身的宽高的百分比，我弄错了，看到定位里的left: 50%;，想着再回来40%不是没多少了，实际不是针对页面，只是针对自身，也就是只有32px吧。是让自身更好地居中的，而且为了对上鱼嘴才选择的40%吧，否则应是50%呢