纪念抗美援朝73周年
<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% - 853px); 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% - 603px);
width: 1124px;
height: 740px;
background: url('https://p8.itc.cn/q_70/images03/20201019/db14015337b44adca9c283fb176ca3fd.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: 755px;top: 515px; }
.mypic1 { position: absolute;left: 850px;top: 40px; }
css-doodle { position: absolute; }
</style>
<div id="papa">
<img class="mypic" src="https://tukuimg.bdstatic.com/scrop/532f0093851a91c9a1b15470961df301.gif" alt="" />
<img class="mypic1" src="https://5b0988e595225.cdn.sohucs.com/images/20190226/343f460092a147289ddcae8531812299.gif" alt="" />
<css-doodle grid="1x1" id="mplayer">
:doodle{ @size: 90px;left:460px;top: 620px; 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="8x10" click-to-update="">
:doodle {
@size: 320px 620px;left: 60px;top: 360px;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([《抗美援朝纪念》抗美援朝73周年上甘岭上风云荡，鬼子痴心北扰疆。烽火隆隆烟柱矗，枪声刺耳恶浪狂。雄争寸土枪林卧，固守山头斗志昂。四十三天垂战史，军威大振盛名扬。]);}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=281975.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>
开心制作的挺好的{:10_402:}向所有的志愿军敬礼！ 打得一拳开，不怕百拳来！
页:
[1]