绿叶清舟 发表于 2023-5-5 16:43

坠崖鸟


<style>
#papa {
      margin: -80px 00 calc(50% - 633px);
      width: 1100px;
      height: 700px;
      background: url('https://pic2.imgdb.cn/item/644f39b40d2dde5777e3c31b.jpg') center/cover no-repeat;
      overflow: hidden;
      position: relative;
      --state: paused;
}
#mplayer {
      position: absolute;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      box-shadow: 10px 8px #175d5a;
      cursor: pointer;
      animation: rot 1s infinite linear alternate var(--state);
}
#mplayer::before {
      position: absolute;
      content: '';
      top: 10px;
      left: 10px;
      width: 100%;
      height: 100%;
}
#wrap {
      position: absolute;
      width: 100%;
      height: 50%;
      transform: rotate(-30deg);
}
.line {
      --du: 10s; --delay: 0s;
      position: absolute;
      width: 1px;
      height: 100px;
      top: -200px;
      opacity: .9;
      background: linear-gradient(to top, snow, transparent);
      animation: flow var(--du) var(--delay) infinite linear;
}
@keyframes flow { to { top: 100%; opacity: 0; } }
@keyframes rot { from { transform: rotate(-10deg); } to { transform: rotate(10deg); } }
</style>

<div id="papa">
      <div id="wrap"></div>
      <div id="mplayer"></div>
      <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1873737094" autoplay loop></audio>
</div>

<script>
let total = 3, ww = wrap.offsetWidth;
Array.from({length:total}).forEach((item,key) => {
      let sp = document.createElement('span');
      sp.className = 'line';
      sp.style.cssText += `
                --delay: ${Math.random() * 4 - 4}s;
                --du: ${Math.random() * 8 + 4}s;
                left: ${Math.random() * ww}px;
                height: ${Math.random() * 50 + 50}px;
      `;
      wrap.appendChild(sp);
});
let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

红影 发表于 2023-5-5 16:54

很奇特的画面。文字字体也很奇特。还有这样的歌呀。那个女孩眼看要掉下去了。天地间的光影，零星的流星，真有种坠入深渊的感觉{:4_204:}

红影 发表于 2023-5-5 16:55

不知歌曲里的挣脱，到底是想挣脱什么。却被清舟的帖子引得沉浸其中，不得挣脱{:4_199:}

绿叶清舟 发表于 2023-5-5 17:22

红影 发表于 2023-5-5 16:55
不知歌曲里的挣脱，到底是想挣脱什么。却被清舟的帖子引得沉浸其中，不得挣脱

谢谢影，俺也不知道要脱啥的了，都没去看过歌词{:4_189:}

绿叶清舟 发表于 2023-5-5 17:24

红影 发表于 2023-5-5 16:54
很奇特的画面。文字字体也很奇特。还有这样的歌呀。那个女孩眼看要掉下去了。天地间的光影，零星的流星，真 ...

找素材时看到女孩崖边的图片很有感觉，按图去搜歌无意听到这首了

梦油 发表于 2023-5-5 18:11

哇！心惊肉跳！

红影 发表于 2023-5-5 19:58

绿叶清舟 发表于 2023-5-5 17:22
谢谢影，俺也不知道要脱啥的了，都没去看过歌词

这个歌词有点奇特的呢，好像有种挣扎不出的感觉。

红影 发表于 2023-5-5 19:59

绿叶清舟 发表于 2023-5-5 17:24
找素材时看到女孩崖边的图片很有感觉，按图去搜歌无意听到这首了

这张图图的确非常让人有感觉，应该还是清舟又加工过的吧。这样的环境像在梦幻中。

醉美水芙蓉 发表于 2023-5-5 20:39

梦缘 发表于 2023-5-5 20:41

真好的意境，欣赏点赞！{:4_187:}

大猫咪 发表于 2023-5-5 20:42

清舟最近听的歌猫读没听过，   {:5_117:}制作真有创意   那字设计的完美{:4_204:}

樵歌 发表于 2023-5-5 21:00

那鸟字设计得很是奇妙。但眼睁睁看那女孩坠落心里有点那啥。。

竹溪 发表于 2023-5-5 22:56

设计漂亮，欣赏点赞。

绿叶清舟 发表于 2023-5-7 11:49

竹溪 发表于 2023-5-5 22:56
设计漂亮，欣赏点赞。

谢谢竹溪，周末好

绿叶清舟 发表于 2023-5-7 11:50

樵歌 发表于 2023-5-5 21:00
那鸟字设计得很是奇妙。但眼睁睁看那女孩坠落心里有点那啥。。

不怕啊下面有个鸟人接着呢{:4_189:}

绿叶清舟 发表于 2023-5-7 11:50

大猫咪 发表于 2023-5-5 20:42
清舟最近听的歌猫读没听过，   制作真有创意   那字设计的完美

俺也是第一次听到的

绿叶清舟 发表于 2023-5-7 11:50

梦缘 发表于 2023-5-5 20:41
真好的意境，欣赏点赞！

谢谢梦缘，周末好

绿叶清舟 发表于 2023-5-7 11:51

醉美水芙蓉 发表于 2023-5-5 20:39
图图设计漂亮！

谢谢芙蓉，周末快乐

绿叶清舟 发表于 2023-5-7 11:58

红影 发表于 2023-5-5 19:59
这张图图的确非常让人有感觉，应该还是清舟又加工过的吧。这样的环境像在梦幻中。

https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg3.doubanio.com%2Fview%2Fphoto%2Fl%2Fpublic%2Fp919889926.jpg&refer=http%3A%2F%2Fimg3.doubanio.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1686023822&t=7166b275e168b44b4d4826194781c773原图是这个{:4_173:}

绿叶清舟 发表于 2023-5-7 11:58

梦油 发表于 2023-5-5 18:11
哇！心惊肉跳！

假的不吓人啊{:4_173:}
页: [1] 2
查看完整版本: 坠崖鸟