绿叶清舟 发表于 2023-2-15 20:09

人间一两风


<style>
#papa {
      --state: running;
      margin: -80px 0 0 calc(50% - 630px);
      width: 1100px;
      height: 700px;
      background: #3D255A url('https://pic.imgdb.cn/item/63ecc5c9f144a010072c7a40.jpg') no-repeat center/cover;
      box-shadow: 6px 3px 20px #000;
      position: relative;
      z-index: 1;
}

.clock {
      position: absolute;
      width: 00px;
}
.clock:nth-of-type(2) {
      transform: translate(100px,40px) scale(0.5) rotate(-15deg);
}
.clock:nth-of-type(3) {
      transform: translate(100px,190px) scale(0.8) rotate(30deg);
}
.clock:nth-of-type(4) {
      width: 200px;
      top: 50px;
      left: 50px;
      cursor: pointer;
      transform-origin: 66% 0;
      animation: swing .8s linear infinite alternate var(--state);
}
@keyframes swing {
      to { transform: rotate(-30deg); }
}
</style>

<div id="papa">
      <img class="clock" src="https://pic.imgdb.cn/item/63ecc8bcf144a01007325653.png" alt="" />
      <img class="clock" src="https://pic.imgdb.cn/item/63ecc8bcf144a01007325653.png" alt="" />
      <img class="clock" src="https://pic.imgdb.cn/item/63ecc8bcf144a01007325653.png" alt="" />
      <img id="mplayer" class="clock" src="https://pic.imgdb.cn/item/63ecc8bcf144a01007325653.png" alt="" />
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1891196126.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');
      aud.addEventListener('play', () => mState());
      aud.addEventListener('pause', () => mState());
      mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
      FS({pa: papa, set: 'color: snow; background: none; border: 2px solid snow; bottom: 20px; left: 50%; transform: translate(-50%);',});
})();
</script>

红影 发表于 2023-2-15 21:34

这个钟摆有趣，变成了一个吹风的图图。这股风吹得好啊，把文字都吹得衣袂飘飞了{:4_187:}

红影 发表于 2023-2-15 21:35

清舟的构思总是这么奇妙{:4_199:}

马黑黑 发表于 2023-2-15 22:17

称了一下，不到一两

庶民 发表于 2023-2-16 05:04

很欣赏您的作品，拜访并问候！

樵歌 发表于 2023-2-16 08:38

给俺来上八两，趟美景里边听美人清唱，边饮醉倒春风里{:4_173:}

海笑 发表于 2023-2-16 10:20

欣赏老师佳作！

小九 发表于 2023-2-16 11:57

樵歌 发表于 2023-2-16 08:38
给俺来上八两，趟美景里边听美人清唱，边饮醉倒春风里

八两风，会不会是台风呀{:4_189:}

小九 发表于 2023-2-16 11:58

这歌好听
这风是柔风
{:4_187:}

小辣椒 发表于 2023-2-16 12:28

马黑黑 发表于 2023-2-15 22:17
称了一下，不到一两

用的什么称？

小辣椒 发表于 2023-2-16 12:30

清舟这个图图文字用了风~~效果。哎，我现在统统忘记了

小辣椒 发表于 2023-2-16 12:31

这个图图好玩{:4_173:}

马黑黑 发表于 2023-2-16 19:25

小辣椒 发表于 2023-2-16 12:28
用的什么称？

天平

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

红影 发表于 2023-2-15 21:34
这个钟摆有趣，变成了一个吹风的图图。这股风吹得好啊，把文字都吹得衣袂飘飞了

正好找到这个小图就拿来用了{:4_189:}

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

马黑黑 发表于 2023-2-15 22:17
称了一下，不到一两

明明有一斤的又被你回扣了啊

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

庶民 发表于 2023-2-16 05:04
很欣赏您的作品，拜访并问候！

谢谢庶民，晚上好

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

樵歌 发表于 2023-2-16 08:38
给俺来上八两，趟美景里边听美人清唱，边饮醉倒春风里

那会吹醉的{:4_189:}

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

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

谢谢海笑

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

小九 发表于 2023-2-16 11:57
八两风，会不会是台风呀

八级台风{:4_189:}

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

小辣椒 发表于 2023-2-16 12:30
清舟这个图图文字用了风~~效果。哎，我现在统统忘记了

是啊，用的滤镜--风
页: [1] 2
查看完整版本: 人间一两风