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

马黑黑 发表于 2024-1-17 11:41

梦从

本帖最后由马黑黑于 2024-1-17 11:44 编辑 <br /><br /><style>
#papa { margin: -70px 0 0 calc(50% - 721px); width: 1280px; height: 800px; background: url('https://638183.freep.cn/638183/t24/jpg/mgjk.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; overflow: hidden; z-index: 1; }
#player { position: absolute; left: 670px; top: 280px; mix-blend-mode: screen; cursor: pointer; transition: filter 1s; animation: rot 6s infinite linear var(--state); }
#player:hover { filter: hue-rotate(160deg); }
li-zi { position: absolute; left: 760px; top: 340px; width: 60px; height: 60px; opacity: .3; background: url('https://638183.freep.cn/638183/t23/btn/hxbj.png') no-repeat center/cover; }
@keyframes moving { from { opacity: .3; transform: translate(0,0) rotate(0); } to { opacity: 1; transform: translate(var(--x0),var(--y0)) rotate(3turn); } }
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1908287251" autoplay loop></audio>
<img id="player" src="https://638183.freep.cn/638183/t23/btn/hxbj.png" alt="" />
</div>

<script>
(function() {
let all = 30;
for(let i = 0; i < all; i++) {
   let lz = document.createElement('li-zi');
   let hudu = Math.PI / 180 * 360 / all * i;
   let xx = 950 * Math.cos(hudu), yy = 850 * Math.sin(hudu);
   lz.style.cssText += `
         --x0: ${xx}px;
         --y0: ${yy}px;
         filter: hue-rotate(${Math.floor(Math.random() * 360)}deg);
         animation: moving ${Math.random() * 20 + 20}s ${1 - Math.random() * 20}s infinite var(--state);
   `;
   papa.prepend(lz);
}
let mState = () => aud.paused ? papa.style.setProperty('--state','paused') : papa.style.setProperty('--state','running');
aud.addEventListener('playing',mState,false);
aud.addEventListener('pause',mState,false);
player.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
})();
</script>

樵歌发表于 2024-1-17 11:44

手捧宝莲花，这是神女三圣母么{:4_173:}

马黑黑 发表于 2024-1-17 11:45

樵歌发表于 2024-1-17 11:44
手捧宝莲花，这是神女三圣母么

刷新一下，神女手中的花可以散出去：刚才有个拼写问题，刚改好

马黑黑 发表于 2024-1-17 11:46

帖子代码
<style>
#papa { margin: -70px 0 0 calc(50% - 721px); width: 1280px; height: 800px; background: url('https://638183.freep.cn/638183/t24/jpg/mgjk.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; overflow: hidden; z-index: 1; }
#player { position: absolute; left: 670px; top: 280px; mix-blend-mode: screen; cursor: pointer; transition: filter 1s; animation: rot 6s infinite linear var(--state); }
#player:hover { filter: hue-rotate(160deg); }
li-zi { position: absolute; left: 760px; top: 340px; width: 60px; height: 60px; opacity: .3; background: url('https://638183.freep.cn/638183/t23/btn/hxbj.png') no-repeat center/cover; }
@keyframes moving { from { opacity: .3; transform: translate(0,0) rotate(0); } to { opacity: 1; transform: translate(var(--x0),var(--y0)) rotate(3turn); } }
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1908287251" autoplay loop></audio>
<img id="player" src="https://638183.freep.cn/638183/t23/btn/hxbj.png" alt="" />
</div>

<script>
(function() {
let all = 30;
for(let i = 0; i < all; i++) {
   let lz = document.createElement('li-zi');
   let hudu = Math.PI / 180 * 360 / all * i;
   let xx = 950 * Math.cos(hudu), yy = 850 * Math.sin(hudu);
   lz.style.cssText += `
         --x0: ${xx}px;
         --y0: ${yy}px;
         filter: hue-rotate(${Math.floor(Math.random() * 360)}deg);
         animation: moving ${Math.random() * 20 + 20}s ${1 - Math.random() * 20}s infinite var(--state);
   `;
   papa.prepend(lz);
}
let mState = () => aud.paused ? papa.style.setProperty('--state','paused') : papa.style.setProperty('--state','running');
aud.addEventListener('playing',mState,false);
aud.addEventListener('pause',mState,false);
player.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
})();
</script>

樵歌发表于 2024-1-17 12:37

马黑黑发表于 2024-1-17 11:45
刷新一下，神女手中的花可以散出去：刚才有个拼写问题，刚改好

看到了很漂亮，三圣女本天上的仙女，她散的花儿落头上，要行好运{:4_173:}

樵歌发表于 2024-1-17 12:39

神话色彩特别浓郁。旁边的小动物也很可爱的。

马黑黑 发表于 2024-1-17 12:58

樵歌发表于 2024-1-17 12:39
神话色彩特别浓郁。旁边的小动物也很可爱的。

动物也是有寓意的：两边的动物，暗示着什么，看怎么解读

马黑黑 发表于 2024-1-17 12:59

樵歌发表于 2024-1-17 12:37
看到了很漂亮，三圣女本天上的仙女，她散的花儿落头上，要行好运

花之运基本上{:5_117:}

樵歌发表于 2024-1-17 15:47

马黑黑发表于 2024-1-17 12:58
动物也是有寓意的：两边的动物，暗示着什么，看怎么解读

我就看到有鹿子、松鼠、狐狸，猫头鹰等，不知道啥寓意{:4_203:}

樵歌发表于 2024-1-17 15:48

马黑黑发表于 2024-1-17 12:59
花之运基本上

幸亏俺躲得及时{:4_189:}

梦油发表于 2024-1-17 16:55

那几只小生灵设计得恰到好处。

红影发表于 2024-1-17 17:01

好美的制作。按钮的花儿鼠标接触会变色，散出去的花儿也都色相变化着{:4_199:}

马黑黑 发表于 2024-1-17 17:54

红影发表于 2024-1-17 17:01
好美的制作。按钮的花儿鼠标接触会变色，散出去的花儿也都色相变化着

有所差异

马黑黑 发表于 2024-1-17 17:55

梦油发表于 2024-1-17 16:55
那几只小生灵设计得恰到好处。

不多不少正合适

马黑黑 发表于 2024-1-17 17:55

樵歌发表于 2024-1-17 15:48
幸亏俺躲得及时

哎呀，躲错了，花砸人比瓜砸人安全的

马黑黑 发表于 2024-1-17 17:56

樵歌发表于 2024-1-17 15:47
我就看到有鹿子、松鼠、狐狸，猫头鹰等，不知道啥寓意

也没啥，觉得好看就行

醉美水芙蓉 发表于 2024-1-17 19:03

红影发表于 2024-1-17 19:06

马黑黑发表于 2024-1-17 17:54
有所差异

是的，散出去的是变化的，鼠标粗碰的是固定的。
这个我应该可以也跟着做个的呢{:4_187:}

马黑黑 发表于 2024-1-17 19:33

红影发表于 2024-1-17 19:06
是的，散出去的是变化的，鼠标粗碰的是固定的。
这个我应该可以也跟着做个的呢

嗯，可以边做变领会，它是简单的

马黑黑 发表于 2024-1-17 19:33

醉美水芙蓉发表于 2024-1-17 19:03
欣赏黑黑老师新作品！

{:4_190:}

页: [1] 2 3 4 5 6

花潮论坛's Archiver

梦从