非常开心 发表于 2023-9-23 19:31

阖家乐庆团圆

<div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_1895643">
<style>
#papa { margin: 10px 0 0 calc(50px - 403px); width: 800px; height: 1000px; background: tan; box-shadow: 0 0 10px gray;position: relative; display: grid; place-items: center; --state: paused; }
#papa {
        margin: 10px 0 0 calc(50% - 403px);
        width: 800px;
        height: 1000px;
        background: url('https://p8.itc.cn/q_70/images03/20200929/10103de9f643402588f426abeb6e98f0.gif') no-repeat center/cover;
        box-shadow: 0 0 8px #000;
        position: relative;
        z-index: 1;
        --state: paused;
}
css-doodle{position: absolute;}
.vid { position: absolute; width: 1024px; height: 640px; object-fit: cover; opacity: 1; }
.mypic { position: absolute;left: 60px;top: 800px; }
.mypic1 { position: absolute;left: 80px;top:650px; }
css-doodle { position: absolute; }
</style>

<div id="papa">

<img class="mypic" src="https://5b0988e595225.cdn.sohucs.com/images/20191211/303fe4ae5e5743b3a19ead7f94d8189f.gif" alt="" />
<img class="mypic1" src="http://bohann.net/data/attachment/forum/202309/23/191032qp9p04e0ed9dmmjn.png" alt="" />
<css-doodle grid="1x1" id="mplayer">
:doodle{ @size: 90px;left:700px;top: 900px; z-index: 40; clip-path: @shape(fill: evenodd; points: 50; scale: .45; x: cos(2t) + cos(π - 7t);y: sin(2t) + sin(7t);); background: tan; cursor: pointer; animation: rot 4s infinite linear var(--state); }
@keyframes rot { to { transform: rotate(360deg); } }</css-doodle>
<css-doodle grid="8x7" click-to-update="">
:doodle {
       @size: 320px 620px;left: 130px;top: 200px;cursor: pointer;z-index: 50;}
@size: 30px;@place: calc(@col * 30px - 15px) calc(@row * 30px - 15px);font: normal 24px / 40px sans-serif;color:tan;text-shadow: 1px 1px 2px #FF00FF;opacity: 0;:before {content: @pn([《阖家乐庆团圆》▷现代非常开心◁夏有荷花秋有藕，不如花朝好朋友，初聚家园来相见，相互惦记到永久。祝大家中秋快乐！]);}animation: show .9s calc((@i - 1) * .9s) linear forwards var(--state);@keyframes show { to { opacity: 1; } }</css-doodle>
</div>

<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1941760702.mp3" autoplay loop></audio>
<script>
(function() {
    let vid = document.querySelector('.vid');
    let script = document.createElement('script');
    script.src = 'https://unpkg.com/css-doodle@0.34.8/css-doodle.min.js';
    document.head.appendChild(script);
    let mState = () => aud.paused ? (papa.style.setProperty('--state', 'paused'), vid.pause()) : (papa.style.setProperty('--state', 'running'), vid.play());   
    aud.addEventListener('play', mState, false);
    aud.addEventListener('pause', mState, false);
    mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script></td></tr></table>

梦缘 发表于 2023-9-23 19:47

问好开心老师，提前祝老师双节快乐幸福！{:4_204:}

醉美水芙蓉 发表于 2023-9-23 20:06

小辣椒 发表于 2023-9-23 21:41

非常开心的非常制作，赞一记！{:4_199:}

小辣椒 发表于 2023-9-23 21:41

同祝双节快乐！

小文 发表于 2023-9-24 07:47

悠闲自得的图文，好美好舒服。问好

非常开心 发表于 2023-9-24 08:38

梦缘 发表于 2023-9-23 19:47
问好开心老师，提前祝老师双节快乐幸福！

谢谢梦缘老师 祝老师双节快乐{:4_204:}

非常开心 发表于 2023-9-24 08:39

醉美水芙蓉 发表于 2023-9-23 20:06
欣赏老师佳作！

芙蓉老师雅赏 祝老师双节快乐{:4_190:}

非常开心 发表于 2023-9-24 08:40

小辣椒 发表于 2023-9-23 21:41
同祝双节快乐！

谢谢师傅鼓励 同祝双节快乐！{:4_187:}

非常开心 发表于 2023-9-24 08:41

小文 发表于 2023-9-24 07:47
悠闲自得的图文，好美好舒服。问好

谢谢小文老师雅赏
同祝双节快乐！

小文 发表于 2023-9-24 20:54

非常开心 发表于 2023-9-24 08:41
谢谢小文老师雅赏
同祝双节快乐！

您太客气了，叫小文就好。愿您 开心快乐！

辫子哥哥 发表于 2023-9-25 17:47

欣赏非常开心的美帖{:4_178:}

红影 发表于 2023-9-26 12:11

非常漂亮又特色的中秋和国庆双节的贺帖，很赞。也祝开心老师双节快乐{:4_199:}
页: [1]
查看完整版本: 阖家乐庆团圆