醉美水芙蓉 发表于 2023-6-22 22:19

学着玩玩

本帖最后由 醉美水芙蓉 于 2023-6-22 22:19 编辑 <br /><br /> <style>
#papa {
       margin: 0 0 0 calc(50% - 593px);
      width: 1024px;
      height: 640px;
      background: url('https://pic.imgdb.cn/item/64944d761ddac507cc2f0b9a.png') no-repeat center/cover,
                url('https://638183.freep.cn/638183/t23/2/xzsz.jpg') 340px 100px no-repeat,
                url('https://638183.freep.cn/638183/t23/2/xzsz.jpg') 580px 10px no-repeat;
      background-blend-mode: multiply, multiply;
      box-shadow: 3px 3px 20px #000;
      z-index: 1;
      pointer-events: none;
      position: relative;
      --state: paused;
      --delay: 0s;
}
#papa::before, #papa::after {
      position: absolute;
      content: '';
      width: 114px;
      height: 114px;
      background: url('https://pic.imgdb.cn/item/649447691ddac507cc24d340.png') no-repeat center/cover;
      mix-blend-mode: multiply;
      pointer-events: auto;
      cursor: pointer;
      transform-origin: 50% 100%;
      animation: dance .5s var(--delay) infinite alternate linear var(--state);
}
#papa:before {
      left: 160px;
      top: 520px;
}
#papa::after {
      left: calc(90% - 157px);
      bottom: 20px;
      --delay: .25s;
}
@keyframes dance {
      from { transform: skew(-5deg); }
      to {transform: skew(5deg); }
}
</style>

<div id="papa">

</div>
<audio id="aud" src="https://pan.111t.net/view.php/49023ea22367ecbd60d2d852fceb3081.mp3" autoplay="autoplay" loop="loop"></audio>

<script>
(function () {
      let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
      aud.addEventListener('play', mState, false);
      aud.addEventListener('pause', mState, false);
      papa.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>


马黑黑 发表于 2023-6-23 06:34

竹叶包粽子，还包熊猫{:4_199:}

红影 发表于 2023-6-23 09:01

这是熊猫型的粽子吗？国宝级的粽子啊。{:4_173:}

红影 发表于 2023-6-23 09:02

好漂亮的制作啊，欣赏水芙蓉好帖{:4_187:}

醉美水芙蓉 发表于 2023-6-23 11:41

马黑黑 发表于 2023-6-23 06:34
竹叶包粽子，还包熊猫

这是熊猫粽子！

醉美水芙蓉 发表于 2023-6-23 11:41

红影 发表于 2023-6-23 09:02
好漂亮的制作啊，欣赏水芙蓉好帖

红影美女中午好！

小辣椒 发表于 2023-6-23 12:44

醉美水芙蓉 发表于 2023-6-23 11:41
这是熊猫粽子！

哇塞，熊猫是国宝不能包粽子哦{:4_189:}

小辣椒 发表于 2023-6-23 12:44

欣赏水芙蓉精彩的制作

岩新新 发表于 2023-6-23 13:46

欣赏精彩制作！

梦缘 发表于 2023-6-23 17:30

问好老师，欣赏精彩分享，点赞！{:4_204:}

醉美水芙蓉 发表于 2023-6-23 18:18

小辣椒 发表于 2023-6-23 12:44
欣赏水芙蓉精彩的制作

谢谢小辣椒欣赏！

醉美水芙蓉 发表于 2023-6-23 18:18

岩新新 发表于 2023-6-23 13:46
欣赏精彩制作！

谢谢岩新老师欣赏！

醉美水芙蓉 发表于 2023-6-23 18:18

梦缘 发表于 2023-6-23 17:30
问好老师，欣赏精彩分享，点赞！

谢谢老师支持！

红影 发表于 2023-6-24 18:21

醉美水芙蓉 发表于 2023-6-23 11:41
红影美女中午好！

问好水芙蓉美女，这个帖子非常有趣{:4_187:}
页: [1]
查看完整版本: 学着玩玩