非常开心 发表于 2023-10-1 15:07

【画笔似有马良功】阖家乐庆团圆

本帖最后由 非常开心 于 2023-10-1 15:38 编辑 <br /><br /><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 - 503px); 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% - 503px);
        width: 800px;
        height: 1100px;
        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: 950px; }
.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/200431gketmkf3eaeiyp8a.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 .15s 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=1880995024.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-10-1 16:18

这是动画做的吗？，灯笼幌动的效果很逼真

鲸落深蓝 发表于 2023-10-1 20:40

非常别致的视频制作，音乐很不错，谢谢分享，祝节日快乐

一抹微蓝 发表于 2023-10-1 21:30

好听好看，开心节日 快乐{:10_402:}

墨羽 发表于 2023-10-2 22:58

小兔子都很陶醉的样子，哈哈！
页: [1]
查看完整版本: 【画笔似有马良功】阖家乐庆团圆