清明祭奠伟人
本帖最后由 非常开心 于 2023-11-25 20:23 编辑 <br /><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(50% - 453px); width: 1124px; height: 740px; background: tan; box-shadow: 0 0 10px gray;position: relative; display: grid; place-items: center; --state: paused; }
#papa {
margin: 10px 0 0 calc(50% - 653px);
width: 1200px;
height: 780px;
background: url('https://pic.quanjing.com/z3/mp/QJ6534311181.jpg@%21350h') 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: 740px; object-fit: cover; opacity: 1; }
.mypic { position: absolute;left: 805px;top: 450px; }
.mypic1 { position: absolute;left: 800px;top: 50px; }
.mypic2 { position: absolute;left: 0px;top: 480px; }
css-doodle { position: absolute; }
</style>
<div id="papa">
<img class="mypic" src="http://bohann.net/data/attachment/forum/202311/25/192546ph13uid7c1am0z6z.png" alt="" />
<img class="mypic1" src="http://bohann.net/data/attachment/forum/202311/25/200324wvolv76jho4jp76v.png" alt="" />
<img class="mypic2" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fss2.meipian.me%2Fusers%2F43187945%2F3f5e36489538d52cdda4d2e6fe008d9d.gif%3Fmeipian-raw%2Fbucket%2Fivwen%2Fkey%2FdXNlcnMvNDMxODc5NDUvM2Y1ZTM2NDg5NTM4ZDUyY2RkYTRkMmU2ZmUwMDhkOWQuZ2lm%2Fsign%2Fe3b52c089408ed21772d2beecddf563f.jpg&refer=http%3A%2F%2Fss2.meipian.me&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1703502294&t=0cccc9898cfaf1a6ca4d8ff04a2e56ad" alt="" />
<css-doodle grid="1x1" id="mplayer">
:doodle{ @size: 90px;left:480px;top: 680px; 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="8x5" click-to-update="">
:doodle {
@size: 320px 620px;left: 60px;top: 260px;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=2079987687.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>