相约爱晚亭 发表于 2022-10-2 12:54

【习作】友谊地久天长

本帖最后由 相约爱晚亭 于 2022-10-2 13:35 编辑 <br /><br /><div class="t_fsz">
<div style="position: relative; width: 1024px; top:100px; left: 0px">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_1665917">
<style>
#papa { left: -214px; width: 1024px; height: 600px; display: grid; place-items: center; background: gray url('https://s1.ax1x.com/2022/10/02/xKzHm9.jpg') no-repeat center/cover; box-shadow: 3px 3px 26px #000; position: relative; }
#papa div, #papa img, #papa span { position: absolute; }
#mama { width: 400px; height: 400px; left: calc(50% - 200px); top: calc(50% - 200px); background: radial-gradient(at 40% 30%, snow, transparent); border-radius: 50%; display: grid; place-items: center; }
#disc { right: calc(50% - 30px); top: calc(50% - 30px); width: 60px; height: 60px; background: conic-gradient(red,orange,yellow,green,teal,blue,purple); mask: radial-gradient(transparent 4px,red 0); -webkit-mask: radial-gradient(transparent 4px,red 0); border-radius: 50%; opacity: 0; cursor: pointer; animation: rot 2s linear infinite; }
#mpic { width: 300px; height: 211px; right: calc(50% - 150px); bottom: calc(50% - 105px); opacity: 0; }

#tit { font: bold 2em/2.4em sans-serif; color: #6795ac; text-shadow: 1px 1px 2px rgba(0,0,0,.75); opacity: 0; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="papa">
        <div id="disc"></div>
        <img id="mpic" src="https://638183.freep.cn/638183/Pic/81/he.png" alt="" />
        <div id="mama"><span id="tit">友 谊 地 久 天 长</span></div>
</div>

<script>

let idx = 0, aud = new Audio();
aud.src = 'http://link.hhtjim.com/163/1958238179.mp3';
aud.loop = true;
aud.autoplay = true;

disc.style.animationPlayState = aud.paused ? 'paused' : 'running';
let TT = setTimeout(change,3000);

disc.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing',()=> disc.style.animationPlayState = 'running');
aud.addEventListener('pause',()=> disc.style.animationPlayState = 'paused');

function change() {
        let aniAr = [
                ,
                ,
                ,
                ,
                ,
                ,
                ,
                ,
                ,
                ,
                ,
                ,
        ];
        let ele = aniAr;
        ele.style.transition = 'all 3s';
        ele.style.cssText += aniAr;
        idx ++;
        idx <= aniAr.length - 1 ? TT = setTimeout(change, 3000) : clearTimeout(TT);
}
</script>
</td></tr></table>
</div>
<br><br><br><br><br><br><br><br>

<p style="text-align: center;font-family:楷体;font-size: 28px;font-weight:bold;color:#ff3333;">祝花潮论坛的朋友们国庆节快乐！</p>

相约爱晚亭 发表于 2022-10-2 12:55

谢谢黑黑老师源码分享！

马黑黑 发表于 2022-10-2 13:47

球球还是很耐看的，配这个背景很酷！

红影 发表于 2022-10-2 15:08

看到这熟悉的效果，想起黑黑有过这样的代码。
漂亮，爱晚亭真棒{:4_187:}

相约爱晚亭 发表于 2022-10-2 16:43

马黑黑 发表于 2022-10-2 13:47
球球还是很耐看的，配这个背景很酷！

黑黑老师的设计和创意真是棒！为你点赞！

相约爱晚亭 发表于 2022-10-2 16:44

红影 发表于 2022-10-2 15:08
看到这熟悉的效果，想起黑黑有过这样的代码。
漂亮，爱晚亭真棒

谢谢红影的支持和鼓励！

马黑黑 发表于 2022-10-2 16:46

相约爱晚亭 发表于 2022-10-2 16:43
黑黑老师的设计和创意真是棒！为你点赞！

你运用的很好

红影 发表于 2022-10-2 19:59

相约爱晚亭 发表于 2022-10-2 16:44
谢谢红影的支持和鼓励！

画面构思很好，欣赏{:4_187:}

相约爱晚亭 发表于 2022-10-2 22:39

红影 发表于 2022-10-2 19:59
画面构思很好，欣赏

谢谢鼓励！音乐有时不响，需更换浏览模式才播放，浏览模式真是有点搞不懂。

红影 发表于 2022-10-3 11:28

相约爱晚亭 发表于 2022-10-2 22:39
谢谢鼓励！音乐有时不响，需更换浏览模式才播放，浏览模式真是有点搞不懂。

我这里能听到的呢，好听{:4_187:}

寒冬残荷 发表于 2022-10-4 23:55

欣赏学习！漂亮！

相约爱晚亭 发表于 2022-10-5 16:07

寒冬残荷 发表于 2022-10-4 23:55
欣赏学习！漂亮！

谢谢关注和支持！
页: [1]
查看完整版本: 【习作】友谊地久天长