论坛 › 欢乐水吧 › 逛动物园（谢谢黑黑--姑苏播放器效果）

小辣椒 发表于 2023-2-23 21:16

逛动物园（谢谢黑黑--姑苏播放器效果）

<style>
#papa {
      margin: 80px 0 0 calc(50% - 730px);
      width: 1280px;
      height: 650px;
      background: lightblue url('https://7e.g74.net/uploads/xx/20230223/05F.gif') no-repeat center/cover;
      box-shadow: 3px 3px 20px #000;
      position: relative;
      user-select: none;
      z-index: 1;
      --state: paused;
}
#fly {
      position: absolute;
      left: 0;      
      width: 360px;
      height: 200px;
      animation: fly 100s infinite alternate var(--state);
}
.mplayer {
      --tt: 6s;
      position: absolute;
      left: 0;
      top:200px;
      width: 150px;
      height: 150px;
      border-radius: 50%;
      transform: perspective(1000px) rotateX(45deg) rotateY(30deg);
      animation: rot var(--tt) infinite var(--state);
      cursor: pointer;
      transition: .45s;
}
.mplayer:hover { filter: drop-shadow(0 0 80px green) brightness(200%); }
.mplayer:nth-of-type(2) {
      --tt: 4s;

      left: 210px;
      top:200px;
      width: 120px;
      height: 120px;
}
.mplayer:nth-of-type(3) {
      --tt: 2s;
      left: 130px;
      top:200px;
      width: 100px;
      height: 100px;
}
@keyframes rot { to { transform: perspective(1000px) rotateX(45deg) rotateY(30deg) rotateZ(360deg); } }
@keyframes fly { to { left: calc(100% - 360px); } }
#dt2{ position: absolute; width: 500px; height: 223px; bottom: 30px;left:30%; mix-blend-mode: multiply; transform: translate(50px, 50px) rotate(360deg); }
</style>

<div id="papa">
<img id="dt2" src="https://7e.g74.net/uploads/xx/20230223/af23.jpg" alt=""/>
      <div id="fly">
                <img class="mplayer" src="https://7e.g74.net/uploads/xx/20230223/a9.png" alt="" />
                <img class="mplayer" src="https://7e.g74.net/uploads/xx/20230223/a9.png" alt="" />
                <img class="mplayer" src="https://7e.g74.net/uploads/xx/20230223/a9.png" alt="" />
      </div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=421934255.mp3" loop autoplay></audio>
<script>
(function() {
      (function(mkFS) {let setFullScreen = (user_set) => {let pa = user_set.pa;if(typeof(pa) !== 'object') return false;if(!user_set.set) user_set.set = 'color: snow; background: black; border: 2px solid snow; left: 40px; bottom: 40px;';btnMsg = document.createElement('span');btnMsg.style.cssText = `position: absolute; border-radius: 8px; padding: 4px; cursor: pointer; z-index:998; ${user_set.set}`;btnMsg.innerText = '全屏观赏';btnMsg.style.display = 'none';pa.appendChild(btnMsg);let timerId, fs = false;btnMsg.onclick = () => fs ? document.exitFullscreen() : pa.requestFullscreen();pa.addEventListener('mousemove', (e) => {clearTimeout(timerId);btnMsg.style.display = 'block';timerId = setTimeout('btnMsg.style.display = "none"', 3000);});document.addEventListener('fullscreenchange', () => {if (document.fullscreenElement !== null) {fs = true;btnMsg.innerText = '退出全屏';} else {fs = false;btnMsg.innerText = '全屏观赏';}});};mkFS.FS = setFullScreen;})(this);
      let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
      let btns = document.querySelectorAll('.mplayer');
      [...btns].forEach((item) => item.onclick = () => aud.paused ? aud.play() : aud.pause());
      aud.addEventListener('play', () => mState());
      aud.addEventListener('pause', () => mState());
      FS({
                pa:papa,
                set:'left: 50%; transform: translate(-50%); bottom: 200px; background: transparent; color: DarkKhaki; border: 2px dotted DarkKhaki;',
      });
})();
</script>

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

