论坛 › 欢乐水吧 › 野鸽子

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

野鸽子

本帖最后由 绿叶清舟 于 2023-2-18 11:03 编辑 <br /><br /><style>

.outer { left: -250px; width: 1100px; height: 700px; background: url('https://pic.imgdb.cn/item/63ef58d6f144a01007a2d1be.jpg') no-repeat; overflow: hidden; position: relative; }
.sky { position: absolute; width: inherit; height: 270px; background: url('/data/attachment/forum/202206/03/202728j87yxyk38w3cwc3g.png'); animation: cloud_fly 40s linear infinite;}
.goose { position: absolute; bottom: 30px; left: 150px; width: 200px; cursor: pointer; mix-blend-mode: darken;}

/* 播放器 */
#mplayer {
      position: absolute; /* 绝对定位方式 */
      width: 200px;/* 宽度 */
      height: px;/* 高度 */
      left: 150px; /* 定位 ：左边值 */
      top: px; /* 定位 ：右边值 */
      background: olive;/* 背景色 */
      cursor: pointer; /*鼠标指针样式 ：手型 */
      animation: spin 8s linear infinite;/* 运行动画 */
      animation-play-state: var(--state);/* 动画运行状态 ：通过变量接受JS控制 */
      animation: fly 20s infinite;
}
@keyframes cloud_fly { from { background-position: 0 0; } to { background-position: -799px 0; } }
@keyframes btn_rot { to { transform: rotate(1turn); } }
/* 关键帧动画*/
@keyframes fly { from { left: 0; } to { left: 20%; } }
</style>

<div class="outer">
        <div class="sky"></div>
        <img id="mplayer" class="goose" src="https://pic.rmb.bdstatic.com/bjh/events/51500df589408a3d98b723f39ee17610.gif" alt="" />       
</div>
<audio id="aud" src="http://music.163.com/song/media/outer/url?id=1834684508.mp3" autoplay="autoplay" loop="loop"></audio>

<script>

let mState = () => {
      aud.paused ? papa.style.setProperty('--state', 'paused') : papa.style.setProperty('--state', 'running');
};

mplayer.addEventListener('click', () => {
      aud.paused ? aud.play() : aud.pause();
});

aud.addEventListener('play', () => mState());

aud.addEventListener('pause', () => mState());
</script>

红影 发表于 2023-2-17 20:42

天上的云朵特别好看，像是带着质感。树上的鸽子漂亮，地面上的小鸭子更可爱{:4_187:}

红影 发表于 2023-2-17 20:43

字体漂亮，场景也漂亮。那小鸭子有手型符号，但点上去好像歌曲没停啊{:4_173:}

红影 发表于 2023-2-17 20:44

这次划拉一下总算划出手型符号了。歌曲好听，天空那么高，要飞上去瞧一瞧{:4_187:}

绿叶清舟 发表于 2023-2-17 20:55

红影 发表于 2023-2-17 20:43
字体漂亮，场景也漂亮。那小鸭子有手型符号，但点上去好像歌曲没停啊

找动图换滤镜折腾得，忘了关连了{:4_189:}

醉美水芙蓉 发表于 2023-2-17 21:39

小辣椒 发表于 2023-2-17 21:40

清舟这个没有加播放器吗？

小辣椒 发表于 2023-2-17 21:41

点击小鸭子没有停止？

小辣椒 发表于 2023-2-17 21:42

清舟 这个构思特别的美，云动效果漂亮，图图风趣，整体效果棒棒的{:4_178:}

红影 发表于 2023-2-17 21:51

绿叶清舟 发表于 2023-2-17 20:55
找动图换滤镜折腾得，忘了关连了

去看了一下，加了滤镜好棒的，让小鸭子的原本的底图完全隐去了呢{:4_199:}

庶民 发表于 2023-2-18 05:49

让我们在欣赏的同时得到一种享受。
给我耳目一新的感觉，学习了！

梦油 发表于 2023-2-18 09:15

我很喜欢左下角逍遥自在的小鸭子

海笑 发表于 2023-2-18 10:05

欣赏老师佳作！

绿叶清舟 发表于 2023-2-18 11:15

海笑 发表于 2023-2-18 10:05
欣赏老师佳作！

谢谢海笑

绿叶清舟 发表于 2023-2-18 11:16

梦油 发表于 2023-2-18 09:15
我很喜欢左下角逍遥自在的小鸭子

都看出来是鸭子啊，俺还想让它冒充鸽子的呢{:4_173:}

绿叶清舟 发表于 2023-2-18 11:16

庶民 发表于 2023-2-18 05:49
让我们在欣赏的同时得到一种享受。
给我耳目一新的感觉，学习了！

谢谢庶民，周末好

绿叶清舟 发表于 2023-2-18 11:17

小辣椒 发表于 2023-2-17 21:41
点击小鸭子没有停止？

谢谢辣椒，改了，本来就想用这个做播放器的，找动图找着找着给忘记了{:4_189:}

梦油 发表于 2023-2-18 14:06

绿叶清舟 发表于 2023-2-18 11:16
都看出来是鸭子啊，俺还想让它冒充鸽子的呢

哦，原来是鸽子啊！

梦缘 发表于 2023-2-18 16:38

可爱的鸭子，欣赏问好！{:4_176:}

绿叶清舟 发表于 2023-2-18 19:52

梦油 发表于 2023-2-18 14:06
哦，原来是鸽子啊！

是卧底{:4_189:}当时真没看出来是啥，只觉得喜欢就拿来用了

查看完整版本: 野鸽子