绿叶清舟 发表于 2023-7-14 21:43

幻影-陈果


<style>
#papa { margin: auto; left: -250px; top: 80px;width: 1100px; height: 700px; background: #051850 url('https://pic.imgdb.cn/item/64b150151ddac507cc52947d.jpg') no-repeat; box-shadow: 3px 3px 20px -3px #000; position: relative; }

#disc { position: absolute; width: 40px; height: 40px; left: 190px; top: 635px; background: conic-gradient(#000000,#1118a5,#000000,#1118a5,#000000); mask: radial-gradient(transparent 4px,red 0); -webkit-mask: radial-gradient(transparent 4px,red 0); border-radius: 50%; cursor: pointer; animation: rot 2s linear infinite; }

@keyframes rot { to { transform: rotate(360deg); } }
@keyframes circle { from { transform: rotate(0) translate(50px); } to { transform: rotate(360deg) translate(50px); } }


</style>

<div id="papa">
      <div class="water"></div>
      
      <div id="disc"></div>
</div>
<BR><BR><BR><BR><BR><BR>
<script>
let stepX = 1, stepY = 1, moveX= 0, moveY = 0;
let aud = new Audio();

aud.src = 'http://music.163.com/song/media/outer/url?id=2045550288.mp3';
aud.loop = true;
aud.autoplay = true;

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

motion();

function motion() {
      moveX += stepX;
      moveY += stepY;
      mama.style.left = moveX + 'px';
      mama.style.top = moveY + 'px';
      requestAnimationFrame(motion);
      if(moveX < 0 || moveX >= papa.offsetWidth - mama.offsetWidth) stepX = -stepX;
      if(moveY < 0 || moveY >= papa.offsetHeight - mama.offsetHeight) stepY = -stepY;
}
</script>

大猫咪 发表于 2023-7-14 21:50

图靓歌棒！好 创意！这妹妹嗓音磁性中略带沙哑，真好听！

清舟好制作！赞！

{:4_204:}{:4_199:}

红影 发表于 2023-7-14 21:57

字体设计好奇妙，图片的色彩也很奇妙。清舟的帖子好棒{:4_199:}

小辣椒 发表于 2023-7-14 23:28

清舟这个播放器有吗，我点击了没有出来{:4_203:}

小辣椒 发表于 2023-7-14 23:30

清舟的图图很美{:4_199:}

樵歌 发表于 2023-7-15 06:36

与好徕坞大片广告一般无二，不过我是假想压根儿就没见过。{:4_187:}{:4_173:}

一斛珠 发表于 2023-7-15 09:48

真好看的说

马黑黑 发表于 2023-7-17 19:02

漂酿
页: [1]
查看完整版本: 幻影-陈果