亚伦影音工作室 发表于 2023-10-29 13:10

好多气球

本帖最后由 亚伦影音工作室 于 2023-10-29 13:14 编辑 <br /><br /><style>
#papa { margin: 10px -300px ; width: 1164px; height: 640px; background:#333 url('https://pic.imgdb.cn/item/653de248c458853aef452832.jpg') no-repeat center/cover;   position: relative;place-items: center; z-index: 10000; overflow:hidden;}
#bs{ position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;z-index: 1;
        height: 100%;mix-blend-mode:darken;
        animation: sb 1s linear infinite;
       
        opacity: 1;
}
@keyframes sb {
    0%{background:#ff0000;
      filter:hue-rotate(360deg)
    }
100%{background:#00ff00;
      filter:hue-rotate(0deg)
    }
}

#mpic { position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;z-index: 1;
        height: 100%;
        animation: fly 130s linear infinite;
        cursor: pointer;mix-blend-mode:lighten;
        opacity: 1;
}
#mpicc { position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;z-index: 1;
        height: 100%;
        animation: tot 40s linear infinite;
        cursor: pointer;mix-blend-mode:lighten;
        opacity: 1;
}

@keyframes fly {0%{
      background-position: 0% 0;
    }
    100%{
      background-position: -600% -200%;filter:hue-rotate(360deg)
    }
}
@keyframes tot { 0%{
      background-position: 0% 600%;
    }
    100%{
      background-position: -600% 0%;filter:hue-rotate(360deg)
    }
}
#img_border{top:85%; left:85%;z-index: 36;
position: absolute;
font: normal 7em/0em serif;
color:#ff0000;
cursor: pointer;
animation: spin 10s infinite linear;
}
@keyframes spin {0% { transform: rotate(360deg); }
}

</style>
<div id="papa">
<div id="bs"></div>
<imgid="mpic"style="background: url('https://pic.imgdb.cn/item/653ddeb0c458853aef398909.png')0 0/30% 40%" >
<imgid="mpicc"style="background: url('https://pic.imgdb.cn/item/653ddeb0c458853aef398909.png')0 0/50% 70%" >
<div id="img_border">❊</div>
<audio src="https://aod.cos.tx.xmcdn.com/storages/9ca2-audiofreehighqps/17/C6/GMCoOScJB2MsACAAAAJwL5_K.m4a" loop autoplay id="aud"></audio>
</div>
<script>
img_border.addEventListener('click', () => { aud.paused ? aud.play() : aud.pause(); });
img_border.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>img_border.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>img_border.style.animationPlayState = 'paused');
bs.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>bs.style.animationPlayState = 'running');
aud.addEventListener('pause', () => bs.style.animationPlayState = 'paused');

mpic.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>mpic.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>mpic.style.animationPlayState = 'paused');


mpicc.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>mpicc.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>mpicc.style.animationPlayState = 'paused');

</script>

小辣椒 发表于 2023-10-29 13:23

亚伦速度的{:4_170:}

小辣椒 发表于 2023-10-29 13:24

这个一键控制代码也是少，我看看也是方便的

小辣椒 发表于 2023-10-29 13:25

就是想有路径的播放器加一键控制，可以吗？

小辣椒 发表于 2023-10-29 13:26

欣赏亚伦的快手操作，个个精彩{:4_178:}

红影 发表于 2023-10-29 13:43

好多彩色泡泡，好漂亮的制作。欣赏亚伦老师好帖{:4_187:}

亚伦影音工作室 发表于 2023-10-29 14:00

小辣椒 发表于 2023-10-29 13:25
就是想有路径的播放器加一键控制，可以吗？

可以呀！

亦是金 发表于 2023-10-29 17:38

问好亚伦！制作精美！好帖！欣赏学习收藏了！{:4_176:}

小辣椒 发表于 2023-10-30 20:18

亚伦影音工作室 发表于 2023-10-29 14:00
可以呀！

好啊，期待亚伦的精彩呈现{:4_187:}
页: [1]
查看完整版本: 好多气球