@马黑黑

黑黑套用一个，谢谢黑黑源码分享{:4_187:}

马黑黑 发表于 2023-2-23 21:17

沙发不是我的

小辣椒 发表于 2023-2-23 21:18

斑马斑马 - 前冲

斑马斑马 你不要睡着啦
再给我看看你受伤的尾巴
我不想去触碰你伤口的疤
我只想掀起你的头发
斑马斑马 你回到了你的家
可我浪费着我寒冷的年华
你的城市没有一扇门为我打开啊
我终究还要回到路上
斑马斑马 你来自南方的红色啊
是否也是个动人的故事啊
你隔壁的戏子如果不能留下
谁会和你睡到天亮
斑马斑马 你还记得我吗
我是只会歌唱的傻瓜
斑马斑马 你睡吧睡吧
我会背上吉他离开北方
斑马斑马 你还记得我吗
我是强说着忧愁的孩子啊
斑马斑马 你睡吧睡吧
我把你的青草带回故乡
斑马斑马 你不要睡着啦
我只是个匆忙的旅人啊
斑马斑马 你睡吧睡吧
我要卖掉我的房子
浪迹天涯

小辣椒 发表于 2023-2-23 21:18

马黑黑 发表于 2023-2-23 21:17
沙发不是我的

给你留的{:4_170:}

马黑黑 发表于 2023-2-23 21:19

该动的动，该静的静，创意不错

小辣椒 发表于 2023-2-23 21:19

小朋友在老师的带领下，游动物园{:4_189:}

马黑黑 发表于 2023-2-23 21:21

小辣椒 发表于 2023-2-23 21:18
给你留的

算了，俺还是做地板吧，结实

小辣椒 发表于 2023-2-23 21:21

马黑黑 发表于 2023-2-23 21:19
该动的动，该静的静，创意不错

就加了个小朋友在老师的带领下看动物园的斑马的图图

马黑黑 发表于 2023-2-23 21:22

小辣椒 发表于 2023-2-23 21:21
就加了个小朋友在老师的带领下看动物园的斑马的图图

还有粒子，动态文字

绿叶清舟 发表于 2023-2-23 21:22

第一眼以为是黑黑姑了{:4_189:}

绿叶清舟 发表于 2023-2-23 21:23

森林动物园啊，这个字体太喜欢了

小辣椒 发表于 2023-2-23 21:26

马黑黑 发表于 2023-2-23 21:21
算了，俺还是做地板吧，结实

我家的沙发是红木的，很结实的，再胖都没有问题{:4_170:}

小辣椒 发表于 2023-2-23 21:26

马黑黑 发表于 2023-2-23 21:22
还有粒子，动态文字

这个是动图，下面加的图片效果

马黑黑 发表于 2023-2-23 21:27

小辣椒 发表于 2023-2-23 21:26
这个是动图，下面加的图片效果

反正是这效果

马黑黑 发表于 2023-2-23 21:27

小辣椒 发表于 2023-2-23 21:26
我家的沙发是红木的，很结实的，再胖都没有问题

红木有假的

小辣椒 发表于 2023-2-23 21:28

绿叶清舟 发表于 2023-2-23 21:23
森林动物园啊，这个字体太喜欢了

这个标题字做了水动效果

小辣椒 发表于 2023-2-23 21:28

马黑黑 发表于 2023-2-23 21:27
反正是这效果

都是以前的作品，我就地取材{:4_170:}

小辣椒 发表于 2023-2-23 21:29

马黑黑 发表于 2023-2-23 21:27
红木有假的

反正我们家里的沙发我睡觉都没有问题的，结实的

绿叶清舟 发表于 2023-2-23 21:33

小辣椒 发表于 2023-2-23 21:28
这个标题字做了水动效果

软件上做的啊，很漂亮的

查看完整版本: 逛动物园（谢谢黑黑--姑苏播放器效果）