论坛 › 马黑黑教程专版 › 鱼儿吐个泡泡

马黑黑 发表于 2023-7-1 19:19

鱼儿吐个泡泡

<style>
#mydiv {
        margin: 0 0 0 calc(50% - 593px);
        width: 1024px;
        height: 600px;
        background: linear-gradient(to right top, rgba(100,0,0,.65), rgba(0,0,0,.7));
        overflow: hidden;
        position: relative;
        --state: paused;
}
#mplayer {
        position: absolute;
        left: 50%;
        bottom: 2px;
        transform: translate(-40%) rotate(90deg);
        font: normal 80px / 80px sans-serif;
        cursor: pointer;
        z-index: 999;
}
li-zi {
        display: block;
        position: absolute;
        left: 50%;
        bottom: 80px;
        width: 20px;
        height: 20px;
        background: snow;
        border-radius: 50%;
        animation: move 10s var(--delay) infinite ease-out var(--state);
        --deg: 30deg; --xx: -200px; --delay: 0;
}
@keyframes move {
        from { transform: rotate(0deg) translateY(0px); opacity: 1; }
        to { transform: rotate(var(--deg)) translateY(var(--xx)); opacity: 0; }
}
</style>

<div id="mydiv">
        <div id="mplayer">&#128031;</div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=144998" autoplay="autoplay" loop="loop"></audio>

<script>

(function (){
        let total = 30;
        let createLizi = (mum,sons) => {
                Array.from({length: sons}).forEach( (s,k) => {
                        let xx = 6 + Math.ceil(Math.random() * 20);
                        s = document.createElement('li-zi');
                        s.style.cssText += `
                                width: ${xx}px;
                                height: ${xx}px;
                                left: calc(50% - ${xx / 2}px);
                                --deg: ${50 - Math.ceil(Math.random() * 100)}deg;
                                --xx: -${300 + Math.ceil(Math.random() * 600)}px;
                                --delay: -${Math.random() * 9}s;
                        `;
                        mum.appendChild(s);
                });
        };
        createLizi(mydiv,total);
        let mState = () => aud.paused ? (mydiv.style.setProperty('--state','paused'),canMove = false) : (mydiv.style.setProperty('--state','running'),canMove = true);
        aud.addEventListener('play', mState, false);
        aud.addEventListener('pause', mState, false);
        mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
})();

</script>

马黑黑 发表于 2023-7-1 19:19

@鱼儿 {:4_170:}

马黑黑 发表于 2023-7-1 19:20

代码
<style>
#mydiv {
        margin: 0 0 0 calc(50% - 593px);
        width: 1024px;
        height: 600px;
        background: linear-gradient(to right top, rgba(100,0,0,.65), rgba(0,0,0,.7));
        overflow: hidden;
        position: relative;
        --state: paused;
}
#mplayer {
        position: absolute;
        left: 50%;
        bottom: 2px;
        transform: translate(-40%) rotate(90deg);
        font: normal 80px / 80px sans-serif;
        cursor: pointer;
        z-index: 999;
}
li-zi {
        display: block;
        position: absolute;
        left: 50%;
        bottom: 80px;
        width: 20px;
        height: 20px;
        background: snow;
        border-radius: 50%;
        animation: move 10s var(--delay) infinite ease-out var(--state);
        --deg: 30deg; --xx: -200px; --delay: 0;
}
@keyframes move {
        from { transform: rotate(0deg) translateY(0px); opacity: 1; }
        to { transform: rotate(var(--deg)) translateY(var(--xx)); opacity: 0; }
}
</style>

<div id="mydiv">
        <div id="mplayer">&#128031;</div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=144998" autoplay="autoplay" loop="loop"></audio>

<script>

(function (){
        let total = 30;
        let createLizi = (mum,sons) => {
                Array.from({length: sons}).forEach( (s,k) => {
                        let xx = 6 + Math.ceil(Math.random() * 20);
                        s = document.createElement('li-zi');
                        s.style.cssText += `
                                width: ${xx}px;
                                height: ${xx}px;
                                left: calc(50% - ${xx / 2}px);
                                --deg: ${50 - Math.ceil(Math.random() * 100)}deg;
                                --xx: -${300 + Math.ceil(Math.random() * 600)}px;
                                --delay: -${Math.random() * 9}s;
                        `;
                        mum.appendChild(s);
                });
        };
        createLizi(mydiv,total);
        let mState = () => aud.paused ? (mydiv.style.setProperty('--state','paused'),canMove = false) : (mydiv.style.setProperty('--state','running'),canMove = true);
        aud.addEventListener('play', mState, false);
        aud.addEventListener('pause', mState, false);
        mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
})();

</script>

南无月 发表于 2023-7-1 19:39

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

南无月 发表于 2023-7-1 19:43

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

红影 发表于 2023-7-1 19:43

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

南无月 发表于 2023-7-1 19:45

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

南无月 发表于 2023-7-1 19:46

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

千羽 发表于 2023-7-1 19:48

哈哈，晚饭后的鱼儿，没事在吐泡泡玩呢……{:4_173:}

马黑黑 发表于 2023-7-1 20:03

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

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

马黑黑 发表于 2023-7-1 20:04

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

{:4_172:}

马黑黑 发表于 2023-7-1 20:04

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

挺好挺好

马黑黑 发表于 2023-7-1 20:04

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

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

红影 发表于 2023-7-1 20:05

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

马黑黑 发表于 2023-7-1 20:05

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

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

马黑黑 发表于 2023-7-1 20:06

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

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

红影 发表于 2023-7-1 20:08

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

马黑黑 发表于 2023-7-1 20:09

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

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

马黑黑 发表于 2023-7-1 20:11

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

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

红影 发表于 2023-7-1 20:16

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

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

查看完整版本: 鱼儿吐个泡泡