绿叶清舟 发表于 2024-7-11 20:20

黑白画映


<style>
    #mydiv { --width: 1280px; margin: 30px 0 30px calc(50% - (var(--width) / 2 + 81px)); width: var(--width); height: 720px;   background: url('https://p.upyun.com/demo/tmp/Cfvx9n1o.webp') no-repeat center/cover; z-index: 1; overflow: hidden; box-shadow: 4px 3px 8px #666; overflow: hidden; position: relative; display: grid; place-items: center; --bgsize: 25%; }
    #mydiv::before, #mydiv::after { position: absolute; content: ''; width: 100%; height: 100%; background-image: inherit; background-size: var(--bgsize); opacity: .2; transform: rotate(-45deg); pointer-events: none; animation: chg .25s linear infinite alternate var(--state); }
    #mydiv::after { transform: rotate(45deg); animation-delay: -0.125; }
    #player { position: absolute; width: 102px; filter: invert(0.5); transition: width .5s; cursor: pointer; animation: rot 8s linear infinite var(--state), hue 30s linear infinite alternate var(--state); }
    #player:hover { width: 120px; }
    @keyframes chg { to { --bgsize: 100%; } }
    @keyframes rot { to { transform: rotate(360deg); } }
    @keyframes hue { to { filter: invert(0.5); } }
</style>

<div id="mydiv">
    <audio id="aud" src="https://music.163.com/song/media/outer/url?id=187995" autoplay loop></audio>
    <img id="player" alt="" src="https://638183.freep.cn/638183/t23/btn/f5.png" titel="播放/暂停" />
</div>

<script>
var sF = document.createElement('script');
sF.src = 'https://638183.freep.cn/638183/web/api/fullscreen.js';
sF.charset = 'utf-8';
document.querySelector('body').appendChild(sF);
sF.onload = () => FS({
      papa: '#mydiv',
      css: 'bottom: 20px; left: 50%; transform: translate(-50%); --color: lightblue; --fsBg: transparent;',
});
var mState = () => {
      mydiv.style.setProperty('--state',['running','paused'][+aud.paused]);
      player.title = ['暂停','播放'][+aud.paused];
};
aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

小九 发表于 2024-7-11 20:43

有点定格的味道，特效也是黑白的{:4_187:}

小辣椒 发表于 2024-7-11 20:48

清舟的制作太美了，图图意境 设计都是一流，太喜欢清舟的东西了{:4_170:}

马黑黑 发表于 2024-7-11 20:48

黑白有韵味

小辣椒 发表于 2024-7-11 20:48

清舟艺术细胞特棒{:4_178:}

小辣椒 发表于 2024-7-11 20:49

必须赞~~~{:4_199:}{:4_187:}{:4_178:}

梦油 发表于 2024-7-11 21:03

黑白相衬倒也很有特色。

绿叶清舟 发表于 2024-7-11 21:11

小九 发表于 2024-7-11 20:43
有点定格的味道，特效也是黑白的

九好在啊，特效是跟背景的

绿叶清舟 发表于 2024-7-11 21:12

小辣椒 发表于 2024-7-11 20:48
清舟的制作太美了，图图意境 设计都是一流，太喜欢清舟的东西了

谢谢辣椒，正好看到这首歌就整来了

绿叶清舟 发表于 2024-7-11 21:13

马黑黑 发表于 2024-7-11 20:48
黑白有韵味

以为律动那个动的是后面控制了，做完才知道是跟着背景来的

绿叶清舟 发表于 2024-7-11 21:13

小辣椒 发表于 2024-7-11 20:48
清舟艺术细胞特棒

600号的细胞{:4_189:}

绿叶清舟 发表于 2024-7-11 21:14

梦油 发表于 2024-7-11 21:03
黑白相衬倒也很有特色。

有时越简单越有味道了{:4_173:}

红影 发表于 2024-7-11 22:04

好奇妙的效果，看得迷醉了。清舟太赞了{:4_199:}

红影 发表于 2024-7-11 22:05

这效果好玄妙啊{:4_187:}

马黑黑 发表于 2024-7-11 22:34

绿叶清舟 发表于 2024-7-11 21:13
以为律动那个动的是后面控制了，做完才知道是跟着背景来的

有发现

梦油 发表于 2024-7-12 15:00

绿叶清舟 发表于 2024-7-11 21:14
有时越简单越有味道了

对，我同意你这个观点。

朵拉 发表于 2024-7-12 20:40

迷幻的效果呦，欣赏学习{:4_204:}

冬天的雨 发表于 2024-7-13 10:51

清舟肯定属于高级人才{:4_170:}

冬天的雨 发表于 2024-7-13 10:51

冬雨现在纯欣赏

绿叶清舟 发表于 2024-7-13 20:21

红影 发表于 2024-7-11 22:04
好奇妙的效果，看得迷醉了。清舟太赞了

没做好了
页: [1] 2
查看完整版本: 黑白画映