化蝶
本帖最后由 非常开心 于 2023-10-29 17:59 编辑 <br /><br /><div class="t_fsz"><table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_1895643">
<style>
#papa { margin: 80px 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: 80px 0 0 calc(50% - 653px);
width: 1124px;
height: 740px;
background: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fss2.meipian.me%2Fusers%2F5292601%2Fd52f48c91f974f1a83ea18bdddf82b86.gif%3Fmeipian-raw%2Fbucket%2Fivwen%2Fkey%2FdXNlcnMvNTI5MjYwMS9kNTJmNDhjOTFmOTc0ZjFhODNlYTE4YmRkZGY4MmI4Ni5naWY%3D%2Fsign%2Fdfa0169dd8bff45437974ec2511c4469.jpg&refer=http%3A%2F%2Fss2.meipian.me&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1701093944&t=2ff422fe7119fd2ddb06f3c86144c8ca') 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: 800px;top: 380px; }
.mypic1 { position: absolute;left: 40px;top: 610px; }
css-doodle { position: absolute; }
</style>
<div id="papa">
<img class="mypic" src="https://z3.ax1x.com/2021/08/26/hujGMd.gif" alt="" />
<img class="mypic1" src="http://bohann.net/data/attachment/forum/202310/28/215619t630mkxr08m0skrm.gif" alt="" />
<css-doodle grid="1x1" id="mplayer">
:doodle{ @size: 90px;left:460px;top: 650px; 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: 80px;top: 60px;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 #000;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=358000.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> 我以为你老兄唱越剧了呢，原来是做动态音画啦，聪明 不知道怎么回事，我这里听不到音乐，所以，只看到变色底图，看不到其他效果{:4_203:} 上海朝阳 发表于 2023-10-29 09:09
我以为你老兄唱越剧了呢，原来是做动态音画啦，聪明
好久不见 甚是想念{:4_191:} 红影 发表于 2023-10-29 09:32
不知道怎么回事，我这里听不到音乐，所以，只看到变色底图，看不到其他效果
我这里显示正常 欣赏欣赏 可惜没有声音 问好非常开心，音乐链接失效了吧，没有听到音乐的 看见了画面变色和蝴蝶飞舞{:4_199:} 非常开心 发表于 2023-10-29 10:41
我这里显示正常
是不是你听过乐曲，电脑里有缓存？我这里听不到呢{:4_204:} 非常开心 发表于 2023-10-29 10:41
好久不见 甚是想念
哈哈，闲云徙雁，随意流动，问好！ 红影 发表于 2023-10-29 13:38
是不是你听过乐曲，电脑里有缓存？我这里听不到呢
这老兄的播放器开关在叶轮左边一个点，用了梁祝新唱，不是越剧 上海朝阳 发表于 2023-10-30 09:29
这老兄的播放器开关在叶轮左边一个点，用了梁祝新唱，不是越剧
嗯，现在能听到了。谢谢朝阳大哥提醒{:4_187:}
页:
[1]